CODEWITHSUNDEEP
reactjstypescriptjestjs
Zus C
Zus C

Reputation: 115

trying to run typescript with jest with create-react-app

I am tying to setup jest with react having typescript .
Whenever I run npm test it gives errors.

npm test gives me the error below:

Out of the box, Create React App only supports overriding these Jest options:

• collectCoverageFrom • coverageReporters • coverageThreshold
• snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

• transform • testRegex • moduleFileExtensions

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

I don’t want to eject, and I also want below options to work
• transform
• testRegex
• moduleFileExtensions

What should I do??

my package.json file is as below

 {
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jest-cli": "^22.3.0",
    "jest-enzyme": "^4.2.0",
    "react": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.13",
    "@storybook/addon-links": "^3.3.13",
    "@storybook/addon-storyshots": "^3.3.13",
    "@storybook/addons": "^3.3.13",
    "@storybook/react": "^3.3.13",
    "@types/enzyme": "^3.1.9",
    "@types/jest": "^22.1.2",
    "@types/react-dom": "^16.0.4",
    "@types/storybook__react": "^3.0.7",
    "awesome-typescript-loader": "^3.4.1",
    "babel-core": "^6.26.0",
    "enzyme": "^3.3.0",
    "jest": "^22.3.0",
    "prettier-eslint": "^8.8.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.2.0",
    "redux": "^3.7.2",
    "ts-jest": "^22.0.4",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.2",
    "typescript-eslint-parser": "^13.0.0"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}
`

Upvotes: 8

Views: 4443

Answers (1)

Justin Grant
Justin Grant

Reputation: 46683

In CRA 2.1 and later versions, you should be able to use TypeScript for your test files without any special jest config at all. Just be sure that your __tests__ folder is nested underneath your src folder, or that your test files are inside your src folder and have any of the following extensions:

  • .test.js
  • .test.ts
  • .test.jsx
  • .test.tsx
  • .spec.js
  • .spec.ts
  • .spec.jsx
  • .spec.tsx

Upvotes: 1

Related Questions