NX React 如何为公共库创建可供应用调用的默认手动Mock

前置说明 #

你当前的Monorepo目录结构把__mocks__放在Workspace根目录是没问题的，之所以不生效是Jest默认不会自动读取根目录下的Mock文件，按下面步骤调整即可： #

步骤1：调整业务应用的Jest配置 #

打开apps/my-app/jest.config.js，新增如下配置：

module.exports = {
  // 把Workspace根目录加入模块查找路径，让Jest能定位到根目录的__mocks__文件夹
  moduleDirectories: ['node_modules', '<rootDir>/../..'],
  // TS项目额外需要在apps/my-app/tsconfig.json的include数组加入"../../__mocks__/**/*"
}

步骤2：确保Mock文件导出和原库一致 #

根目录下__mocks__/@my-workspace/my-lib.ts的导出结构必须和libs/my-lib/index.ts完全对齐，比如原库导出了useCommonData、sendRequest两个方法，Mock文件也要导出同名的Mock实现：

export const useCommonData = jest.fn(() => ({ mock: true, data: {} }))
export const sendRequest = jest.fn(() => Promise.resolve({ code: 0 }))

步骤3：测试文件内显式声明Mock #

在业务应用的测试用例文件顶部，提前调用jest.mock声明要Mock的公共库：

// 必须放在文件最顶部，不要写在测试用例内部
jest.mock('@my-workspace/my-lib')

// 导入公共库方法
import { useCommonData } from '@my-workspace/my-lib'

test('验证公共库走Mock逻辑', () => {
  const res = useCommonData()
  expect(res.mock).toBe(true)
  expect(useCommonData).toHaveBeenCalledTimes(1)
})

常见问题排查 #

• 如果你要部分Mock公共库，Mock文件里可以通过jest.requireActual('@my-workspace/my-lib')引入原库逻辑，只覆写需要Mock的方法
• 不要在测试用例的钩子函数（比如beforeEach）或者用例内部调用jest.mock，必须放在文件顶部才会提前劫持模块导入
• 多应用共用的公共库Mock不用重复编写，所有应用都调整Jest的moduleDirectories配置即可复用根目录的Mock文件

内容的提问来源于stack exchange，提问作者Miroslav Zeman