Блог

Я добавил в свой каталог конфигурации веб-пакета gatsby-named-webpack-plugin, который позволяет импортировать файлы, которые имеют то же имя, что и его родительский каталог. Например, я могу использовать путь «компоненты / Ссылка» вместо «компоненты / Ссылка / 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.

Используйте index.js в каждой папке подобное и забудьте DirectoryNamedWebpackPlugin вообще

 import Link from './Link';

export default Link;