如何用玩笑模拟回调函数 [英] How to mock callback functions with jest

问题描述

我正在尝试用 jest 模拟自定义函数，但我遇到了问题.

I'm trying to mock a custom function with jest but I'm having problems with it.

这是我的功能:

export const resizeImage = (file, fileName, callback) => {
  const MAX_WIDTH = avatarImage.maxWidth;
  const MAX_HEIGHT = avatarImage.maxHeight;
  const img = document.createElement('img');
  img.src = window.URL.createObjectURL(file);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  img.onload = () => {
    const sizes = internalResizeImage(img, MAX_WIDTH, MAX_HEIGHT);

    canvas.width = sizes.width;
    canvas.height = sizes.height;
    ctx.drawImage(img, 0, 0, sizes.width, sizes.height);
    return callback(dataURItoFile(canvas.toDataURL(), fileName));
  };
};

我是这样打电话的:

resizeImage(acceptedFiles[0], this.props.user.id, (res) => {
  //dostuff
});

在我的测试中，我是这样嘲笑的:

In my test I'm mocking it like this:

let mockResizeImage = jest.fn();

jest.mock('../../utilities/imageUtils', () => ({
  resizeImage: () => mockResizeImage
}));

我希望 mockResizeImage 是一个回调，然后在我的测试中更改返回值:

I want mockResizeImage to be a callback and then in my test change the returning values:

it('should call handleDrop and accept files', () => {
    //mockResizeImage.mockReturnValue('something');

    const instance = shallow(mockComponent()).instance();
    const acceptFilesMock = ['test'];

    instance.handleDrop(acceptFilesMock);

    expect(clickSpy).toHaveBeenCalledTimes(1);
  });

如果这是一个承诺，一切都很好，但这是一个回调，我不知道我做错了什么.

If it were a promise, all good, but it's a callback and I don't know what I'm doing wrong.

谢谢.

推荐答案

你可以用一个函数来模拟一个模块，该函数接受与原始模块相同的参数，并立即调用回调:

You can mock a module with a function that accepts the same parameter as your original one, and instantly call the callback:

jest.mock('../../utilities/imageUtils', () => ({
  resizeImage: (file, fileName, callback) => callback('someData')
}));

顺便说一句.由于 jest.mock 的工作方式，您在问题中模拟模块的方式无法正常工作.即使你写在 let 语句之后，在编译测试时也会被提升到文件顶部.因此，使用 spy 模拟该函数的最佳方法如下所示:

Btw. the way you mock the module in your question can't work because of the way jest.mock works. Even if you write it after the let statement, it will be hoisted to the top of the file when the test is been compiled. So the best way to mock the function with a spy would look like this:

import {resizeImage} from '../../utilities/imageUtils'

jest.mock('../../utilities/imageUtils', () => ({
  resizeImage: jest.fn((file, fileName, callback) => callback('someData'))
}));

现在您的行为与上述相同，但您还可以测试是否使用正确的参数调用了 resizeImage.

Now you have the same behaviour as above but you can also test that resizeImage was called with the correct parameters.

由于您的最后一个参数是一个函数，因此您可以使用 mock.calls:

As your last parameter is a function you can either just test for the 2 first params like this using mock.calls:

expect(resizeImage.mock.calls[0][0]).toBe('firstParameter')
expect(resizeImage.mock.calls[0][1]).toBe('secondParameter')

或者在使用 toBeCalledWith 时使用通配符作为最后一个参数，使用 expect.anything():

Or use a wildcard for the last parameter when using toBeCalledWith using expect.anything():

expect(resizeImage).toBeCalledWith('firstParameter', 'secondParameter', expect.anything()); 

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