用 Jest 测试 React 组件 [英] Testing a React Component with Jest

问题描述

我在 React 上启动了一个新的Hello World"项目，如下所示:

import React, { Component } from 'react';导出类 Home 扩展组件 {显示名称 = 主页.name状态 = {结果:0，价值1:0，值2:0，}handleChangeOne = (事件) =>{this.setState({ val1: event.target.value });}handleChangeTwo = (事件) =>{this.setState({ val2: event.target.value });}添加 = () =>{this.setState({结果: parseInt(this.state.val1) + parseInt(this.state.val2)});}使成为() {返回 (<div><h1>世界，您好！结果是:{this.state.result}</h1><input type="text" onChange={this.handleChangeOne}/>+<input type="text" onChange={this.handleChangeTwo}/>= <br/><button onClick={this.add}>添加</button>

);}}

基本上，用户插入两个数字，当他点击添加"按钮时，结果就会出现在屏幕上.

当我运行该组件时，它似乎可以工作，但我想用 Jest 对其进行测试(也是为了熟悉 Jest).

我已经安装了 Jest 并查看了他们网站上的所有步骤，但我仍然不确定应该如何编写测试.

在测试中，我想插入两个数字(与用户相同)并检查它是否返回它们的总和.

到目前为止，我创建了一个新文件Home.test.js"，它是我想要执行的测试的伪代码.

当然它现在不起作用，但我很想让它起作用.

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App'导入应用程序；从'./Home.js'导入{家}；it('返回一个总和', () => {const home = 浅();var first_val = Home.state.val1;var second_val = Home.state.val2;var 结果 = first_val + second_val;期望(结果).toEqual(Home.state.result);});

提前致谢.

解决方案

代码:

it('返回一个总和',()=>{const home = 浅();var first_val = home.state().val1;var second_val = home.state().val2;var 结果 = first_val + second_val;期望(结果).toBe(0);const 输入=home.find('输入')input.at(0).simulate('change',{target: {value: 5 } } )input.at(1).simulate('change', { target: { value: 8 } })home.find('button').simulate('click')主页.更新()期望(home.state().结果).toBe(13)})

您可能会发现它很有用.

1.记住访问状态你必须像这样调用 state().

home.state().somevalue例如:- home.state().val1

2.您已经从这里制作了包装纸.

const home =shallow();

现在这样访问状态是错误的.

Home.state.val1;//应该是 home.state().val1;

3.默认状态包含默认值.

var first_val = home.state().val1;var second_val = home.state().val2;var 结果 = first_val + second_val;expect(result).toBe(0);//这里是.

4.给字段输入值.首先找到字段并模拟如下onchange.

const input=home.find('input')input.at(0).simulate('change',{target: {value: 5 } } )//观察对象input.at(1).simulate('change', { target: { value: 8 } })

5.现在要添加这些值，请调用添加按钮.

home.find('button').simulate('click')

6.你的工作没有完成！不要忘记调用这个.

home.update()

7.现在检查值

expect(home.state().result).toBe(13)

I started a new "Hello World" project on react which looks like that:

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>
        );
      }
    }

Basically, the user insert two numbers and when he clicks the "Add" button, the result will appear on the screen.

When I run the component, it seems to work but I want to test it with Jest (Also to get familiar with Jest).

I have installed Jest and reviewed all the steps on their website but I am still not sure how should I write the test.

Inside the test, I want to insert two numbers (same as the user does) and check that it returns their sum.

So far I created a new file "Home.test.js" which is kind of a pseudo code for the test I want to perform.

Of course it's not working now but I would love to make it work.

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);
});

Thanks in advance.

解决方案

Code:

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)
})

You may find it useful.

1.Remember to access state you have to call state() like this.

home.state().somevalue
Ex:- home.state().val1

2.You have already made a wrapper from here.

const home = shallow(<Home />);

Now accessing state like this is wrong.

Home.state.val1;// it should be home.state().val1;

3.By default the state contains default values.

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.To give the input values to field .First find the field and simulate the onchange as below.

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.Now to add these values call the add button.

home.find('button').simulate('click')

6.Your job is not done !Don't forget to call this.

home.update()

7.Now check the value

expect(home.state().result).toBe(13)

这篇关于用 Jest 测试 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！