TypeError：使用 react-create-app jest 和酶进行测试时，调度不是函数

Question

我正在尝试对使用 react-create-app 创建的新项目进行测试。现在似乎正在使用 React 16 和 Jest 3（据说有一些重大变化，或者可能是 enzime）。我收到与此帖子类似的错误TypeError: dispatch is not a function when I try to test a method using JEST

TypeError: dispatch is not a function 在 App.componentDidMount (src/components/App.js:21:68)

import React from 'react';
import { Provider } from 'react-redux';
import { mount } from 'enzyme';

import { App } from '../components/App';
import configureStore from '../state/store/configureStore';

window.store = configureStore({
  slider: {
    mainImageIndex: 0,
    pageNum: 1,
    perPage: 4,
  },
});

const appTest = (
  <Provider store={window.store}>
    <App />
  </Provider>
);

describe('App', () => {
  it('should render without crashing', () => {
    mount(appTest);
  });
});

最初我只是尝试这样做：

import React from 'react';
import { mount } from 'enzyme';

import { App } from '../components/App';


describe('App', () => {
  it('should render without crashing', () => {
    mount(<App />);
  });
});

这引发了这个错误

不变违规：在“Connect(Form(SearchForm))”的上下文或道具中找不到“store”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递

App.js 代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { searchPhotos } from '../state/actions/searchPhotos';
import { setMainImageIndex, setFirstPage } from '../state/actions/slider';
import Slider from './Slider';
import SearchForm from './SearchForm';
import Error from './Error';
import '../styles/App.css';

export class App extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(searchPhotos(window.store));
  }

  searchPhotosSubmit = () => {
    const { dispatch } = this.props;
    dispatch(setFirstPage());
    dispatch(setMainImageIndex(0));
    dispatch(searchPhotos(window.store));
  }

  render() {
    const { fetchError } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Flickr Slider in React.js</h1>
          <SearchForm onSubmit={this.searchPhotosSubmit} />
        </header>
        {!fetchError ? <Slider /> : <Error />}
      </div>
    );
  }
}

export default connect(state => ({
  fetchError: state.fetchError,
  form: state.form,
  slider: state.slider,
}))(App);

Answer 1

请不要在App.js 中同时导出展示组件（作为命名导出）和容器组件（作为默认导出）。然后在您的测试中，您使用以下方法导入和使用演示组件：

import { App } from '../components/App';

但您应该使用以下方法导入连接的容器组件：

 import App from '../components/App'; // IMPORTANT! - no braces around `App`

由于您使用的是未连接到 Redux 存储的组件，所以 dispatch 不会作为 prop 注入。只需使用正确的导入，它应该可以工作。
有关导入默认和命名导出的更多详细信息，请查看doc。关于展示和容器组件，您可以阅读here。