React-testing-library + Redux: Could not find “store” in the context of “Connect(Currency)”

问题

I have a component that looks like this:

import React, { Component } from 'react';
import connect from 'react-redux/es/connect/connect';
import { FormattedNumber } from 'react-intl';

class Currency extends Component {
  render() {
    const { setting, amount } = this.props;
    const { employee } = setting;
    const { currency = 'USD', currency_symbol } = employee.settings;

    /*eslint-disable react/style-prop-object*/
    const applicable_symbol = currency_symbol || currency;
    return (
      <FormattedNumber
        value={amount}
        style="currency"
        currency={applicable_symbol}
      />
    );
  }
}

function mapStateToProps(state) {
  return state;
}

export default connect(mapStateToProps)(Currency);

And this is my test:

import '@testing-library/jest-dom';
import React from 'react';
import { render } from '../../../../test-utils';
import Currency from '../../Currency';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';


test('renders the price in USD format', () => {
  const mockStore = configureMockStore();
  const store = mockStore({
    setting: {
      employee: { settings: { currency: 'USD', currency_symbol: '$' } }
    }
  });


  const { getByText } = render(
    <Provider store={store}>
      <Currency amount={99.99} />
    </Provider>
  );

  expect(getByText(`$99.99`)).toBeInTheDocument();
});

But for some reason it keeps failing with:

  ● renders the price in USD format

    Could not find "store" in the context of "Connect(Currency)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Currency) in connect options.

      51 |   });
      52 |
    > 53 |   const { getByText } = render(
         |                         ^
      54 |     <Provider store={store}>
      55 |       <Currency amount={123.12} />
      56 |     </Provider>

What am I doing wrong? I'm wrapping it in a Provider and I'm mocking the store. I don't get it

This produces the same error:

  const Wrapper = ({ children }) => (
    <Provider store={store}>{children}</Provider>
  );
  const { getByText } = render(<Currency amount={123.12} />, {
    wrapper: Wrapper
  });

回答1:

I figured it out. Jest didn't like the connect that I was importing. This fixed it

// import connect from 'react-redux/es/connect/connect';
import { connect } from 'react-redux';

来源：https://stackoverflow.com/questions/62765183/react-testing-library-redux-could-not-find-store-in-the-context-of-connect

标签

reactjs

redux

react-testing-library