vscode jest extension doesn't work properly

Question

I'm working with VSCode and installed the extension: "Jest" for better jest-testing-enviroment.

In the extension's instruction I saw we get a nice intellisense support for Jest's commands.

The Problem:

1. I dont get "Jest" icon on the bottom bar, which means the ext doesnt work properly.

2. I still dont get the intellisense support for jest's commands

My Question:

Did anyone had this issue and find the way to configure it properly ?

Erudite

Did you tried with this? If one of these applies, and you're not seeing the "Jest" in the bottom bar, run the command Open Developer Tools and see if something has crashed, we'd love to know what that is, and ideally a project we can run against. – Cynde

@robi I saw this, but wasnt sure where exactly do I run this command ? Im running it on windows 10, and by just typing it into the terminal it dosnt work. I also tried to run in inside ***vscode command palette and it didnt work – Erudite

If you're still passionate about getting vscode-jest running, let's restart this conversation on the repo. We need a few more contributors to get involved with the project. github.com/jest-community/vscode-jest/issues – Forage

Answer 1

Solution:

Once I understood my folder structure was the reason for the extension not to work properly, I started using VSCode's Workspaces.

Explanation:

When using Workspaces you can have multiple projects in one folder. Each will be count as a root project. The Workspace allows you to have multiple root projects in the same folder (which actually solved my problem).

When working with Jest without setting a jest.config.js file, you get your rootDir to its default (which is the folder where the package.json is in).

P.S.

From what I experienced till now, vscode-jest extension is not so stable and still has some bugs. So in my case, I decided to disable it for the meanwhile.

Erudite

Yes Workspaces work very well, I have my web src in a sub-directory, plugin doesn't recognize my jest files. Either I could add an empty jest.config to the subdir, or add this subdir as a Workspace (File -> Add folder to Workspace) – Salted

Answer 2

Highly recommend using the jest runner extension instead.

Demo:

Fredela

Please don't just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself. – Costanzia

For me, it worked out-of-the-box contrary to jest extension – Alley

Answer 3

On a fresh install of the extension, it didn't work properly for me right out of the box either. Running npm run test on the WSL2 terminal worked, but the extension didn't.

My folder structure was

root
__tests__
         __testThis__
                     featureA.js    <-- jest tests
         __andThis__
                    feature1.js     <--
                    feature2.js     <--
testThis.js
andThis.js
package.json

and my test script was initially "test": "jest --watchAll --maxWorkers=1", on my package.json.

But it finally worked after doing the ff.:

(1) Jest icon not appearing in bottom status bar

• Specify jest.rootPath in .vscode/settings.json . Documentation elaborates more on this here.
• I set mine as "" (empty) since I used testMatch to find my tests.

  "jest.rootPath": "",
  

(2) jest command not found

• make sure jest and jest-cli are installed in the shell used by the jest extension
• I had been running tests using WSL2 with no issues (without the extension), but encountered "jest command not found" with the extension.
• After installing jest and jest-cli on Git Bash, this was no longer a problem.

(3) Extension runs for a split second, then "watch-tests" ended unexpectedly

• Instead of using the Jest extension wizard, I ran jest --init at the root of my project to create a jest.config.js. This updates the test script to "test": "jest" -- I left this as is after.
• enable testMatch in the resulting jest.config.js, so jest knows where to look for tests

  testMatch: [
     "**/__tests__/**/*.[jt]s?(x)",
     "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  

(4) Tests finally run, but they run repeatedly until CPU usage goes --> ~90%

• turn jest autoRun off in .vscode/settings.json

  "jest.autoRun": "off",
  

• click thru the jest extension's side bar icon (the Erlenmeyer flask) to run tests only as needed

Even then, not everything in the extension works perfectly (e.g. the debugger still doesn't work for me), but am able to run single tests (or all tests at once) using the extension.

Hope this helps somehow!

Kutzer

Setting root path worked for me – Jacqualinejacquard

Answer 4

I had the same problem. I just placed a jest.config.js at the root of my monorepo and the extension picks up. The problem, for me at least, was that it was looking for that file starting at the root path, and never finding it.

Hickson

Having a similar setup (monorepo), creating an empty jest.config.js at root level was what finally fixed it for me (Jest 29.0.3) – Splanchnic

Answer 5

After wasting lot of time and installing lots of extensions. I found out that we have to install @types/jest as dev dependency for intellisense to make our intellisense work in VSCode.

npm i -d @types/jest

Note: If installing @type/jest doen't work, try restarting VSCode. I have also attached my package.json fo reference, so that you can match if anything else missing for Jest.

Doralynn

Answer 6

I run Windows 11 and the Jest extension for VS Code started working on installing pre-release version 6.1.0

Then I could see Jest: Run Related Tests in the dropdown

Flashbulb

Answer 7

TL;DR inside the root of your workspace, add a .vscode/settings.json with "jest.rootPath" set to "."

I encountered this issue while using vscode-jest. It started happening because I was using multiple workspaces.

I had the following folders:

-foo
  -index.ts
-bar
  -index.ts
  -index.test.ts

And of course, I was trying to run tests inside /bar

Unfortunately, as others have noted, my tests would misbehave.

My solution was to add a bar/.vscode/settings.json with "jest.rootPath": "." inside it.

Now, my folders look like this:

-foo
  -index.ts
-bar
  -.vscode
    -settings.json
  -index.ts
  -index.test.ts

/bar/.vscode/settings.json contains the following:

{
    "jest.rootPath": "."
}

Bullbat