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不是函数在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 />);
  });
});

引发了这个错误

不变违规：无法在“连接（表单（SearchForm））”的上下文或道具中找到“存储”。将根组件包装在a中，或者明确地将“store”作为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);

Answer 1

请注意，不要在App.js中导出演示组件（作为命名导出）和容器组件（作为默认导出）。然后在测试中导入并使用表示组件：

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

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

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

由于您未使用未连接到Redux商店dispatch道具的组件，因此不会将其作为道具注入。只需使用正确的导入，它应该工作。
有关导入默认导出和命名导出的更多详细信息，请查看此doc。关于演示文稿和容器组件，您可以阅读here。

TypeError：使用react-create-app jest和酶

1 个答案: