reactjs - 如何用 Jest 获得模拟效用函数

Question

我有一个从实用程序调用函数的 react 模块。我正在测试组件和模拟实用程序功能，但不知何故我没有获得它的线路覆盖率。我模拟了效用函数来让测试出错，但它仍然通过，这让我怀疑发生了什么可疑的事情。

关于如何模拟效用函数的任何提示或指南？

//Utils.js
export const add = () => {
    return x;
}

add 函数在 App 模块中使用。我想测试应用程序，但模拟没有返回我期望它返回的内容。

//Mocking as below
jest.mock('../utils', () => ({
    ...jest.requireActual('../utils'),
    add:() => 4
}));

Answer 1

您可以使用 jest.spyOn 为 utils.add 方法制作 stub 。

例如

App.js:

import * as utils from './Utils';

export function bootstrap() {
  return utils.add();
}

Utils.js:

export const add = () => {
  const x = 1;
  return x;
};

App.test.js:

import { bootstrap } from './App';
import * as utils from './Utils';

describe('bootstrap', () => {
  it('should mock utils.add method correctly', () => {
    const addStub = jest.spyOn(utils, 'add').mockReturnValueOnce(2);
    const actual = bootstrap();
    expect(actual).toBe(2);
    expect(addStub).toBeCalledTimes(1);
    addStub.mockRestore();
  });

  it('should pass', () => {
    expect(utils.add()).toBe(1);
  });
});

100% 覆盖率的单元测试结果:

 PASS  src/stackoverflow/59208419/App.test.js (7.993s)
  bootstrap
    ✓ should mock utils.add method correctly (5ms)
    ✓ should pass (1ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 App.js   |      100 |      100 |      100 |      100 |                   |
 Utils.js |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        9.072s

源代码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59208419