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?
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
};
{
"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__"]
}
{
"scripts": {
"build": "webpack --mode development --watch",
"build-production": "node_modules/.bin/webpack --mode production",
"test": "jest",
"lint": "npx eslint src/**/* __tests__/**/* --ext \".ts, .tsx\"",
},
}
version: 2
jobs:
build:
...
steps:
- run:
name: run tests for frontend
command: npm test -- -u
working_directory: frontend
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.
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.
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" ]
},
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.
{
"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__"]
}
/* 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With