Реакция - Ферментный тест - Имитация возврата изменений Не определено

Question

Я новичок в тестировании React Enzyme.

Я хочу смоделировать действие ввода / изменения.

Мой второй тест не пройден, хотя вход "# num1" найден:

Expected value to equal: "23"
Received: "undefined"

Я попытался использовать «text ()» вместо «value», а затем вернуть «».

Кроме того, я написал тест, который ищет текст кнопки и передал return «+».

Когда я удаляю один из двух входов и нахожу 'input', он также возвращает 'undefined'.

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component{
        constructor(){
            super();
            this.state = {
                number1: 0,
                number2: 0,
                result: 0
            }
        }

        render(){
            return(
            <div>
                <div>
                    <label>Number 1</label>
                    <input id="num1" onInput={this.rememberNumber1.bind(this)} />
                    <br/><br/>
                    <label>Number 2</label>
                    <input id="num2" onInput={this.rememberNumber2.bind(this)} />
                </div>
                <div>
                    <h1>{this.state.number1}+{this.state.number2}={this.state.result}</h1>
                </div>
                <div>
                    <button id="an" onClick={this.sum.bind(this)}>+</button>
                    <button onClick={this.subtract.bind(this)}>-</button>
                    <button onClick={this.multiply.bind(this)}>*</button>
                    <button onClick={this.divide.bind(this)}>:</button>
                </div>
            </div>
            )
        }

        rememberNumber1(e){
            if (e.target.value==""){
                this.setState({
                    number1: 0
                })
            }
            else {
                this.setState({
                    number1: e.target.value
                })
            }
        }

        rememberNumber2(e){
            if (e.target.value==""){
                this.setState({
                    number2: 0
                })
            }
            else {
                this.setState({
                    number2: e.target.value
                })
            }
        }

        sum(e){
            this.setState({
                result: Number(this.state.number1)+Number(this.state.number2)
            })
        }

        subtract(e){
            this.setState({
                result: Number(this.state.number1)-Number(this.state.number2)
            })
        }

        multiply(e){
            this.setState({
                result: Number(this.state.number1)*Number(this.state.number2)
            })
        }

        divide(e){
            this.setState({
                result: Number(this.state.number1)/Number(this.state.number2)
            })
        }
}
export default App;

setupTests.js:

import React from 'react';
import { shallow, mount } from 'enzyme';
import App from './App';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

it('includes input', () => {
    const app = shallow(<App />);
    expect(app.containsMatchingElement(<input/>)).toEqual(true)
});

it('on input', () => {
    const wrapper = mount(<App />);
    wrapper.find('#num1').simulate('change', {target: {value: 23}})
    expect(wrapper.find('#num1').value).toEqual('23')
});

Answer 1

Вам необходимо изменить две вещи в вашем коде

1.give value prop to the inputs
2.give onChange handler instead of onInput, both work the same way

Далее в вашем тестовом коде вам нужно получить доступ к значению из реквизита следующим образом: wrapper.find("#num1").props().value

Вот testCase:

 it("on input", () => {
  const wrapper = mount(<App />);
  const Num = wrapper.find("#num1");
  Num.simulate("change", { target: { value: 23 } });
  wrapper.update();//update wrapper to reflect the setState as component is updated again after setState
  expect(wrapper.find("#num1").props().value).toEqual(23);
});

Код компонента:

    class App extends React.Component {
  constructor() {
    super();
    this.state = {
      number1: 0,
      number2: 0,
      result: 0
    };
  }

  render() {
    return (
      <div>
        <div>
          <label>Number 1</label>
          <input
            id="num1"
            value={this.state.number1}
            onChange={this.rememberNumber1.bind(this)}
          />
          <br />
          <br />
          <label>Number 2</label>
          <input
            id="num2"
            value={this.state.number2}
            onChange={this.rememberNumber2.bind(this)}
          />
        </div>
        <div>
          <h1>
            {this.state.number1}+{this.state.number2}={this.state.result}
          </h1>
        </div>
        <div>
          <button id="an" onClick={this.sum.bind(this)}>
            +
          </button>
          <button onClick={this.subtract.bind(this)}>-</button>
          <button onClick={this.multiply.bind(this)}>*</button>
          <button onClick={this.divide.bind(this)}>:</button>
        </div>
      </div>
    );
  }

  rememberNumber1(e) {
    if (e.target.value == "") {
      this.setState({
        number1: 0
      });
    } else {
      this.setState({
        number1: e.target.value
      });
    }
  }

  rememberNumber2(e) {
    if (e.target.value == "") {
      this.setState({
        number2: 0
      });
    } else {
      this.setState({
        number2: e.target.value
      });
    }
  }

  sum(e) {
    this.setState({
      result: Number(this.state.number1) + Number(this.state.number2)
    });
  }

  subtract(e) {
    this.setState({
      result: Number(this.state.number1) - Number(this.state.number2)
    });
  }

  multiply(e) {
    this.setState({
      result: Number(this.state.number1) * Number(this.state.number2)
    });
  }

  divide(e) {
    this.setState({
      result: Number(this.state.number1) / Number(this.state.number2)
    });
  }
}
export default App;

Вот рабочая песочница: https://codesandbox.io/s/2pkx1l8mn0

Answer 2

У меня тоже была та же проблема получения ожидаемого значения, что и undefined, которая позже была решена с использованием метода mount вместо shallow.

Answer 3

Входные поля, которые вы принимаете, не имеют значения prop, поэтому они делают их неконтролируемыми компонентами. Этот тип полей не получает значение напрямую, как здесь

<input value={this.state.number} onInput={some function}></input>

Итак, тестируем этиКомпоненты утомительны. Вам нужно создать ссылки.

constructor(){
   this.num1Ref=React.createRef();
}
<input ref={this.num1Ref} onInput={some function}></input>
somefunction(e){
console.log(this.num1Ref.current.value)
<---code for setState--->
}

В тестовом файле вы должны создать экземпляр для оболочки и получить доступ к num1Ref следующим образом.

wrapper.instance().num1Ref.current

Лучше оставить значение проп в поле ввода.Спасибо.