Add custom jest config to react project without ejecting?

Question

So I'm trying to use a custom jest config file with my react project, but jest explodes when I try and use it.

jestrc.json:

{
    "bail": 1,
    "verbose": true,
    "collectCoverage": true,
    "coverageReporters": ["json", "lcov", "text", "clover"],
    "collectCoverageFrom": ["src/**/*.{ts,tsx}"],
    "reporters": [
        "default",
        [
            "jest-junit",
            {
                "outputDirectory": "report",
                "outputName": "junit.xml"
            }
        ]
    ]
}

Command and error:

npm test

> tmr-client@0.1.0 test /home/karl/dev/afry/tmr-client
> npx react-scripts test -- --config jestrc.json

  Invalid testPattern --config|jestrc.json|--watch|--config|{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["/home/karl/dev/afry/tmr-client/node_modules/react-app-polyfill/jsdom.js"],"setupFilesAfterEnv":["<rootDir>/src/setupTests.ts"],"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}","<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jsdom","testRunner":"/home/karl/dev/afry/tmr-client/node_modules/jest-circus/runner.js","transform":{"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/babelTransform.js","^.+\\.css$":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"],"resetMocks":true,"rootDir":"/home/karl/dev/afry/tmr-client"}|--env|/home/karl/dev/afry/tmr-client/node_modules/jest-environment-jsdom/build/index.js supplied. Running all tests instead.
  Invalid testPattern --config|jestrc.json|--watch|--config|{"roots":["<rootDir>/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["/home/karl/dev/afry/tmr-client/node_modules/react-app-polyfill/jsdom.js"],"setupFilesAfterEnv":["<rootDir>/src/setupTests.ts"],"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}","<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jsdom","testRunner":"/home/karl/dev/afry/tmr-client/node_modules/jest-circus/runner.js","transform":{"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/babelTransform.js","^.+\\.css$":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"/home/karl/dev/afry/tmr-client/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"],"resetMocks":true,"rootDir":"/home/karl/dev/afry/tmr-client"}|--env|/home/karl/dev/afry/tmr-client/node_modules/jest-environment-jsdom/build/index.js supplied. Running all tests instead.
 PASS  src/components/Button/Button.spec.tsx
 FAIL  .ignore/admin/App.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/karl/dev/afry/tmr-client/.ignore/admin/App.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { render, screen } from '@testing-library/react';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/karl/dev/afry/tmr-client/src/App.test.tsx:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { render, screen } from '@testing-library/react';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 2 failed, 1 passed, 3 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.995 s, estimated 1 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Is there a more simple way of added my little config into the default react config? I would rather not eject react files, since it makes the project a mess.

Possible duplicate of https://stackoverflow.com/questions/62481958/how-can-i-make-jest-run-with-the-same-config-as-react-script-test-on-a-create-re — Estus Flask, Nov 13 '20 at 20:43

score 0 · Answer 1 · answered Nov 13 '20 at 16:29

From my understanding, you can achieve that by overriding directly via package.json file via jest property as following:

{
  "jest": {
    // you can override here but not all props to be allowed overriding
    "coverageReporters": ["json", "lcov", "text", "clover"],
    "collectCoverageFrom": ["src/**/*.{ts,tsx}"],
  }
}

Add custom jest config to react project without ejecting?

1 Answers1