8

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"
    ]
  }
}
`
4
  • What is your question? Commented Feb 16, 2018 at 20:06
  • Have a look at wmonk/create-react-app-typescript or the scripts therein. Commented Feb 16, 2018 at 21:15
  • The error message correctly describes the issue you are having. Commented Feb 17, 2018 at 3:43
  • me too. I did eject. but....... Ejecting... config already exists in your app folder. We cannot continue as you would lose all the changes in that file or directory. Please move or delete it (maybe make a copy for backup) and run this command again. Commented Oct 25, 2018 at 9:09

1 Answer 1

1

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
Sign up to request clarification or add additional context in comments.

1 Comment

Do you have to name your test folder __tests__ ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.