React-测试实用程序文档
我有一个 Login 组件,如果为true ,它将显示一个 Notification 组件this.state.error。
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
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>
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 />);
const login = mount(<Login />);
使用Jest和React Test Utilities遇到任何其他问题吗?
弄清楚了!不需要React测试实用程序
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 组件是否包含 Notification 组件。