Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

`moduleNameMapper` settings in jest.config.js doesn't work on CircleCI

I have tested with my React-app in typescript, using ts-jest like below.

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} />);
  });
});

and it has passed in my local environment but failed in 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";                              
                                 ~~~~~~~~~~~~~~~~~~~~~~~~

This Components/ is an alias expression by moduleNameMapper, and I think it doesn't work in only CircleCI.

jest --showConfig option tells me there is no difference between local and CI environment.

Is there any fault in my settings?

app/frontend/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
};

app/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__"]
}

app/frontend/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\"",
  },
}

app/.circleci/.config.yml

version: 2
jobs:
  build:
    ...
    steps:
      - run:
        name: run tests for frontend
        command: npm test -- -u
        working_directory: frontend
like image 423
Saiid Al-halawi Avatar asked Apr 03 '19 06:04

Saiid Al-halawi


People also ask

What is Jest config JS?

The jest. config. js file is used for configuring Jest, the JavaScript testing library used for writing unit and integration tests in Pup. The modulePaths property tells Jest where it can resolve NPM modules used inside of the code you're testing.

What is transformIgnorePatterns?

json file. transformIgnorePatterns option can be used to specify which files shall be transformed by Babel. Many react-native npm modules unfortunately don't pre-compile their source code before publishing. I have react-navigation package installed in my app so I added this regex value in transformIgnorePatterns.


2 Answers

tsconfig-paths-jest is not usable in Jest >23. For current Jest 26 I got it working via: https://kulshekhar.github.io/ts-jest/user/config/#paths-mapping

jest.config.js

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

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' } )
};

tsconfig.json "compilerOptions"

 "baseUrl": "./src",
 "paths": {            
  "@models/*": [ "./models/*" ],
  "@inputs/*": [ "./inputs/*" ],
  "@tests/*": [ "./__tests__/*" ],
  "@resolvers/*": [ "./resolvers/*" ],
  "@seeds/*": [ "./seeds/*" ],
  "@index": [ "./index.ts" ],
  "@ormconfig":[ "../ormconfig.ts" ]
  },
like image 66
James L. Avatar answered Oct 21 '22 06:10

James L.


I've finally found out its solution.

According to this issue, I use tsconfig-paths and tsconfig-paths-jest.

So my setting-files have changed like below.

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
};

And my tests worked well in CircleCI, but I still have no idea why these tests had worked in my local before this solution.

like image 29
Saiid Al-halawi Avatar answered Oct 21 '22 06:10

Saiid Al-halawi