React-testing-library + Redux:找不到“商店"在“连接(货币)"的上下文中； [英] 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);

这是我的测试:

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>

我做错了什么?我将它包装在一个 Provider 中，我在嘲笑商店.没看懂

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

这会产生相同的错误:

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

推荐答案

我想通了.Jest 不喜欢我导入的 connect.这修复了它

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

这篇关于React-testing-library + Redux:找不到“商店"在“连接(货币)"的上下文中；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！