我在react上启动了一个新的“ Hello World”项目,如下所示:
import React, { Component } from 'react'; export class Home extends Component { displayName = Home.name state = { result: 0, val1: 0, val2: 0, } handleChangeOne = (event) => { this.setState({ val1: event.target.value }); } handleChangeTwo = (event) => { this.setState({ val2: event.target.value }); } add = () => { this.setState({ result: parseInt(this.state.val1) + parseInt(this.state.val2) }); } render() { return ( <div> <h1>Hello world! The result is: {this.state.result}</h1> <input type="text" onChange={this.handleChangeOne} /> + <input type="text" onChange={this.handleChangeTwo} /> = <br /> <button onClick={this.add}>Add</button> </div> ); } }
基本上,用户输入两个数字,然后单击“添加”按钮,结果将显示在屏幕上。
当我运行组件时,它似乎可以工作,但是我想用Jest测试它(也要熟悉Jest)。
我已经安装了Jest并查看了他们网站上的所有步骤,但是仍然不确定如何编写测试。
在测试中,我想插入两个数字(与用户相同),并检查它是否返回它们的总和。
到目前为止,我已经创建了一个新文件“ Home.test.js”,这是我要执行的测试的伪代码。
当然,它现在不起作用,但是我很想使其起作用。
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Home } from './Home.js'; it('Returns a sum', () => { const home = shallow(<Home />); var first_val = Home.state.val1; var second_val = Home.state.val2; var result = first_val + second_val; expect(result).toEqual(Home.state.result); });
提前致谢。
码:
it('returns a sum',()=>{ const home = shallow(<Home />); var first_val = home.state().val1; var second_val = home.state().val2; var result = first_val + second_val; expect(result).toBe(0); const inputs=home.find('input') inputs.at(0).simulate('change',{target: {value: 5 } } ) inputs.at(1).simulate('change', { target: { value: 8 } }) home.find('button').simulate('click') home.update() expect(home.state().result).toBe(13) })
您可能会发现它很有用。
1.记住要访问状态,您必须像这样调用state()。
home.state().somevalue Ex:- home.state().val1
2.您已经从这里制作了包装纸。
const home = shallow(<Home />);
现在访问这种状态是错误的。
Home.state.val1;// it should be home.state().val1;
3.默认情况下,状态包含默认值。
var first_val = home.state().val1; var second_val = home.state().val2; var result = first_val + second_val; expect(result).toBe(0);//here it is.
4.给字段输入值。首先找到字段并模拟onchange,如下所示。
const inputs=home.find('input') inputs.at(0).simulate('change',{target: {value: 5 } } )//observe the object inputs.at(1).simulate('change', { target: { value: 8 } })
5.现在要添加这些值,请调用添加按钮。
home.find('button').simulate('click')
6.您的工作还没有完成!别忘了称呼它。
home.update()
7.现在检查值
expect(home.state().result).toBe(13)