代码之家 › 专栏 › 技术社区 › Juan

Jest/酶单元测试:如何将存储传递给使用redux 4和react redux 6连接函数的浅层组件

enzyme jestjs redux unit-testing reactjs

6

Juan · 技术社区 · 7 年前

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

a) 存储生成器

import { createStore } from 'redux';

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

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

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存储组件,使用React.createContext()创建自定义React上下文, 并将上下文对象传递给React Redux的提供程序和特定组件,如:。您还可以传递{上下文: MyContext}选项来连接

我试图将上下文作为参数传递给shallow

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

}

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

如果我尝试使用enzyme 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

现在建议的做法是什么?我知道消息是怎么说的,但之前没有必要将元素包装到jest/Ezyme单元测试的提供者中。非常感谢你!

1 回复 | 直到 7 年前

1

14

Pranav 6 年前

shallow 和 dive react-redux 6 ,因此您可能希望将其降级为 react-redux 5.0.7

但是如果你喜欢使用 反应还原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>

如果您喜欢将组件作为未连接的组件进行测试,那么还有另一种解决方法,您仍然可以使用 反应还原6 浅的 ; 代码可以重写如下:

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

希望这有帮助!