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

问题描述

我正在尝试对使用 react-create-app 创建的新项目进行测试.现在似乎正在使用 React 16 和 Jest 3(据说它们有一些重大更改，或者可能是 enzime).我收到类似于这篇文章的错误 TypeError: dispatch is not a function 当我尝试使用 JEST 测试方法时

<块引用>

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

从'react'导入React；从'react-redux'导入{提供者}；从'酶'导入{安装}；从'../components/App'导入{应用}；从 '../state/store/configureStore' 导入 configureStore；window.store = configureStore({滑块:{主图像索引:0，页码:1，每页:4，},});const appTest = (<供应商商店={window.store}><应用程序/></提供者>);描述('应用程序'，()=> {it('应该在不崩溃的情况下渲染', () => {安装(应用测试)；});});

最初我只是尝试这样做:

从'react'导入React；从'酶'导入{安装}；从'../components/App'导入{应用}；描述('应用程序'，()=> {it('应该在不崩溃的情况下渲染', () => {挂载(<应用程序/>)；});});

哪个抛出了这个错误

<块引用>

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

App.js 代码:

import React, { Component } from 'react';从'react-redux'导入{连接}；从 '../state/actions/searchPhotos' 导入 { searchPhotos };import { setMainImageIndex, setFirstPage } from '../state/actions/slider';从'./Slider'导入滑块；从 './SearchForm' 导入 SearchForm；从'./Error'导入错误；导入'../styles/App.css';导出类 App 扩展组件 {componentDidMount() {const { dispatch } = this.props;调度(搜索照片(window.store))；}searchPhotosSubmit = () =>{const { dispatch } = this.props;调度(设置第一页())；调度(setMainImageIndex(0))；调度(搜索照片(window.store))；}使成为() {const { fetchError } = this.props;返回 (<div className="应用程序"><header className="App-header"><h1 className="App-title">React.js 中的 Flickr 滑块</h1><SearchForm onSubmit={this.searchPhotosSubmit}/></标题>{!fetchError ?<滑块/>:<错误/>}

);}}导出默认连接(状态 =>({fetchError: state.fetchError,形式:state.form，滑块:state.slider，}))(应用程序);

解决方案

请不要在 App.js 中同时导出表示组件(作为命名导出)和容器组件(作为默认导出).然后在您的测试中，您使用以下命令导入和使用展示组件:

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

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

 import App from '../components/App';//重要的！- `App` 周围没有大括号

由于您使用的组件未连接到 Redux store dispatch prop 不会作为 prop 注入.只需使用正确的导入，它应该可以工作.
有关导入默认和命名导出的更多详细信息，请查看此 文档.关于展示和容器组件，您可以在这里阅读.

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: 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 />);
  });
});

Which threw this error

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

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

解决方案

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`

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.

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