Question

我有foo组件，我想使用模拟功能来模拟按钮点击

 export default class Foo extends Component {
        btnClick() {
            console.log("hello...");
        }
        render() {
            return (
                <div>
                    <h2>Hello</h2>
                    <button onClick={this.btnClick.bind(this)} id="btn">Click</button>
                </div>
            );
        }
    }

我的测试代码如下

 it("must call the mock method with button click", () => {

        const wrapper = mount(<Foo />);
        wrapper.instance().btnClick = jest.fn(() => {
            return 8;
        });

        wrapper.update();

        const btn = wrapper.find("#btn");
        btn.simulate("click");

        expect(wrapper.instance().btnClick).toHaveBeenCalled();
    })

模拟点击事件会调用组件的真实方法，而不是调用模拟方法。

我知道可以通过将模拟功能作为道具传递给<Foo/>组件来完成。

我想知道是否还有其他方法可以通过模拟方法来模拟点击（即组件专有）。

Answer 1

问题是您先渲染组件，然后尝试模拟功能，到那时，您已经创建了有界副本，然后解决方案是直接模拟到原型中。

import Adapter from 'enzyme-adapter-react-16'
import React, {Component} from 'react'
import {configure, mount} from 'enzyme'

configure({adapter: new Adapter()})

export default class Foo extends Component {
  btnClick() {
    console.log("hello...")
  }

  render() {
    return (
      <div>
        <h2>Hello</h2>
        <button
            id="btn"
            onClick={this.btnClick.bind(this)}
        >
          Click
        </button>
      </div>
    )
  }
}

it("must call the mock method with button click", () => {
    let spy =  jest.spyOn(Foo.prototype, 'btnClick')
      .mockImplementation(() => 8)

    const wrapper = mount(<Foo/>)
    const btn = wrapper.find("#btn")
    btn.simulate("click")

    expect(spy).toHaveBeenCalled()
})

Answer 2

import React from "react";
import { shallow } from "enzyme";
import Foo from "path/Foo"

describe("Executes a handler function", () => {
  it("must call the mock method with button click", () => {
    const wrapper = shallow(<Foo />);
    const button = wrapper.find("button");
    const instance = wrapper.instance();

    instance.btnClick = jest.fn(instance.btnClick);

    button.simulate("click");
    expect(instance.btnClick).toHaveBeenCalled();
  });
});

如何在酶和玩笑中使用模拟功能模拟点击事件？

2 个答案: