Jest/Enzyme TypeError: (0 , _store.configureStore) is not a function

Question

这是我第一次用 redux store 相关的东西测试一个 react 组件，我对几乎所有的东西都很困惑。尝试了所有 google 研究，但仍然不知道该怎么做。该组件如下所示，在测试控制台中出现两个错误

TypeError: (0 , _store.configureStore) 不是函数
TypeError: 无法读取未定义的属性 'getState'

组件：

import PropTypes from 'prop-types';
import __includes from 'lodash/includes';
import __isEmpty from 'lodash/isEmpty';
import __lowerCase from 'lodash/lowerCase';
import __toLower from 'lodash/toLower';
import { connect } from 'react-redux';

import { setEmailErrorClass, setPasswordErrorClass, setConfirmPasswordErrorClass } from '../../../redux/actions';
import './TextboxWrapper.scss';

const { notify } = require('../../../services/functions');

class Textbox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: this.props.defaultValue !== undefined ? this.props.defaultValue : '',
      name: this.props.name,
      errorClass: '',
      errorMessage: ''
    };

    this.checkErrors = this.checkErrors.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isError) {
      this.setState({ errorClass: 'error' });
    }
  }

 // ...some functions...
  

  render() {
    return (
      <div data-type={this.props.type} className={`textbox-wrapper ${this.state.errorClass}`}>
        {
          this.props.type === 'payment' ? (
            <div id={this.props.id} className={this.props.extraClass}></div>
          ) : (
              <input
                type={this.props.type}
                placeholder={this.props.placeholder}
                onChange={e => this.onChange(e)}
                onBlur={this.checkErrors}
                value={this.state.value}
                name={this.props.name}
                min={this.props.min}
                max={this.props.max}
                onFocus={this.props.onFocus}
              />
            )
        }
      </div>
    );
  }
}

const mapDispatchToProps = { setEmailErrorClass, setPasswordErrorClass, setConfirmPasswordErrorClass };

export default connect(null, mapDispatchToProps)(Textbox);

下面是configureStore:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false
  })
});

export default store;

下面是Textbox.test.js:

import React from 'react';
import { Textbox } from './index';
import { Provider } from 'react-redux';
import { mount, shallow } from 'enzyme';
import { configureStore } from '../../../redux/store';
import { browserHistory } from 'react-router';

describe('Textbox', function () {
  const baseProps = {[enter image description here][1]
    errorClass: 'nope',
  };

  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('renders a wrapping div with accurate className received from props', () => {
    const wrapper = mount(
      <Provider store={store}>
        <Textbox {...baseProps} />
      </Provider>
    );

    const selectWrapper = wrapper.find('div');

    expect(
      selectWrapper.hasClass(`textbox-wrapper ${baseProps.errorClass}`)
    ).toEqual(true);
  });

Got two errors in console: 

  [1]: https://i.stack.imgur.com/D0hWk.jpg

Answer 1

'../../../redux/store' 似乎没有导出 configureStore 函数：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false
  })
});

export default store;

它默认导出 store 对象。

我猜你想在测试中导入和使用配置的存储对象：

import store from '../../../redux/store';
import { browserHistory } from 'react-router';

describe('Textbox', function () {
  const baseProps = {
    errorClass: 'nope',
  };

  it('renders a wrapping div with accurate className received from props', () => {
    const wrapper = mount(
      <Provider store={store}>
        <Textbox {...baseProps} />
      </Provider>
    );

    const selectWrapper = wrapper.find('div');

    expect(
      selectWrapper.hasClass(`textbox-wrapper ${baseProps.errorClass}`)
    ).toEqual(true);
  });
  ...
}

或者您想从 '@reduxjs/toolkit' 导入 configureStore 并导入您的减速器并在测试中实例化 store 对象。这实际上与上面相同。

import { configureStore } from '@reduxjs/toolkit';
import { browserHistory } from 'react-router';
import rootReducer from './rootReducer';

describe('Textbox', function () {
  const baseProps = {[enter image description here][1]
    errorClass: 'nope',
  };

  let store;

  beforeAll(() => {
    store = configureStore({
      reducer: rootReducer,
    });
  });

  it('renders a wrapping div with accurate className received from props', () => {
    const wrapper = mount(
      <Provider store={store}>
        <Textbox {...baseProps} />
      </Provider>
    );

    const selectWrapper = wrapper.find('div');

    expect(
      selectWrapper.hasClass(`textbox-wrapper ${baseProps.errorClass}`)
    ).toEqual(true);
  });
  ...
}

Jest/Enzyme TypeError: (0 , _store.configureStore) is not a function

Jest/Enzyme TypeError: (0 , _store.configureStore) is not a function

reactjs

redux

jestjs

enzyme

store