reactjs - 使用 Enzyme 和 Jest 在 React 中测试 handle change 函数

Question

我的 react 组件包含这段代码

 handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
        </button>
      </div>
    );
  }
}

如您所见，handleChange 函数在输入更改时触发，并从那里更新状态。

我如何使用 Enzyme 对此进行测试？我试过了

 it("Updates the state", () => {
     const wrapper = shallow(
       <Provider store={store}>
         <DeleteOne />
       </Provider>
     );
     const input = wrapper.find("input");

     input.simulate("change", { target: { num: 2} });

     expect(wrapper.state().num).toEqual(2);
   });
});

我不得不尝试将它包装在商店中，因为我正在使用 Redux 并导出连接的组件。过去一个小时我一直在谷歌搜索并尝试了各种方法，但未能通过该测试。请发送帮助:)干杯

PS:我已经测试了按钮点击不用担心，因为它只是运行一个函数(没有状态更新)。

Answer 1

我通常会导出连接的组件以供在应用中使用，并导出组件本身以进行测试。

看起来你有一个小错字，传递 { target: { value: 2 } } 作为你的事件。

这是一个基于您提供的代码的工作示例:

import * as React from 'react';
import { shallow } from 'enzyme';

class DeleteOne extends React.Component {

  handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
      </button>
      </div>
    );
  }
}

it("Updates the state", () => {
  const wrapper = shallow(<DeleteOne />);
  const input = wrapper.find("input");
  input.simulate("change", { target: { value: 2 } });  // 'value' instead of 'num'
  expect(wrapper.state().num).toEqual(2);  // SUCCESS
});