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

问题描述

我在react上启动了一个新的Hello World项目，看起来像这样：

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.

当我运行组件时，它似乎工作但我想用Jest测试它（也是熟悉Jest）。

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

我已经安装了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.

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

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

提前致谢。

推荐答案

代码：

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.记住访问您拥有的状态像这样调用state（）。

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

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

2.你已经从这里做了一个包装。

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.默认状态包含默认值。

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.将输入值提供给字段.First查找字段并模拟onchange，如下所示。

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.如果要添加这些值，请调用添加按钮。

5.Now to add these values call the add button.

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

6.你的工作没有完成！别忘了给他打电话。

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

home.update()

7.现在检查价值

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

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