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

Posted 2023-02-19

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

【英文标题】：Jest/Enzyme Unit Testing: How to pass store to shallow component that uses redux 4 and react-redux 6 connect function

【发布时间】：2019-06-01 19:53:42

【问题描述】：

我像往常一样为一个新项目使用 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"
  

这曾经可以工作，但是在测试执行报告上运行测试时我收到此消息：

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

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

【问题讨论】：

看起来您正在学习“使用 Jest 和酶进行反应测试”Udemy 课程。将react-redux 降级到 5.1.0 为我做到了。

我们应该降级到 5.1.0 还是应该使用最新版本？我只是想知道是否有某种方法可以使其与最新版本兼容。我喜欢推进版本并尽可能避免降级......

另一种方法，无需降级。 ***.com/questions/59191129/…

【参考方案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 />

希望这会有所帮助！

【讨论】：

好朋友。我降级了，很高兴知道我可以再次升级 xD

@Pranav 你能解释一下如何在使用shallow 时将商店发送到Input 吗？