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

IT技术 javascript reactjs unit-testing jestjs enzyme
2021-05-27 07:00:19

我正在传递一个方法，该方法将父级的状态更改为子级（我知道，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)

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

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

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

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

2个回答

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

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

然后在你的测试中：

expect(removeTaskMock).toHaveBeenCalledTimes(1);

你必须像这样模拟这个函数：

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

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

removeTask={mockCallback}

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

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

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

其它你可能感兴趣的问题
上一篇检测来自 Tampermonkey 的react事件 下一篇从 API 获取数据的最佳方式