2

我正在尝试jest为 TypeScript 单元测试配置 Razzle & React & TypeScript 项目，更准确地说，ts-jest但我在下面的屏幕截图中得到了错误，尽管路径映射很好。我遵循了官方文档，但我不明白为什么会出现错误。

该@/server/helpers目录映射到./src/server/helpers一个包含index.tsx文件和其他文件的现有目录。

我尝试手动指定路径映射，您可以在下一节中看到。

我不知道它是否相关，但这实际上是一个具有多个服务器和多个入口点的项目，并且tsconfig.json文件在所有人之间共享。

我已按照此页面上的说明进行操作。

jest.config.js

const { pathsToModuleNameMapper } = require("ts-jest/utils");
const { compilerOptions } = require("./tsconfig.json");

/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  notify: true,
  testEnvironment: 'node',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths)
  // moduleNameMapper: {
  //   "^@/(.*)$": "<rootDir>/src/$1"
  // }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2019"
    ],
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "src"
  ]
}

razzle.config.js

'use strict';

const StartServerPlugin = require("razzle-start-server-webpack-plugin");
const WebpackMessages = require("webpack-messages");

module.exports = {
  plugins: ['scss'/* , 'eslint' */],
  modifyWebpackOptions({ options: { webpackOptions } }) {
    webpackOptions.notNodeExternalResMatch = (request) => new RegExp('react-syntax-highlighter|'
      + 'react-virtualized|'
      + 'react-select-virtualized|'
      + 'tiny-slider').test(request);

    webpackOptions.babelRule.include = webpackOptions.babelRule.include.concat([
      /react-syntax-highlighter/,
      /react-virtualized/,
      /react-select-virtualized/,
      /tiny-slider/,
    ]);
    return webpackOptions;
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    const options = opts.options.webpackOptions;

    if (opts.env.target === 'node') {
      config.entry.wsserver = ['./src/server/ws.tsx'];

      if (opts.env.dev) {
        config.entry.wsserver.unshift(
          `${require.resolve('webpack/hot/poll')}?300`
        );

        // Pretty format server errors
        config.entry.wsserver.unshift(
          require.resolve('razzle-dev-utils/prettyNodeErrors')
        );

        config.plugins.push(
          new StartServerPlugin(
            Object.assign(options.startServerOptions, {
              entryName: 'wsserver',
              verbose: true,
              debug: true,
              nodeArgs: ['--inspect=127.0.0.1:9231'],
              killOnExist: true,
              killOnError: true,
              signal: 'SIGTERM'
            })
          )
        );
      }
    }

    config.plugins.push(new WebpackMessages({
      logger: str => console.log(`>> ${str}`)
    }));

    return config;
  }
};

截屏

截屏

4

0 回答 0