如何模拟一个函数并期望它被调用？ [英] How to mock a function and expect it to be called?

问题描述

我是反应测试库的新手，我已经尝试测试一个函数很长时间了。 例如，我想检查当单击一个按钮时，是否调用了给定的函数并抛出了错误。因此，如有任何帮助，我们将不胜感激，如果可能，请与我分享任何有用的资源。

signin.js

export default class SignIn extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    handleClose = (event, reason) => { };
    validate = () => { };
    change = (e) => { };
    onSubmit = (e) => { };

    render() {
        return (<div>...</div>);
    }
}

已满：https://github.com/blaise82/react-testing-library-try/blob/master/src/views/SignIn.js

这是我的测试

it('should submit form', async () => {
    const { getByLabelText, getByText, container, debug } = render(<SignIn />);
    const change = jest.fn();
    const onSubmit = jest.fn();
    const email = getByLabelText('email');
    const password = getByLabelText('password');
    const submit = getByLabelText('submit');

    userEvent.type(email, '[e-mail]');
    expect(email.value).toBe('[e-mail]');
    expect(password.value).toBe('');
    expect(change).toHaveBeenCalled();

    console.log(password)
    await userEvent.click(submit);
    expect(onSubmit).toHaveBeenCalled();

});

已满：https://github.com/blaise82/react-testing-library-try/blob/master/src/test/signin.test.js

结果

>    Expected number of calls: >= 1
>     Received number of calls:    0

请让我知道我做错了什么。

GitHub上的完整代码：https://github.com/blaise82/react-testing-library-try

推荐答案

您可以通过模拟来自组件外部的所有内容(也称为依赖项)来测试函数，如正确的回调、外部库API等。

在开始之前，让我们先了解一下组件中的所有函数。 浏览一下组件，我可以按如下方式列出它们：

1. 事件处理程序组件中的元素[LikehandleClose，onSubmit，change]
2. 组件内部函数，它们不与组件外部的状态/函数交互[validate]
3. 正在调用的属性函数/库API[axios.post]

---

让我们逐一讨论--

• 事件处理程序&；
• 组件内部的函数不与组件外部的状态/函数交互

可以安全地调用附加到元素的事件处理程序。如果它们被调用，您不需要测试它们。相反，您应该测试的是它们被调用的后遗症。还有像validate

这样的函数

让我们以您试图测试的change函数为例。此函数在被调用后设置状态，状态将反映到表单元素中。我们可以像这样assert values of the form elements with a helper。

• 正在调用的属性函数/库API[axios.post]

==>；可以模拟和测试调用这些函数时使用的调用/参数的数量。 https://jestjs.io/docs/en/mock-functions.html#mocking-modules

除了上面链接中给出的嘲弄笑话片段之外，在您的案例中-

axios.post.toHaveBeenCalledWith(expectedParms);

您还可以使其返回所需的结果/错误，并测试各个组件的行为。

希望这对您有帮助。干杯！

这篇关于如何模拟一个函数并期望它被调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！