在 JEST 中模拟模块时如何解决模块依赖关系答案

【问题标题】：How to resolve module dependancies when mocking modules in JEST在 JEST 中模拟模块时如何解决模块依赖关系
【发布时间】：2020-01-11 06:07:48
【问题描述】：

我有一个node 模块分辨率。并有下一个模块：

A/
  A.tsx
  index.ts
B/
  B.tsx
  index.ts
  text.tsx

// A/A.tsx

export const A = '1'

// A/index.tsx

export {A} from 'A'

所以，B.tsx 包括 A.tsx：

// B.tsx


include {A} from '../A'

// ...usage

现在，我想通过 UT 报道 B。我开玩笑的。

所以，在整个测试过程中，我想模拟 A 模块。我可以通过以下几种方式做到这一点：

//test.tsx


jest.mock('../A', () => ({
  A: () => <div id='A' />
}))

这行得通！

所以，我必须在A 文件夹的同一级别创建一个__mocks__ 文件夹，并在其中创建A.tsx 文件。

__mocks__/
A/
B/

并将该模拟包含在测试中：

// test.tsx


jest.mock('../A')

所以，这种方法行不通。而且，由于模块解析，它似乎不起作用，因为如果我直接包含 A 模块，例如：

// B.tsx

import {A} from '../A/A'

并将模拟文件 A.tsx 移动到 A/__mocks__/A.tsx

并改变嘲笑：

// test.tsx


jest.mock('../A/A')

然后，一切正常。

因此，任务是以某种方式修复模块分辨率。

【问题讨论】：

【解决方案1】：

节点尝试解析此模块：

../A

这意味着这一行：

../A

...也可以这样写：

../A/index

所以要创建一个Manual Mock，你应该在这里创建你的模拟：

../A/__mocks__/index.ts

...当您在测试中调用它时将使用该模拟：

jest.mock('../A');  // <= uses the mock at ../A/__mocks__/index.ts

【讨论】：