Add support for Jest option "testMatch"

[mljohns89]

Problem

Jest has a configuration option called "testMatch" which CRA doesn't currently allow you to override out of the box.

If I try adding the following to my package.json:

  "jest": {
    "testMatch": [
      "**/*.steps.ts"
    ]
  }

I get the following error when running npm test:

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

  • clearMocks
  • collectCoverageFrom
  • coveragePathIgnorePatterns
  • coverageReporters
  • coverageThreshold
  • displayName
  • extraGlobals
  • globalSetup
  • globalTeardown
  • moduleNameMapper
  • resetMocks
  • resetModules
  • restoreMocks
  • snapshotSerializers
  • transform
  • transformIgnorePatterns
  • watchPathIgnorePatterns.

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

  • testMatch

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.

Proposed Solution

It would be nice if this was supported without having to go through the process of ejecting

Ideally, adding this configuration option would just extend the existing Jest testMatch options:

• Files with .js suffix in __tests__ folders.
• Files with .test.js suffix.
• Files with .spec.js suffix.

And not completely override them.

Additional Info

I am somewhat new to React Development, only been developing with React for about 2 years now; so if there is a decent work-around, I am all ears. I prefer using Typescript, React and CRA added Typescript support and files with the extension test.tsx are supported out of the box. It would just be nice to have support for this Jest option too though as it seems to be a common Jest option that people will change depending on their preferences in test file naming conventions.

[eugene-beliaev]

Any progress on that?

[favna]

Backing this idea as well. Personally I like to have various "utility" files for tests "scoped" in certain directories. For example for something that involves redux-saga I would have "sagautils.ts", while the test would be "saga.test.ts". That is based on that all test files are in src/__tests__ (which admittetly I'd prefer outside src as well, but due to the lack of this option that is also currently not possible).

---

Beside that, I never understood why CRA has to be opinionated on supported keys anyway. Personally I'd say let people configure what the heck they want and if they break running their tests that's on them. That said I can see some use in it such as not allowing users to overwrite keys such as transform and moduleName-Mapper, but then flip the boolean logic to "unsupportedKeys" and filter out just unsupported keys.

---

Edit: A temporary solution is to add the replace-in-file package and add this line to package scripts. Super hacky but it works.

"postinstall": "replace-in-file __tests__/**/*. __tests__/**/*.test. node_modules/react-scripts/scripts/utils/createJestConfig.js"

Similarly you can also append testMatch to the supportedKeys array but this is the solution that works for me.