typescript Uncategorized

vscode-jest doesn’t work for a react app in a yarn workspace/monorepo

I have created a simple yarn workspace with a single package. This package is the default CRA Typescript app. Repository code is on Github.

In this repo:

  • Jest works in command line (yarn workspace frontend test)
  • Jest doesn’t work when clicking the button in vscode or on startup.

Tests fail with:

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

I can fix the startup test failing by setting the vscode setting:

  • "jest.jestCommandLine": "yarn workspaces run test”

However, this doesn’t fix the tests when clicking the debug button in vscode.

Tests fail with

SyntaxError: packages/frontend/src/App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled

Some solutions

Change "jest.rootPath"to "packages/frontend". This fixes the problem when clicking the green button, but not the debug button.

The debug button still returns error.

Jest encountered an unexpected token

Final solution

As described here, you need to use vscode multiroom workspaces for monorepos.

For this reason I converted the yarn workspace project to vscode workspace. After that I added jest as a dependency to the root package.json. Finally, the tests were working on project open, green button and debug button clicks.

Here is the final working solution.