[BUG] Jest works but the jest plugin does not

flixman commented 1 week ago

Describe the bug I have a project for react, typescript, in which I have dependencies coming as ecm modules. I am running the tests on the CLI by running npx jest <test file> and this works flawlessly. However, if I attempt to run the test through the jest plugin in vscode, I get the following error:

TestRun "myproject:runTest: orta.vscode-jest:TestProvider:myproject:12 (0)" started

> myproject@0.1.0 test
> react-scripts test --testLocationInResults --json --useStderr --outputFile /var/folders/m0/t7ptrvrn5_n3qv9vhlmdwzk00000gq/T/jest_runner_myproject_503_2.json --no-coverage --reporters default --reporters /Users/user/.vscode/extensions/orta.vscode-jest-6.2.5/out/reporter.js --colors --watchAll=false --testPathPattern /Users/user/repositories/myproject/frontend/src/pages/infrastructure/__tests__/CreateInfrastructure\.test\.tsx

 FAIL  src/pages/infrastructure/__tests__/CreateInfrastructure.test.tsx
  ● Test suite failed to run

    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.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/user/repositories/myproject/frontend/node_modules/@myorg/myorg-framework/build/esm/index.js:2
    export * from '@myorg/myorg-base';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import React, { ReactElement, useEffect, useState } from "react";
    > 2 | import { Button, FormField, Grid, Heading, Loading, Select, Option, TextInput } from "@myorg/myorg-framework";
        | ^
      3 | import { toast } from "react-toastify";
      4 | import { useNavigate } from "react-router-dom";
      5 | import { useFormik } from "formik";

      at Runtime.createScriptFromCode (node_modules/react-scripts/node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/pages/infrastructure/CreateInfrastructure.tsx:2:1)
      at Object.<anonymous> (src/pages/infrastructure/__tests__/CreateInfrastructure.test.tsx:3:1)
      at TestScheduler.scheduleTests (node_modules/react-scripts/node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/react-scripts/node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/react-scripts/node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/react-scripts/node_modules/@jest/core/build/cli/index.js:173:3)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.315 s
Ran all test suites matching /\/Users\/user\/repositories\/myproject\/frontend\/src\/pages\/infrastructure\/__tests__\/CreateInfrastructure\.test\.tsx/i.

Expected behavior Test run on the plugin as successfully as is doing on CLI

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

vscode-jest version: 6.2.5
node -v: 20.16.0
npm -v or yarn --version: npm 10.8.1
jest or react-scripts (if you haven’t ejected) version: jest 29.7.0
your vscode-jest settings: all in default value
Operating system: MacOS 14.6.1

Prerequisite

are you able to run jest from the command line? yes
where do you run jest CLI from? root directory of the project
how do you run your tests from the command line? npx jest

Additional context Add any other context about the problem here.

connectdotz commented 6 days ago

Looks like the extension is running the default react-native test script. But if your project works with npx jest, you can try to set "jest.jestCommandLine": "npx jest" in your settings, instructing the extension to use the exact same command to run your tests.

flixman commented 6 days ago

@connectdotz Thank you for the hint! I have added that, and added "frontend" to jest.rootPath (otherwise the tests were not found). Now they are found, but if I try do start them in debug mode I am getting the following error:

/usr/bin/env 'NODE_OPTIONS= --require "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.js-debug/src/bootloader.js"  --inspect-publis
h-uid=http' 'VSCODE_INSPECTOR_OPTIONS=:::{"inspectorIpc":"/var/folders/m0/t7ptrvrn5_n3qv9vhlmdwzk00000gq/T/node-cdp.20172-f7e2f3e9-1.sock","deferredMode":false,"waitForDebugger":"","execPath":"/Users/user/
.nvm/versions/node/v20.16.0/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/var/folders/m0/t7ptrvrn5_n3qv9vhlmdwzk00000gq/T/node-debug-callback-bcab349f7d01314d"}' /Users/user/.
nvm/versions/node/v20.16.0/bin/node ./npx jest --runInBand --watchAll=false --testNamePattern CreateInfrastructure\ Submit\ Dev\ VM\$ --runTestsByPath /Users/user/repositories/myproject/frontend/s
rc/pages/infrastructure/__tests__/CreateInfrastructure.test.tsx 
Debugger attached.
Waiting for the debugger to disconnect...
node:internal/modules/cjs/loader:1148
  throw err;
  ^

Error: Cannot find module '/Users/user/repositories/myproject/frontend/npx'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
    at node:internal/main/run_main_module:28:49 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v20.16.0

Any idea on what might be wrong, here?

UPDATE: Do not bother: If instead of pointing to npx jest I set the parameter to node_modules/.bin/jest, both the runs and the debug mode works. Why?

connectdotz commented 5 days ago

This looks like the vscode debugger is not able to find npx via the default debug config the extension generated. This is not unusual since vscode provids different mechanisms for debugging vs. running tests. The way to customize the debugger behavior is to customize vscode debug config, see instruction.

A good baseline is to use the extension generated debug config (can be seen in jest terminal when you debug). Chances are you will need to use a separate "runtimeExecutable": "full-path-npx" in your customized debug config.

If you have any issues setting it up, feel free to copy/paste your debug config, and we can help you further.

flixman commented 5 days ago

thank you! All seems to work now. Regards!

jest-community / vscode-jest

[BUG] Jest works but the jest plugin does not #1180