Jest/Enzyme单元测试:如何将存储转移到使用redux 4和react-redux 6连接功能的浅组件

Question

我正常做一些用jest和酶进行单项测试的新项目.我以这种方式测试连接到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"
  }

过去常常工作,但是在测试执行报告上运行测试时我收到了这条消息:

不变违规:在道具中传递redux存储已被删除,并且不执行任何操作.要为特定组件使用自定义Redux存储,请使用React.createContext()创建自定义React上下文,并将上下文对象传递给React-Redux的Provider和特定组件,如:.您还可以传递{context:MyContext}选项进行连接

我试图将上下文作为浅层参数传递

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

}

但后来我把它记录到控制台

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

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

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

}

测试套件无法运行

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

现在建议采用哪种方式？我知道消息说的是什么,但之前不需要将元素包装到提供者中进行游戏/酶单元测试.非常感谢你!

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 />

希望这可以帮助！