javascript - 桶文件、webpack 和 jest

Question

我对桶文件、webpack 和 jest 没有几个问题。我从来没有真正想知道它们是如何工作的，现在我正在努力(开 Jest )在一个还没有测试的更大的应用程序上编写测试。

我在大文件夹中有桶文件(如 components )，它们看起来像这样:

/components/index.js

export { default as ComponentA } from './ComponentA';
export { default as ComponentB } from './ComponentB';
export { default as ComponentC } from './ComponentC';

通过这样的设置，我可以轻松地导入这些组件，如下所示:

import { ComponentA, Component C } from '/components';

而不是写作

import Component A from '/components/ComponentA';
import Component C from '/components/ComponentC';

我的主要问题:在我的 webpack 捆绑文件中，是否会包含 ComponentB 文件，因为我在 components/index.js 中有它(但我并没有真正使用它)？

这是在我开始用 jest 编写测试后想到的，它开始向我抛出关于我尚未编写测试的文件的错误。我试图搜索原因，我能找到的唯一原因是我从桶文件中导入了更大的文件(例如，我在构建页面时从桶文件导入 ComponentA - 我现在正在尝试测试)。

Answer 1

至少如果您使用 ts-jest 转换，应该支持桶导入。
引用:https://github.com/kulshekhar/ts-jest/issues/1149
但我鼓励桶类型定义 src/types/index.d.ts 出现类似问题，通常在代码库中引用为 @/types
我最终配置了额外的 moduleNameMapper 定义

 moduleNameMapper: {
    // FIXES Could not locate module @/types mapped as: .../src/types.
    '^@/types$': '<rootDir>/src/types/index.d',
  },

希望这会对某人有所帮助:)