2

jestRazzle & React & TypeScript プロジェクトをTypeScript 単体テスト用に構成しようとしてts-jestいますが、パス マッピングは良好ですが、以下のスクリーンショットでエラーが発生します。公式ドキュメントに従っていますが、エラーが発生する理由がわかりません。

ディレクトリは、ファイルと他のファイルも含む既存のディレクトリにマップ@/server/helpersされます。./src/server/helpersindex.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