Question

我有一个简单的反应组件。

import React, { Component } from "react";

class SampleText extends Component {
  handleChange = e => {
    console.log(" perform other task");
    this.otherTask();
  };

  render() {
    return <input type="text" onChange={this.handleChange} id="text1" />;
  }
}

export default SampleText;

我想测试是否在输入字段中进行了更改，调用了 handleChange 方法。

这是我尝试过的：

import React from "react";
import SampleText from "./SampleText";

import Adapter from "enzyme-adapter-react-16";
import { shallow, configure } from "enzyme";

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

test("input change handle function", () => {
  const wrapper = shallow(<SampleText />);
  const instance = wrapper.instance();

  jest.spyOn(instance, "handleChange");

  //simulate instance's onChange event here
  wrapper.find('input[id="text1"]').simulate("change", {
    target: { value: "some random text" }
  });

  expect(instance.handleChange).toHaveBeenCalled();
});

问题是当我模拟更改时，它实际上是在原始handleChange方法中输入的。我得到的错误：

TypeError：this.otherTask不是函数

我怎样才能完成这个简单的测试？也许我必须模拟实例的输入字段而不是包装器的更改，但是不知道如何执行此操作。

Answer 1

在对我的测试代码进行一些小的更改后，我解决了它：）

test("input change handle function", () => {
  const wrapper = shallow(<SampleText />);
  const instance = wrapper.instance();

  //here is the change.
  const spy = jest.spyOn(instance, "handleChange").mockImplementation(() => {});

  wrapper.instance().forceUpdate();

  //simulate instance's onChange event here
  wrapper.find('input[id="text1"]').simulate("change", {
    target: { value: "some random text" }
  });

  expect(spy).toHaveBeenCalled();
});

所以我不得不添加一个空的模仿并使用

wrapper.instance（）。forceUpdate（）;

使其正常工作。

用笑话和酶进行测试。侦查反应组件的方法

1 个答案: