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

提前致谢。