setting up ts-jest for react typescript project

Looking through this, there isnt much that is different from my setup here:

https://github.com/jasonraimondi/typescript-react-starter

There is minor differences in your jest config. Below is the contents of my jest.config.js file.

module.exports = {
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "setupFiles": [
    "<rootDir>/test/setupTests.ts"
  ]
};

I have a post about testing a Typescript React App using ts-jest without "create-react-app" that hopefully may be of some help to.

Here is an example setup for using Jest in a TypeScript React project. I created it myself and I hope it helps you:

jest.config.js

const {defaults} = require('jest-config');

module.exports = {
  bail: true,
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
  roots: ['src'],
  testMatch: ['<rootDir>/src/**/?(*.)test.{ts,tsx}'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  verbose: true,
};

package.json

{
  "dependencies": {
    "@types/react": "16.7.18",
    "@types/react-dom": "16.0.11",
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "devDependencies": {
    "jest": "23.6.0",
    "ts-jest": "23.10.5"
  },
  "scripts": {
    "test": "jest"
  },
  "version": "0.0.0"
}

src/Welcome.tsx

import * as React from 'react';

interface WelcomeProps {
  name: string,
}

const Welcome: React.FunctionComponent<WelcomeProps> = (props: WelcomeProps) => {
  return <h1>Hello, {props.name}</h1>;
};

export default Welcome;

src/Welcome.test.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import Welcome from './Welcome';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Welcome name="John Doe"/>, div);
  ReactDOM.unmountComponentAtNode(div);
});

I had same error and got it fixed by running following commands in terminal: Via npm: 1. "npm i -D jest typescript" 2. "npm i -D ts-jest @types/jest " 3. "npx ts-jest config:init" 4. "npm t or npx jest"

Via yarn: 1. "yarn add --dev jest typescript" 2. "yarn add --dev ts-jest @types/jest" 3. "yarn ts-jest config:init" 4. "yarn test or yarn jest"

I am using ubuntu 18.04.3 LTS.

According to docs of ts-jest you should set globals.tsConfig, but it must be globals.tsconfig. For example:

globals: {
    'ts-jest': {
      // ts-jest configuration goes here
      // https://huafu.github.io/ts-jest/user/config/#ts-jest-options
      // specify tsconfig.json to be used by ts-jest
      tsconfig: '<rootDir>/test/tsconfig.test.json',
    },
  },

With tsconfig in works for me, with tsConfig no.

Source: https://dev.to/ushakovmaksim/comment/1bc8j