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: I dont get "Jest" icon on the bottom bar, which means the ext doesnt work properly. I still don't get the intellisense support for jest's commands My Question: Has anyone had this issue and found a way to configure it properly ?

visual-studio-codejestjs

ueeieiie

Reputation: 1562

vscode jest extension doesn't work properly

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:

I dont get "Jest" icon on the bottom bar, which means the ext doesnt work properly.
I still don't get the intellisense support for jest's commands

My Question:

Has anyone had this issue and found a way to configure it properly ?

Upvotes: 26

Answers (7)

Monarch Wadia

Reputation: 4966

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": "."
}

Upvotes: 1

rupweb

Reputation: 3328

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

Upvotes: 0

KushalSeth

Reputation: 4649

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.

Upvotes: 0

summer404

Reputation: 71

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!

Upvotes: 7

mprivat

Reputation: 21902

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.

Upvotes: 4

Ojasvi Monga

Reputation: 5129

Highly recommend using the jest runner extension instead.

Demo:

Upvotes: 12

ueeieiie

Reputation: 1562

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.

Upvotes: 16

vscode jest extension doesn&#39;t work properly