Jest 无法在 React 项目中编译绝对导入

Question

我在项目中使用绝对导入，但是当我尝试导入模块时，Jest 无法编译它。我尝试将文件夹路径添加到 moduleNameMapper 对象，但这不起作用。如何让 Jest 编译这些导入而不出错？

笑话配置

module.exports = {
    rootDir: 'src',
    moduleNameMapper: {
        '\\.s?css$': 'identity-obj-proxy',
        '^app/(.*)$': '<rootDir>/$1'
    },
    transform: {
        '\\.(woff2?|ttf|eot|svg|jpg|png)$': '../jest/fileTransformer.js',
        '\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
        '/node_modules/(?!lodash-es).+\\.js$'
    ],
    collectCoverageFrom: [
        '**/*.{js,jsx}'
    ],
    coverageDirectory: '../coverage'
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true,
    "noImplicitThis": false,
    "noImplicitAny": true,
    "downlevelIteration": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    },
    "types": [
      "webpack-env"
    ]
  },
  "typeRoots": [
    "./node_modules/@types",
    "./src/types",
    "./src/global.d.ts"
  ],
  "include": ["./src"]
}

weboack.config.js

resolve: {
            extensions: ['.tsx', '.ts', '.jsx', '.js'],
            alias: {
                '@': path.join(__dirname, 'src')
            }
        },

App.jsx

import { applyDefaultsToOptions } from '@/modules/charts';
import './App.scss';

const App = () => {
    const initOptions = applyDefaultsToOptions();

    return <Chart initOptions ={initOptions }/>;
};

export default App;

App.test.jsx

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

test('renders the landing page', () => {
    render(<App />);
});

Answer 1

更新您的 Jest 配置 (jest.config.js) 以包含 ts 和 tsx 文件扩展名，

module.exports = {
    // other configurations...
    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
    // other configurations...
}

如果您还没有添加 ts-jest 作为开发依赖项，请确保 Jest 设置为正确处理 TypeScript 文件，

npm install --save-dev ts-jest

更新您的 Jest 配置以使用 ts-jest 转换 TypeScript 文件，

module.exports = {
    // other configurations...
    transform: {
        '\\.(woff2?|ttf|eot|svg|jpg|png)$': '../jest/fileTransformer.js',
        '\\.(jsx?|tsx?)$': 'ts-jest',
    },
    // other configurations...
}

确保您的 Jest 配置正确指向 rootDir。在你的情况下，似乎应该是“../src”而不是“src”

module.exports = {
    rootDir: '../src',
    // other configurations...
}

更新 tsconfig.json 以包含绝对导入的 baseUrl 和路径，

{
  "compilerOptions": {
    // other options...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

确保您的 tsconfig.json 文件位于项目的根目录，否则您可能需要相应地调整路径。