React - функциональный компонент, проверьте, вызвана ли функция onChange (с Jest и Enzyme) - PullRequest
Новая
       5

React - функциональный компонент, проверьте, вызвана ли функция onChange (с Jest и Enzyme)

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

У меня есть простой функциональный компонент, который мне нужно проверить. 

const Product = () => {
    const handleOnChange = (value) => {
        console.log(value);
    }

    return (
        <div>
            <input type="text" onChange={(e) => {handleOnChange(e.target.value)}} />
        </div>
    )
}

Я бы хотел проверить, вызывается ли функция handleOnChange, когда вход меняет свое значение. Я попробовал это: 

let wrapper;
beforeEach(() => {
    wrapper = shallow(<Product />);
});
describe('Product interactions', () => {
it('should call handleOnChange function on input change', () => {

  const mockedhandleOnChange = jest.fn(); 
  wrapper.handleOnChange = mockedhandleOnChange;
  wrapper.find('input').simulate('change', {target: {value: 10}});
  expect(mockedhandleOnChange).toHaveBeenCalledTimes(1);    
});

});

Конечно, это не работает, так как я не могу добраться до функции через "wrapper.handleOnChange".

Пожалуйста, помогите !

1 Ответ

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

Вы должны сделать Реакт state единственным источником истины. В настоящее время input в вашей программе поддерживает свое собственное состояние. Лучше было бы использовать его как Контролируемые компоненты . Как только вы используете input в качестве контролируемого компонента, ваша программа будет выглядеть примерно так: 

class Product extends React.Component {
   constructor(props) {
        super(props);
        this.state = {value: ''};
    }
   handleOnChange = (value) => {
        this.setState({ value })
    }

    return (
        <div>
            <input id="input1" type="text" value={this.state.value} onChange={(e) => {handleOnChange(e.target.value)}} />
        </div>
    )
}

Если у вас есть код, приведенный выше, будет гораздо проще выполнить проверку на входе, а также протестировать. Вам нужно позвонить onChange из Input, после чего вы можете проверить состояние. Ваш тест будет выглядеть примерно так: 

let wrapper;
beforeEach(() => {
    wrapper = shallow(<Product />);
});
describe('Product interactions', () => {
it('should call handleOnChange function on input change', () => {
  wrapper.find('#input1').getNode().props.onChange({
   target: { value: '123' }
  });
  expect(wrapper.state().value).toEqual('123');
});
...