测试在点击时是否调用作为道具传递的方法 [英] Testing if a method passed as a props is called on Click

问题描述

我正在传递一个方法，该方法将父母的状态更改为孩子(我知道，Redux可以做得更好，但这仅用于测试).

I am passing a method, which changes the parent's state to a child (I know, Redux does this better, but that's just for testing).

这是我的孩子部分:

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' }

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

So what I'm asking is how should I even test it? If I was to mock the function, I'd have to call it manually, rendering the whole test pointless.

所以我的问题是:如何检查点击时是否调用了作为道具传递的方法?

So my question is: How can I check if a method passed as a prop was called on click?

推荐答案

您可以模拟该函数并将其传递给props，然后验证它是否被调用为:

You can mock the function and pass it in props, then verify it has been called like :

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

然后在您的测试中:

expect(removeTaskMock).toHaveBeenCalledTimes(1);

这篇关于测试在点击时是否调用作为道具传递的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！