Тестирование компонента React с помощью Jest

Question

Я запустил новый проект «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);
});

Заранее спасибо.

Answer 1

Код:

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.Чтобы ввести входные значения в поле. Сначала найдите поле и смоделируйте замену, как показано ниже.

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)