Brand new VSCode + CRA + JestRunner fails to parse

[Jonathan Adamski]

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.

[Tristan Teufel]

hey @adamski52
thx for reporting

is this only happening for DEBUG or also for RUN?

[Jonathan Adamski]

@firsttris hello. Also for Run. If there's any more info I can get to help please let me know.

[Jonathan Adamski]

@firsttris I apologize -- I thought I had used this extension prior to reinstalling Windows, but apparently I never did, so my expectation that it work in the way I expected was a bad expectation.

The above conditions are still true, but my expectation that it work without a launch.json is probably wrong since I was using a different extension for which that was true, and I confused the two. The errors are to do with it not transpiling from TypeScript to JavaScript (via Babel, or whatever) so maybe there's an option I could have added to the config to address that.

So, maybe the above is still a defect but more likely is that it's addressed by following the setup steps listed for CRA applications? The confusion/reason for opening this was because I did not have to do that with my application before, because I was using a different extension, I guess.

[Alexandre Bernard]

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",
  ],
};

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

[Tristan Teufel]

thx for the summary @Dot-H i included a link to your findings into the readme.

[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

[Bamboleyla]

@Dot-H
I did as you wrote
#136 (comment)
and Jet Runner started working for me, but only with TS. When I want to test tests with TS extensions, an error appears:

It looks like after adding babel.config.js import settings are broken for other types of file extensions, for example css modules.
To configure the import, I use react-app-env.d.ts

//react-app-env.d.ts
/// <reference types="react-scripts" />

[Philippe Roy]

Hope this helps some, I got debug to work for CRA in vscode by doing the following: #315