Javascript 为什么我的React应用程序的Jest/Ezyme setState测试失败？ 预期：

测试运行并在登录组件中更新状态，然后启用通知组件（错误消息）

结果： 测试失败，应为1，收到0

最初，在我添加redux和store之前，需要在测试中使用store和provider逻辑，这个/测试通过了

Login.test（更新的当前版本）

从“React”导入React
从“react redux”导入{Provider}
从“react dom/test utils”导入ReactTestUtils
从“./../store”导入{CreateCommonsStore}”；
从“酶”导入{mount，shallow}
从“酶到json”导入toJson
从“../../consts/errors”导入{missingLogin}
//从“./Login”导入登录名
从“./Login”导入{LoginContainer}；
从“../common/Notification”导入通知
const store=createCommonStore（）；
常量用户={
id:1，
角色：'管理员'，
用户名：“leongaban”
};
常量loginComponent=mount(
);
const fakeEvent={preventDefault:（）=>''}；
描述（‘组件’，（）=>{
它（'应该呈现'，（）=>{
const tree=toJson（loginComponent）；
expect（tree.toMatchSnapshot（）；
});
它（'如果state.error为true，则应呈现通知组件'，（）=>{
loginComponent.setState（{error:true}）；
expect（loginComponent.find（Notification.length）.toBe（1）；
});
});

Login.test（以前通过的版本，但没有Redux存储逻辑）

从“React”导入React
从“react dom/test utils”导入ReactTestUtils
从“酶”导入{mount，shallow}
从“酶到json”导入toJson
从“../../consts/errors”导入{missingLogin}
从“./Login”导入登录名
从“../common/Notification”导入通知
const loginComponent=shallow（）；
const fakeEvent={preventDefault:（）=>''}；
描述（‘组件’，（）=>{
它（'应该呈现'，（）=>{
const tree=toJson（loginComponent）；
expect（tree.toMatchSnapshot（）；
});
它（'如果state.error为true，则应呈现通知组件'，（）=>{
loginComponent.setState（{error:true}）；
expect（loginComponent.find（Notification.length）.toBe（1）；
});
});

您的问题是，通过将redux存储逻辑混合到测试中，

loginComponent

变量不再代表

Login

的实例，而是

Provider

包装的实例和

登录的实例。

所以当你这样做的时候

loginComponent.setState({ error: true })

您实际上是在

提供程序

实例上调用

setState

我建议您测试您用

connect

包装的

LoginComponent

，以分别从存储状态生成

LoginContainer

。Redux GitHub repo已经发布了，它给出了如何实现这一点的概要

总结一下你需要做什么

分别导出

LoginComponent

和

LoginContainer

从容器中单独测试

LoginComponent

，基本上执行在redux存储状态下混合之前的工作测试

为

LoginContainer

编写单独的测试，测试

MapStateTrops

、

mapDispatchToProps

和

mergeProps

功能

---

希望这有帮助

谢谢！是的，这是有道理的，我会努力让它工作。

import React from 'react'
import ReactTestUtils from 'react-dom/test-utils'
import { mount, shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import { missingLogin } from '../../consts/errors'
import Login from './Login'
import Notification from '../common/Notification'

const loginComponent = shallow(<Login />);
const fakeEvent = { preventDefault: () => '' };

describe('<Login /> component', () => {
    it('should render', () => {
        const tree = toJson(loginComponent);
        expect(tree).toMatchSnapshot();
    });

    it('should render the Notification component if state.error is true', () => {
        loginComponent.setState({ error: true });
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});

loginComponent.setState({ error: true })