在 Jest 中从桶文件延迟加载导入

Question

我正在使用 React 并有一个像这样的文件树：

src/
  common/
    common-comp1/
      common-comp1.js
      common-comp1.test.js
      index.js
    common-comp2/
      common-comp2.js
      common-comp2.test.js
      index.js
    index.js
  app/
    app-comp1/
      app-comp1.js
      app-comp1.test.js
      index.js
    app-comp2/
      app-comp2.js
      app-comp2.test.js
      index.js
    index.js

所有的index.js 文件都是桶文件export * from '...';。我设置了路径别名，以便我可以import CommonComp1 from 'common';在src/app/app-comp1/app-comp1.js.

不幸的是，这也会加载/转换代码src/common/common-comp2/*，即使app-comp1.js不导入它。当我使用 webpack 构建应用程序时，这很好，因为无论如何我都需要导入和转换所有内容。

然而，对于大约 350 个组件的测试，这使得运行单个测试套件在启动时非常慢。我只想导入/转换运行测试所需的文件。有没有办法延迟加载每个导出/导入？我想也许我可以通过模拟我的桶文件并导出一个Proxy仅在直接导入组件时需要/记忆组件的文件，通过调用jest.requireActual(). 我开始这样做，但后来意识到我必须解析整个文件树以获取导入和导出名称，这听起来很乏味。（至少我认为我必须这样做。）

我想我也可以尝试代理require()本身（我几周前尝试过这个不同的问题），但是iirc，它是一个常量或声明的不可配置/不可写。

想法？

Answer 1

您可以使用模块工厂参数在测试中模拟桶文件，并仅设置您想要的导出。

如果 common-comp1.js 默认导出，请像这样：

应用程序comp1.test.js：

jest.mock('common',()=>{
  const CommonComp1 = jest.requireActual('common/common-comp1').default;
  return {__esModule: true, CommonComp1}
})

如果 common-comp1.js 导出被命名，那么这样做：

应用程序comp1.test.js：

jest.mock('common',()=>{
  const allNamedExports = jest.requireActual('common/common-comp1');
  return {__esModule: true, ...allNamedExports}
})

对于更自动化的版本，您可以使用__mocks__/index.js脚本生成文件。

该脚本将遍历每个 index.js 文件并将其导入，获取导出的名称并将它们放入 module.exports 对象 getter 中。

像这样：

__mocks__/common.js:

module.exports={
    get CommonComp1() { 
        return jest.requireActual('../common/common-comp1').CommonComp1;
    }
    get OtherExportFromCommonComp1() { 
        return jest.requireActual('../common/common-comp1').OtherExportFromCommonComp1;
    }
    get CommonComp2() { 
        return jest.requireActual('../common/common-comp2').CommonComp2;
    }
}