Question

我正在尝试使用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别名@。如果我在import和mock()中都给出了完整路径（包括末尾的.js），则效果很好。所以现在的问题是，为什么别名不起作用。（还请注意，如果有线索，在import中而不是mock()中使用别名会产生相同的结果。）

在webpack配置中，我有这个alias：

'@': resolve('src')

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

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

实际上，如果我更改了moduleNameMapper，它将引发有关找不到文件的错误，因此，我认为，如果它根本不起作用，它将引发类似的错误，而不是不应用{{ 1}}

Answer 1

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

jest.mock（）与webpack别名一起使用的正确配置是什么？

1 个答案: