时间戳

首页 > 解决方案 > Jest/Enzyme 单元测试：如何将存储传递给使用 redux 4 和 react-redux 6 连接功能的浅层组件

reactjs - Jest/Enzyme 单元测试：如何将存储传递给使用 redux 4 和 react-redux 6 连接功能的浅层组件

问题描述

我像往常一样为一个新项目做一些带有笑话和酶的单元测试。我曾经测试过以这种方式连接到 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：在 props 中传递 redux store 已被删除，并且不执行任何操作。要为特定组件使用自定义 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

现在建议的方法是什么？我知道消息说的是什么，但在不需要将元素包装到提供者中进行开​​玩笑/酶单元测试之前。非常感谢你！

标签： reactjsunit-testingreduxjestjsenzyme

解决方案

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

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

输入.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

输入.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);

输入.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 />

希望这可以帮助！

推荐阅读