React：路径别名的 Jest 配置问题

Question

I have set up a React custom boilerplate and it uses Webpack 5, TypeScript and other libs. I am trying to set up Jest but I am getting an error when the test runs that Cannot find module 'utils/constants' from 'src/App.tsx .

It is because of Path Aliases, I guess but I am not sure how to fix this. Can anyone please help me here? Thanks

I am using tsconfig-paths-webpack-plugin for Path Aliases.

webpack.config.js

module.exports = {
  entry: path.resolve(__dirname, '..', './src/index.tsx'),
  resolve: {
    plugins: [new TsconfigPathsPlugin()],
    .......
  }
  .......
}

tsconfig.json

{
  "compilerOptions": {
      .........
      "baseUrl": "./src",
      "paths": {
        "components/*": ["./components/*"],
        "styles/*": ["./styles/*"],
        "utils/*": ["./utils/*"]
      }
   }
   .........
}

jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/identity-obj-proxy'
  }
};

App.tsx

import { APP_NAME } from 'utils/constants';

export const App = () => (
    <h1> {APP_NAME} </h1>
);

App.test.tsx

import { screen, render } from '@testing-library/react';
import { App } from './App';

describe('App Component', () => {
  it('should have React Project text', () => {
    render(<App />);
    expect(screen.getByText('React Project')).toBeTruthy();
  });
});

Error

FAIL  src/App.test.tsx

Test suite failed to run

  Cannot find module 'utils/constants' from 'src/App.tsx'

  Require stack:
    src/App.tsx
    src/App.test.tsx

  However, Jest was able to find: 'utils/constants.ts'

  You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'jsx', 'ts', 'tsx', 'json', 'node'].

Answer 1

I added the following configs in jest.config.js and it worked:

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/identity-obj-proxy',
    '^components(.*)$': '<rootDir>/src/components$1',
    '^styles(.*)$': '<rootDir>/src/styles$1',
    '^utils(.*)$': '<rootDir>/src/utils$1'
  }
};