Brand new VSCode + CRA + JestRunner fails to parse

I’m running a brand new Windows install – no global NPM installs, no dangling configurations – brand new, unadulterated setup. I get an error from Babel when running Jest Runner against an untouched CRA Typescript application.

Steps to reproduce:

• Install VSCode (latest) and the Jest Runner extension
• Install Node/NPM LTS (v15)
• Created an application using npx create-react-app demo --template typescript
• Via CMD or Git Bash, execute npm test and see that the tests pass
• Place a breakpoint in App.test.tsx as shown below and use Jest Runner’s “Debug” option:

Expected Result: Breakpoint is hit, test passes if I continue

Actual Result:

C:\Users\me\Projects\demo> cmd /C "set "NODE_OPTIONS=--require "c:/Users/me/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js" --inspect-publish-uid=http" && set "VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"\\\\.\\pipe\\node-cdp.21704-1.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\\Users\\me\\AppData\\Local\\nvs\\default\\node.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"C:\\Users\\me\\AppData\\Local\\Temp\\node-debug-callback-f8c90c09f6c08014"}" && C:\Users\me\AppData\Local\nvs\default\node.exe .\node_modules\jest\bin\jest.js c:/Users/me/Projects/demo/src/App.test.tsx -t "renders learn react link" --runInBand "
Debugger attached.
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    SyntaxError: C:\Users\me\Projects\demo\src\App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:10):

      4 | 
      5 | test('renders learn react link', () => {
    > 6 |   render(<App />);
        |          ^
      7 |   const linkElement = screen.getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
      at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:157:18)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1153:18)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:565:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:545:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:529:17)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:349:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:314:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:269:21)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.042 s
Ran all test suites matching /c:\\Users\\me\\Projects\\demo\\src\\App.test.tsx/i with tests matching "renders learn react link".
Waiting for the debugger to disconnect...

The above happens with or without adding the following from the Jest Runner extension page to settings.json in VSCode:

    "jestrunner.jestCommand": "npm run test --",
    "jestrunner.debugOptions": {
        "args": ["--no-cache"],
        "sourcemaps": "inline",
        "disableOptimisticBPs": true
    }

(including both, or one or the other – all 3 fail in the same way)

What’s worse is that prior to re-installing Windows, I had this working without any extra VSCode configurations that I’m aware of. Certainly no .vscode/whatever.json files for the project though there may have been something applied globally that I do not recall.

Really what I’m trying to do is just use VSCode Jest Runner on a typescript CRA application. All documentation I’ve found has resulted in some form of error like the above. Doing what the error says does not move the ball. The specific error about adding to the babelrc because there is no babelrc in an untouched CRA application.

Though I know the two projects are not related, it’s maybe worth noting that the “Jest” extension runs all tests and they pass within VSCode. I like Jest Runner because of the elegant Debugging though.

[Dot-H]

Hey there 👋

I had the same issue but only when running debug for a React application

My environment

• create-react-app ^4
• typescript 4.1
• yarn2 with pnp

And my vscode config for jest-runner:

  "jestrunner.jestCommand": "yarn run react-scripts test",
  "jestrunner.enableYarnPnpSupport": true,
  "jestrunner.detectYarnPnpJestBin": true`

Investigation

After looking at the command used by the extension, I realized that when clicking run, the command was:

yarn run react-scripts test 'PATH_TO_TEST_FILE' -t 'TEST_FILE'

while the command for the debug was:

cd PROJECT_PATH ; /usr/bin/env 'NODE_OPTIONS=--require /usr/share/code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"/tmp/node-cdp.498108-5.sock","deferredMode":false,"waitForDebugger":"","execPath":"/usr/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/tmp/node-debug-callback-f4c221c143caa000"}' /usr/bin/node --require PROJECT_PATH/.pnp.js "`yarn bin jest`" PATH_TO_TEST_FILE -t "TEST_FILE" --runInBand 

My interpretation of the issue

• when running run, the extension works fine because it used react-scripts test and therefore the create-react-app jest & babel configs
• when running debug, the extension uses `yarn bin jest` and not react-scripts test. Since jest uses babel to transpile the typescript (doc) and the react (doc), it will fail because there is (theoretically) no babel.config.js file in a create-react-app repo.

Temporary solution

I have a temporary fix:

1. I added the babel-preset-react-app to my dev environment (yarn add --dev babel-preset-react-app)
2. I created a babel.config.js:

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "babel-preset-react-app",
  ],
};

1. I ran debug and now its working just fine 👌

[Jack-Barry]

If anybody else comes across this, here’s what works in our project. We have a script to generate the same jest.config.js file that’s used under the covers of CRA:

// tests/debug/setup.js
const { writeFileSync } = require("fs");
const { resolve } = require("path");
const createJestConfig = require("react-scripts/scripts/utils/createJestConfig");

// Add jest.config.js file based on CRA scripts
const rootDir = resolve(__dirname, "../..");
const jestConfigFile = resolve(rootDir, "jest.config.js");
const jestConfig = createJestConfig(
  (relPath) => resolve(rootDir, "node_modules/react-scripts", relPath),
  rootDir,
  false
);
writeFileSync(
  jestConfigFile,
  `// autogenerated file for test debugging purposes only\nmodule.exports = ${JSON.stringify(
    jestConfig
  )}`
);

In your VSCode settings.json, all that’s needed is this:

{
  "jestrunner.jestCommand": "npm run test --"
}

Run node tests/debug/setup.js to generate the config file (you may want to put it in .gitignore)

For us, with this setup, both run and debug buttons in VSCode work as expected