create-react-app: Unexpected token in App.test.js

Environment

1. node -v: v8.11.1

2. npm -v: 5.6.0

3. npm ls react-scripts (if you haven’t ejected): react-scripts@1.1.4

4. Operating system: [MacOS 10.13.5]

Steps to Reproduce

$ create-react-app test

open up workspace with extension installed In the output for the test (next to terminal/debug console/problems) see output:

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

    /path/to/project/App/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 | 


Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.157s
Ran all test suites related to changed files.

Expected Behavior

Jest test passes when run by extension

Actual Behavior

Jest tests fail when run by extension

[Royal-Crown-Cola]

This issue still exists as of 9/21/19

[naholyr]

I think I found a temporary workaround:

• copy relevant configuration from ejected package.json (keys “jest” and “babel”)
• edit paths by replacing “<rootDir>/config” to “<rootDir>/node_modules/react-scripts/config”
• edit “testEnvironment” to “jsdom” to fix undefined documents

Now it’s running properly for me. Here is what I finally added to my package.json:

{
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/node_modules/react-scripts/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

I’m not sure everything is required, but it’s juste copy-pasta from ejected project, I didn’t want to bother fine-tuning.