reactjs - Jest/ enzyme 单元测试 : How to pass store to shallow component that uses redux 4 and react-redux 6 connect function

Question

像往常一样，我正在为一个新项目使用 Jest 和 enzyme 进行一些单元测试。我曾经以这种方式测试连接到 redux 的组件:

a) 商店生成器

import { createStore } from 'redux';

import rootReducer from '../src/reducers';

export const storeFactory = (initialState) => {
   return createStore(rootReducer, initialState);
}

由 Input.test.js 文件使用

import React from 'react';
import { shallow } from 'enzyme';

import { findByTestAttr,storeFactory } from '../../../test/testUtils';
import Input from './Input';



const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input store={store} />
        ).dive();
    console.log(wrapper.debug());

}

作为示例组件Input.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Input extends Component {
    render(){
        return <div />;
    }
}

const mapStateToProps = (state) => {
    return {};
}

export default connect(mapStateToProps)(Input);

我的 npm 包版本是:

 "dependencies": {
    "ajv": "^6.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1"
  }

  "devDependencies": {
    "check-prop-types": "^1.1.2",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "jest": "^23.6.0",
    "jest-enzyme": "^7.0.1",
    "prop-types": "^15.6.2"
  }

这曾经有效，但在测试执行报告上运行测试时我收到此消息:

Invariant Violation: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect

我尝试将上下文作为shallow 的参数传递

const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input  />, { store }
        );
    console.log(wrapper.debug());

}

但是后来我将其记录到控制台

<ContextConsumer>
        [function bound renderWrappedComponent]
      </ContextConsumer>

如果我尝试使用 enzyme 潜水()方法我得到:

const setup = (initialState={}) => {
    const store = storeFactory(initialState);
    const wrapper = shallow(
        <Input  />, { store }
        ).dive();
    console.log(wrapper.debug());

}

Test suite failed to run

TypeError: ShallowWrapper::dive() can only be called on components

现在建议采用哪种方法？我知道该消息的内容，但在此之前不需要将元素包装到 Provider 中以进行 Jest/ enzyme 单元测试。非常感谢!

Answer 1

shallow 和 dive 在 react-redux 6 中无法按预期工作，因此您可能需要将其降级为 react-redux 5.0.7 才能正常工作。

但是如果您更喜欢使用 react-redux 6，那么您可能需要使用 mount 来代替。所以，上面的代码可以改写如下:

Input.test.js

import React from 'react'
import {Provider} from 'react-redux'
import {mount} from 'enzyme'

import {findByAttr, storeFactory} from '../test/testUtils'
import Input from './Input'

const setup = (initialState={}) => {
  const store = storeFactory(initialState)
  const wrapper = mount(<Provider store={store}><Input /></Provider>)
  console.log(wrapper.debug())
}

setup()

控制台

    console.log src/Input.test.js:11
      <Provider store={{...}}>
        <Connect(Input)>
          <Input dispatch={[Function: dispatch]}>
            <div />
          </Input>
        </Connect(Input)>
      </Provider>

如果更喜欢将组件作为未连接的组件进行测试，还有另一种解决方法，您仍然可以使用 react-redux 6 并使用 shallow；代码可以重写如下:

将export关键字添加到Input

Input.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Input extends Component {
    render(){
        return <div />;
    }
}

const mapStateToProps = (state) => {
    return {};
}

export default connect(mapStateToProps)(Input);

Input.test.js

import React from 'react';
import { shallow } from 'enzyme';

import { findByTestAttr } from '../../../test/testUtils';
import { Input } from './Input';



const setup = (props={}) => {
    const wrapper = shallow(<Input {...props} />);
    console.log(wrapper.debug());

}

控制台

<div />

希望这有帮助!