时间戳

首页 > 解决方案 > 不使用酶模拟“变化”

reactjs - 不使用酶模拟“变化”

问题描述

我有一个 Reactjs 组件，它有一个按钮和一个日期范围选择器。我想分别模拟按钮和选择器的 onclick 和 onchange 事件。我能够模拟按钮的点击。但是更改日期选择器不起作用

我试过这个

headerComponent.find(`#prev_button`).at(1).simulate("click");
headerComponent.find(`#dropdown`).at(1).simulate("change", { value: "t" });

请查看此沙箱单击此处获取完整代码和测试文件

标签： reactjsjestjsenzyme

解决方案

用酶进行测试很棘手。你应该尽量不要测试依赖，因为你相信那些已经测试过了。话虽如此，您可以浅渲染而不是安装并RangePicker在浅树中查找组件，获取您在onChange道具中传递的处理程序并手动调用它，然后检查您传递给组件的回调道具是否以预期的方式调用价值。

describe.only("test", () => {
  it("should render", () => {
    const callBackToSetDates = jest.fn();
    const callBackToSetFilter = jest.fn();
    const wrapper = shallow(
      <Header
        {...headerProps1}
        callBackToSetDates={callBackToSetDates}
        callBackToSetFilter={callBackToSetFilter}
      />
    );
    const rangePickerOnChange = wrapper.find("RangePicker").prop("onChange");
    rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("someValue");
  });
});

目的是仅测试您在组件中添加的逻辑，即将您从 RangePicker 获得的值转换为其他值


        <RangePicker
          ...
          onChange={(value) => {
             callBackToSetDates(`I'm transforming ${value}`);
          }}
        />

在你的测试中

    rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("I'm transforming someValue");

你可以在这里看到它工作https://codesandbox.io/s/cool-rosalind-uec6t?file=/src/tests/index.test.js

如果您真的想继续测试实际用户看到的内容，则需要触发用户在使用组件时执行的事件。在这种情况下：您需要单击输入，查找日期，单击它，然后单击另一个日期以完全触发组件的onChange事件RangePicker。你可能会看看antd 如何测试它并复制他们必须模拟一些 DOM API 的必要笑话配置

推荐阅读