如何测试一个用玩笑来更新组件状态的函数

Question

Here is a snippet of my application

constructor(props) {
    super(props);
    this.state = {
      searchText:""
    };
  }

  handleSelectionInput = (e) => {
    this.setState({searchText:e.target.value});

  }

How do i test the handleSelectionInput.

Answer 1

You can do that using enzyme. check below example where i did test onchange event

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';
import Input from './Input';

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

test('Date with default date value handle click', () => {
  const component = shallow(
    <Input
      name="input"
      id="input"
      error
      pattern=".*"
      transformValue={value => value}
    />
  );
  expect(component.state().value).toEqual('');
  component.find('#input').simulate('change', { target: { name: 'input', value: '02' } });
  expect(component.state().value).toEqual('02');
  component.find('#input').simulate('blur', { target: { name: 'input', value: '02' } });
  expect(component.state().value).toEqual('02');
});

Hope this helps you.

Answer 2

I found the solution to my problem, the issue was not to simulate but rather work with the instance of the wrapper as seen below

it("Test handleSelectionInput", () => {
expect(wrapper.state('searchText')).toBe("");
instance.handleSelectionInput({ target: { name: 'input', value: '02' } });
expect(wrapper.state('searchText')).toBe("02");

});