测试是否在 Click 上调用了作为 props 传递的方法答案

【问题标题】：Testing if a method passed as a props is called on Click测试是否在 Click 上调用了作为 props 传递的方法
【发布时间】：2019-08-05 23:19:20
【问题描述】：

我正在传递一个方法，它将父级的状态更改为子级（我知道，Redux 做得更好，但这只是为了测试）。

这是我的子组件：

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class RemoveTaskBtn extends Component {
    render() {
        const {removeTask, task} = this.props;
        return (
            <button
                onClick={() => removeTask(task)}
            >
                Remove
            </button>
        );
    }
}

RemoveTaskBtn.propTypes = {
    task: PropTypes.object.isRequired,
};

export default RemoveTaskBtn;

这是我的测试：

import React from 'react';
import ReactDOM from 'react-dom';
import Remove_task_btn from './Remove_task_btn';
import {shallow} from 'enzyme';
import {configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

describe('<RemoveTaskBtn/>', function () {
    let wrapper;
    beforeEach(() => {
        wrapper = shallow(
            <Remove_task_btn
                removeTask={() => {
                }}
                task={{text: 'test'}}
            />
        );
    })
    it('should call removeTask onClick',
        function () {
            wrapper
                .find('button')
                .simulate('click');
            console.log(wrapper.props())
            expect(wrapper.props().onClick)
                .toHaveBeenCalledTimes(1)
        });
})

但它现在不起作用。

我收到此错误：

  ● <RemoveTaskBtn/> › should call removeTask onClick

    expect(jest.fn())[.not].toHaveBeenCalledTimes()

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function onClick]

      26 |             console.log(wrapper.props())
      27 |             expect(wrapper.props().onClick)
    > 28 |                 .toHaveBeenCalledTimes(1)
         |                  ^
      29 |         });
      30 | })

      at Object.toHaveBeenCalledTimes (src/components/Remove_task_btn.test.js:28:18)

这是来自console.log(wrapper.props())的回复：

console.log src/components/Remove_task_btn.test.js:26
      { onClick: [Function: onClick], children: 'Remove' }

所以我要问的是我应该如何测试它？如果我要模拟该函数，我将不得不手动调用它，从而使整个测试变得毫无意义。

所以我的问题是：如何检查作为道具传递的方法是否在点击时被调用？

【问题讨论】：

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

您可以模拟该函数并将其传递给 props，然后验证它是否已被调用，如下所示：

const removeTaskMock = jest.fn();
wrapper = shallow(
        <Remove_task_btn
            removeTask={removeTaskMock}
            task={{text: 'test'}}
        />
    );

然后在你的测试中：

expect(removeTaskMock).toHaveBeenCalledTimes(1);

【讨论】：

【解决方案2】：

你必须mock这个函数：

const mockCallback = jest.fn(x => 42 + x);

现在，如果你将这个函数作为 props 传递给你的组件，如下所示：

removeTask={mockCallback}

现在您可以使用以下方法对其进行测试：

expect(mockCallback.mock.calls.length).toBe(2);

显然，您需要更改函数以适应您的用例。希望这可以帮助。编码愉快。

【讨论】：