React Testing library custom setup import test-utils: module not installed. Unable to resolve path

Question

I'm trying to configure jest absolute path for my custom test-utils directory (https://testing-library.com/docs/react-testing-library/setup#configuring-jest-with-test-utils), but I get the error Cannot find module 'test-utils' / unable to resolve path

My folder tree

-src/
--utils/
---test-utils/
----test-utils.js
----custom-queries.js
-jest.config.js
-jsconfig.json

My jest.config.js

module.exports = {
    transform: {
        '^.+\\.jsx?$': 'babel-jest',
    },
    testEnvironment: 'jsdom',
    moduleNameMapper: {
        '\\.(css|less)$': 'identity-obj-proxy',
    },
    moduleDirectories: [
        'node_modules',
        'src',
        'utils',
        'test-utils',
    ],
};

My jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "test-utils": ["./utils/test-utils"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

My component test

import { render } from 'test-utils';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';

import Alert from './alert';

describe('Alert', () => {
    test('Renders Alert component', () => {
        const { getByRole } = render(<Alert message="Success!" />);
        const alert = getByRole(/alert/);
        expect(alert).toHaveTextContent('Success!');
    });
});

Answer 1

The test-utils is your custom module for which you specify path alias and how to resolve it in jsconfig.json as follows:

"compilerOptions":{
  "baseUrl":"src",
  "paths":{
    "test-utils": ["./utils/test-utils"]
  }
}

The same way you need to tell to Jest how to resolve it with moduleNameMapper option in your jest.config.js as follows:

moduleNameMapper: {
    'test-utils/(.*)": "<rootDir>/src/utils/test-utils/$1',
},

For official documentation see: https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

For similar issues see: Jest not finding alias path, React: Jest configuration Issue with Path Aliases and How to use path alias in a react project with Typescript + Jest