Question

与往常一样，我正在为一个新项目进行一些带有笑话和酶的单元测试。我曾经以这种方式测试连接到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>

并且，如果我尝试使用酶dive（）方法，我将得到：

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

希望这会有所帮助！

开玩笑/酶单元测试：如何将存储传递到使用redux 4和react-redux 6连接功能的浅层组件

1 个答案: