reactjs - 在 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 导出为默认值，请执行以下操作:
app-comp1.test.js:

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

如果 common-comp1.js 导出被命名，那么这样做:
app-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;
    }
}