Question

这是我的申请的摘录

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

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

  }

如何测试handleSelectionInput。

Answer 1

您可以使用酶来做到这一点。检查下面的示例，我在其中测试了onchange事件

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');
});

希望这对您有所帮助。

Answer 2

我找到了解决问题的方法，问题不是模拟，而是使用包装实例，如下所示

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

}）;

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

2 个答案: