TypeError:使用react-create-app玩笑和酶进行测试时，dispatch不是函数 [英] TypeError: dispatch is not a function when testing with react-create-app jest and enzyme

问题描述

我正在尝试对使用react-create-app创建的新项目进行测试.现在似乎正在使用React 16和Jest 3(据说有一些重大更改，或者可能是enzime).我收到类似于此帖子的错误

I'm trying to setup testing on a new project created with react-create-app. Which now seems to be using React 16 and Jest 3 (which supposedly had some breaking changes, or maybe that was enzime). I'm getting an error similar to this post TypeError: dispatch is not a function when I try to test a method using JEST

TypeError:分派不是函数 在App.componentDidMount(src/components/App.js:21:68)

TypeError: dispatch is not a function at 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);
  });
});

最初我只是尝试这样做:

Originally I just tried to do this:

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"作为道具

Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(SearchForm))". Either wrap the root component in a , or explicitly pass "store" as a prop

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

推荐答案

请不要在App.js中同时导出外观组件(作为命名导出)和容器组件(作为默认导出).然后，在测试中，您将导入并使用演示组件:

Please not that you export both presentational component (as named export) and container component (as default export) in App.js. Then in your tests you import and use the presentational component using:

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

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

but you should import connected container component instead using:

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

由于您使用的是未连接到Redux存储的组件，因此不会将propc作为prop注入.只需使用正确的导入，它就可以正常工作.
有关导入默认导出和命名导出的更多详细信息，请检查此 doc .关于外观和容器组件，您可以在此处.

Since you're using component that is not connected to Redux store dispatch prop is not injected as prop. Just use correct import and it should work.
For more details about importing default and named exports please check this doc. About presentational and container components you can read here.

这篇关于TypeError:使用react-create-app玩笑和酶进行测试时，dispatch不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！