Question

我想模拟我的TodoForm组件的handleClick事件。

TodoForm.jsx

import React, { Component } from "react";

    export class TodoForm extends Component {

        handleClick = () => {
            console.log("handle click is called");
        }

        render() {
            return (
                <div>
                    <button onClick={this.handleClick}>Clik</button>
                </div>
            )
        }
    }

在TodoForm.test.js中

import React from 'react'
import { mount, shallow } from 'enzyme'
import { TodoForm } from "../TodoForm";


it("must call the mock function when button is clicked", () => {
    const mocked = jest.fn();
    const wrapper = mount(<TodoForm />);

    wrapper.instance().handleClick = mocked;
    wrapper.update();

    wrapper.find("button").simulate("click");
    expect(mocked).toHaveBeenCalled();


})

测试失败，并显示“已调用预期的模拟函数，但未调用。”

不是调用模拟函数，而是调用真正的实现。

我正在使用 create-react-app，

反应：16.6.3，酶：3.8.0，
酶适配器反应16：1.7.1

Answer 1

这是known issue with Enzyme。 update()不会导致重新渲染。这样会触发原始的handleClick，因为在模拟该方法之前调用了render函数。

一种解决方法是使用wrapper.instance().forceUpdate()而不是wrapper.update()。

可测试性是one of several reasons，它比箭头实例方法更喜欢绑定原型方法。

当使用胖箭头功能作为事件处理程序时，如何模拟React组件的事件？

1 个答案: