Jest testing throws error because of gatsby webpack configuration

Viewed 100

I added to my gatsby's webpack config directory-named-webpack-plugin which makes it possible to import files that have the same name as its parent direcory. For example I can use path 'components/Link' instead of 'components/Link/Link':

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

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

But unfortunately when I run my test using jest I get an error like that (I also use absolute imports):

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)

Here is my folder structure:

enter image description here

Is there any solution to this? I'm pretty new in the jest configuration.

0 Answers
Related