reactjs - Jest 测试因 gatsby webpack 配置而抛出错误

Question

我在 gatsby 的 webpack 配置目录中添加了名为 webpack-plugin 的插件，这使得导入与其父目录同名的文件成为可能。例如，我可以使用路径“components/Link”而不是“components/Link/Link”:

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      plugins: [new DirectoryNamedWebpackPlugin()],
    },
  });
};

但不幸的是，当我使用 jest 运行我的测试时，我得到了这样的错误(我也使用绝对导入):

FAIL  src/components/atoms/Link/Link.test.js
  ● Test suite failed to run

    Cannot find module 'components/atoms/Icon' from 'src/components/atoms/Link/Link.js'   
    Require stack:
      src/components/atoms/Link/Link.js
      src/components/atoms/Link/Link.test.js

      3 | import { useAnimation } from 'framer-motion';
      4 | import PropTypes from 'prop-types';
    > 5 | import Icon from 'components/atoms/Icon';
        | ^
      6 | import arrow from 'assets/svgs/icon_arrow.svg';
      7 | import S from './Link.styles';
      8 | import animations from './Link.animations';

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:307:11)
      at Object.<anonymous> (src/components/atoms/Link/Link.js:5:1)

这是我的文件夹结构:

有什么解决办法吗？我是开 Jest 配置的新手。

Answer 1

像这样在每个文件夹中使用 index.js 并完全忘记 DirectoryNamedWebpackPlugin

import Link from './Link';

export default Link;