I’m getting the following error when running yarn test command:

Cannot find module '~/app/ui/DashboardCard' from '__tests__/home.test.tsx'

Here is the test file:

import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import DashboardCard from '~/app/ui/DashboardCard';

describe('Test', () => {
    it('renders a button', () => {
        render(<DashboardCard />);

        const button = screen.getByText('test');
        expect(button).toBeInTheDocument();
    });
});

Tried everything, but don’t see how to fix.

Here is my jest.config.js:

module.exports = {
coverageProvider: 'v8',
collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
],
moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\.module\.(css|sass|scss)$': 'identity-obj-proxy',

    // Handle CSS imports (without CSS modules)
    '^.+\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,

    // Handle module aliases
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^~/components/(.*)$': '<rootDir>/components/$1',
    '^@/(.*)$': '<rootDir>/src/$1',

    // Handle @next/font
    '@next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // Handle next/font
    'next/font/(.*)': `<rootDir>/__mocks__/nextFontMock.js`,
    // Disable server-only
    'server-only': `<rootDir>/__mocks__/empty.js`,
},
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
},
transformIgnorePatterns: ['/node_modules/', '^.+\.module\.(css|sass|scss)$'],

testMatch: ['**/__tests__/**/*.+(ts|tsx|js|jsx)'],

};

And my tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "baseUrl": ".",
        "paths": {
            "~/*": ["./*"],
            "@/components/*": ["components/*"]
        },
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "jsx": "preserve",
        "incremental": true,
        "plugins": [
            {
                "name": "next"
            }
        ]
    },
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "utils/helpers/Mailchimp.helpers.js",
        ".next/types/**/*.ts",
        "jest.config.js"
    ],
    "exclude": ["node_modules"]
}

Any help is very much appreciated!!! How do I make it so that jest understands the paths aliases ? I think I already have that, but still get an error.