React & Jest，如何测试更改状态和检查另一个组件
React & Jest，如何测试更改状态和检查另一个组件
提问于 2017-06-07 04:22:30
我有一个登录组件，它将显示一个通知组件，如果this.state.error为真。
我现在正在编写一个Jest测试来测试这一点。
import React from 'react'
import ReactTestUtils from 'react-dom/test-utils';
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import Login from './Login'
import Notification from '../common/Notification'
describe('<Login /> component', () => {
it('should render', () => {
const loginComponent = shallow(<Login />);
const tree = toJson(loginComponent);
expect(tree).toMatchSnapshot();
});
it('should contains the words "Forgot Password"', () => {
const loginComponent = shallow(<Login />);
expect(loginComponent.contains('Forgot Password')).toBe(true);
});
// This test fails
it('should render the Notification component if state.error is true', () => {
const loginComponent = ReactTestUtils.renderIntoDocument(
<Login />
);
const notificationComponent = ReactTestUtils.renderIntoDocument(
<Notification />
);
loginComponent.setState({
error: true
}, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));
});
});然而，目前测试正在失败，我不确定原因
在我的代码的最后部分，我也尝试了这一点，但都没有用
loginComponent.setState({
error: true
}, expect(ReactTestUtils. isElement(notificationComponent)).toBe(true));https://facebook.github.io/react/docs/test-utils.html
我的Login组件的render()
render() {
const usernameError = this.state.username.error;
const error = this.state.error;
const errorMsg = this.state.errorMsg;
return (
<div className="app-bg">
{ error &&
<Notification message={ errorMsg } closeMsg={ this.closeMessage }/>
}
<section id="auth-section">
<header>
<img src="static/imgs/logo.png"/>
<h1>tagline</h1>
</header>在将state.error设置为true之后，我还尝试了此方法来测试通知组件
it('should render the Notification component if state.error is true', () => {
const loginComponent = ReactTestUtils.renderIntoDocument(
<Login />
);
const notificationComponent = ReactTestUtils.renderIntoDocument(
<Notification />
);
// loginComponent.setState({
// error: true
// }, expect(ReactTestUtils.isDOMComponent(notificationComponent)).toBe(true));
const checkForNotification = () => {
const login = shallow(<Login />);
expect(login.find(Notification).length).toBe(1);
};
loginComponent.setState({
error: true
}, checkForNotification());
});但那次测试也失败了。
我还尝试了const login = mount(<Login />);
还有谁在使用Jest和React Test Utilities时遇到了问题？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-07 05:41:26
想明白了！不需要React Test Utilities
it('should render the Notification component if state.error is true', () => {
const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true });
expect(loginComponent.find(Notification).length).toBe(1);
});这将在Login组件中将错误状态设置为true，然后检查Login组件是否包含通知组件。
Stack Overflow用户
发布于 2018-08-08 04:03:09
这可能应该进行一些重构。Notification组件可能应该始终呈现在更全局的组件(如页面包装器或某种其他容器)中，并且它可能应该呈现null，除非全局缩减程序中有错误。Login组件可能不应该维护与通知相关的职责和业务逻辑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44399181
复制相关文章
相似问题