React-testing-library + Redux：在 "Connect(Currency)" 的上下文中找不到 "store"

Question

我有一个看起来像这样的组件：

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);

这是我的测试：

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`)).toBeInTheDocument();
});

但由于某种原因它一直失败：

  ● 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>

我做错了什么？我将它包装在 Provider 中并模拟商店。我不明白

这会产生相同的错误：

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

Answer 1

我明白了。 Jest 不喜欢我导入的 connect。这修复了它

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

React-testing-library + Redux：在 "Connect(Currency)" 的上下文中找不到 "store"

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

reactjs

redux

react-testing-library