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

Posted 2023-02-19

【中文标题】TypeError：使用 react-create-app jest 和酶进行测试时，调度不是函数

【英文标题】：TypeError: dispatch is not a function when testing with react-create-app jest and enzyme

【发布时间】：2018-04-05 23:13:30

【问题描述】：

我正在尝试对使用 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);

【问题讨论】：

能否包含App组件代码？

@BartekFryzowicz 感谢您的关注，上面添加了应用程序代码。其余代码在这里：github.com/pixelwiz/reactjs-flickr-slider-search

【参考方案1】：

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

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

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

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

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

【讨论】：

天啊，这么简单的事情。谢谢！ 15 年前，大家都在寻找 Java 中缺少的分号，我想现在是关于大括号的问题。尽管现在是网络错误，但我仍然遇到错误。我可能需要使用 nock 来模拟 API 调用什么的

实际上，如果我从那时起切换回浅层，测试通过了，耶。

很高兴能帮到你:)

答案对我有帮助，我也面临同样的问题