web-dev-qa-db-ja.com

JEST.CONFIG.JSの `modulenameMapper`設定はCircleciでは機能しません

私はTS-JESTを以下のように使用して、TypeScriptで私の反応アプリでテストしました。

_import * as React from "react";
import * as renderer from "react-test-renderer";

import { ChartTitle } from "Components/chart_title";

describe("Component: ChartTitle", () => {
  it("will be rendered with no error", () => {
    const chartTitle = "My Chart 1";
    renderer.create(<ChartTitle title={chartTitle} />);
  });
});
_

そしてそれは私の地元の環境を渡しましたが、Circleciで失敗しました。

_ FAIL  __tests__/components/chart_title.tsx
  ● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    __tests__/components/chart_title.tsx:4:28 - error TS2307: Cannot find module 'Components/chart_title'.

    4 import { ChartTitle } from "Components/chart_title";                              
                                 ~~~~~~~~~~~~~~~~~~~~~~~~
_

この_Components/_はmoduleNameMapperによるエイリアス式であり、Circleciのみで動作しないと思います。

_jest --showConfig_オプションは、ローカル環境とCI環境の間に違いがないと伝えます。

私の設定に欠点はありますか？

アプリ/フロントエンド/ jest.config.js.

_module.exports = {
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
      diagnostics: true
    },
    NODE_ENV: "test"
  },
  moduleNameMapper: {
    "^Components/(.+)$": "<rootDir>/src/components/$1"
  },
  moduleDirectories: ["node_modules", 'src'],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  verbose: true
};
_

アプリ/ frontend/tsconfig.json.

_{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "dist",
    "allowJs": true,
    "checkJs": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "jsx": "react",
    "strict": false,
    "removeComments": true,
    "types": ["jest"]
  },
  "typeRoots": ["node_modules/@types"],
  "paths": {
    "Components/*": ["src/components/*"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "__tests__"]
}
_

アプリ/フロントエンド/ package.json.

_{
  "scripts": {
    "build": "webpack --mode development --watch",
    "build-production": "node_modules/.bin/webpack --mode production",
    "test": "jest",
    "lint": "npx eslint src/**/* __tests__/**/* --ext \".ts, .tsx\"",
  },
}
_

アプリ/ .circleci/.config.yml.

_version: 2
jobs:
  build:
    ...
    steps:
      - run:
        name: run tests for frontend
        command: npm test -- -u
        working_directory: frontend
_
javascriptreactjstypescriptjestjscircleci
9
Saiid Al-halawi

私はついにその解決策を見つけました。

によると、 この問題 、tsconfig-pathsとtsconfig-paths-jestを使用します。

だから私の設定ファイルは以下のように変更されました。

tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist/",
    "allowJs": true,
    "checkJs": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es6",
    "module": "commonjs",
    "lib": ["es5", "es6", "dom"],
    "jsx": "react",
    "strict": false,
    "removeComments": true,
    "types": ["node", "jest"],
    "paths": {
      "Components/*": ["src/components/*"]
    }
  },
  "typeRoots": ["node_modules/@types"],
  "include": ["src/**/*"],
  "exclude": ["node_modules", "__tests__"]
}

jest.config.js.

/* eslint-disable import/order */
/* eslint-disable @TypeScript-eslint/no-var-requires */
const tsconfig = require("./tsconfig.json");
const moduleNameMapper = require("tsconfig-paths-jest")(tsconfig);

module.exports = {
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
      diagnostics: true
    },
    NODE_ENV: "test"
  },
  setupFilesAfterEnv: [`${__dirname}/src/setupTests.ts`],
  moduleDirectories: ["node_modules", 'src'],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  verbose: true,
  moduleNameMapper
};

そして私のテストはCircleciでよく働いていましたが、私はまだこれらのテストがこの解決策の前に私の地域で働いていた理由はまだありません。

1
Saiid Al-halawi