时间戳

首页 > 解决方案 > jest.mock() 使用 webpack 别名的正确配置是什么？

unit-testing - jest.mock() 使用 webpack 别名的正确配置是什么？

问题描述

我正在尝试使用 jest v23.6.0 和 babel 6.22.1 模拟 ES6 类构造函数。显然，实际代码比下面的代码更复杂，但我已将其简化为仅此，但仍然存在问题。

我有以下课程：

StageComponent.js

export default class StageComponent {
  constructor () {}
}

和以下测试代码：

import StageComponent from './StageComponent';
jest.mock('./StageComponent');

describe('StageComponent', () => {
  it('should track constructor', () => {
    let c = new StageComponent();

    expect(StageComponent).toHaveBeenCalled();
  });
});

当我测试这个时，我得到

 jest.fn() value must be a mock function or spy.
    Received:
      function: [Function StageComponent]

       6 |     let c = new StageComponent();
       7 |
    >  8 |     expect(StageComponent).toHaveBeenCalled();
         |                            ^
       9 |   });
      10 | });
      11 |

无论我尝试什么，这就像 mock() 调用没有做任何事情。否则，Jest 似乎工作正常（例如，我已经成功地用 jest.fn() 替换了单个属性）所以我不认为这是我的安装。有什么我想念的吗？这似乎直接来自文档......

编辑： 测试的实际代码是：

import StageComponent from '@/StageComponent';
jest.mock('@/StageComponent');

...

当我发布此问题时，我为了简单起见对其进行了更改，这掩盖了问题，即@路径中的 webpack 别名。如果我在 .jsimport和mock(). 所以现在的问题是为什么别名不起作用。（另请注意，如果这是一个线索，那么在import而不是在中使用别名会产生相同的结果）。mock()

在 webpack 配置中我有这个alias：

'@': resolve('src')

在开玩笑的配置中，我有这个moduleNameMapper：

'^@/(.*)$': '<rootDir>/src/$1'

事实上，如果我更改moduleNameMapper它会引发关于找不到文件的错误，所以我认为如果它根本不起作用，它会引发类似的错误而不是不应用mock()

标签： unit-testingjestjs

解决方案

在 Windows 上运行时，大写必须在import整个代码（跨所有文件）和mock()语句中的所有语句中匹配。如果不是这种情况，你显然会在其他平台上得到一个错误，但在 Windows 上它会成功加载文件而没有错误，但是importandmock不会对齐，因此不会调用模拟的构造函数。

推荐阅读