Jest-тестирование Входной функции onChange - PullRequest
Новая
       5

Jest-тестирование Входной функции onChange

1 голос
/ 18 января 2020

Пытается протестировать onChange функцию, подобную этой, но получает цель как undefined.

Вход. js

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

<Input
   type="email"
   name="email"
   onChange={this.handleInputChange}
   defaultValue={this.state.email}
  />

Вход. * 

      it("test input onChange function", () => {
        const wrapper = shallow(<Login store={store}/>).dive();
        wrapper.find('Input').at(1).simulate('change', { target: { name: 'width', value: 50 } });
        wrapper.update();
        expect(wrapper.find("Input").at(1).props().value).toEqual(50);
      });

1 Ответ

0 голосов
/ 19 января 2020

Вам лучше использовать Контролируемые компоненты , а не Неконтролируемые компоненты .

Для контролируемых компонентов тест:

login.jsx : 

import React, { Component } from 'react';
import { connect } from 'react-redux';

const Input = (props) => <input {...props} />;

class Login extends Component {
  constructor() {
    this.state = {
      email: 0,
      username: 0,
    };
  }
  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <Input type="text" name="username" onChange={this.handleInputChange} value={this.state.username} />;
        <Input type="email" name="email" onChange={this.handleInputChange} value={this.state.email} />;
      </div>
    );
  }
}

export default connect()(Login);

login.test.jsx: 

import Login from './login';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore();

describe('59799196', () => {
  it('test input onChange function', () => {
    const store = mockStore({});
    const wrapper = shallow(<Login store={store} />).dive();
    wrapper
      .find('Input')
      .at(1)
      .simulate('change', { target: { name: 'email', value: 50 } });
    wrapper.update();
    expect(
      wrapper
        .find('Input')
        .at(1)
        .props().value,
    ).toEqual(50);
  });
});

Результаты модульных испытаний со 100% покрытием: 

 PASS  src/stackoverflow/59799196/login.test.jsx
  59799196
    ✓ test input onChange function (19ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |    92.86 |      100 |       80 |      100 |                   |
 login.jsx |    92.86 |      100 |       80 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.857s, estimated 11s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59799196

...