Monorepo instructions are unclear, samples not working

[hidde-jan]

Describe the bug Currently, there is (some) support for monorepos, but how to actually get extension working for monorepos is unclear.

The monorepo examples in /samples don't work out of the box as well.

To Reproduce Steps to reproduce the behavior on the example project:

1. Clone this repository
2. Open samples/monorepo in vscode
3. Install the extension
4. Run pnpm install
5. Run all tests from the extension

Expected behavior The tests should run successfully.

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

Environment

(Paste info.txt content generated by the example project)

{
  "System": {
    "OS": "macOS 12.3.1"
  },
  "Binaries": {
    "Node": {
      "version": "16.14.0",
      "path": "~/.nodenv/versions/16.14.0/bin/node"
    },
    "Yarn": {
      "version": "1.22.15",
      "path": "~/.nodenv/versions/16.14.0/bin/yarn"
    },
    "npm": {
      "version": "8.3.1",
      "path": "~/.nodenv/versions/16.14.0/bin/npm"
    }
  },
  "IDEs": {
    "VSCode": {
      "version": "1.70.2",
      "path": "/opt/homebrew/bin/code"
    }
  },
  "npmPackages": {
    "vite": {
      "installed": "2.9.15",
      "wanted": "^2.9.9"
    },
    "vitest": {
      "installed": "0.12.10",
      "wanted": "^0.12.6"
    }
  }
}

Additional context Add any other context about the problem here.

[Ragura]

I'm getting the same errors in my own mono repo when using the extension. I can see the tests, but not run them (get the same "Test result not found" message). I'm also on macOS using M1 processor.

Trying to debug with a launch.json file and setting the program folder to the correct node_modules folder with vitest.mjc in it and launching the test file in debug mode also doesn't work and prompts me to install vite because it is not installed. The launch.json file includes the following:

{
      "type": "node",
      "request": "launch",
      "name": "Debug Current Test File",
      "autoAttachChildProcesses": true,
      "skipFiles": [
        "<node_internals>/**",
        "**/node_modules/**"
      ],
      "program": "${workspaceFolder}/apps/my_app/node_modules/vitest/vitest.mjs",
      "args": [
        "run",
        "${relativeFile}"
      ],
      "smartStep": true,
      "console": "integratedTerminal"
    }

I am aware that doesn't directly relate to the extension, but it might be useful info?

[medihack]

Same problem here also with a monorepo setup (using Gitpod, but shouldn't matter). I also get the error message "Test result not found.". Any workarounds yet?

[ghost91-]

Having the same issue :/

[rosskevin]

I have the same issue with the latest release including the fix for #55. I'm not clear what the correct vitest.commandLine is for a monorepo as my top level script is:

"test": "lerna exec --stream --parallel -- yarn test"

and each package is:

"test": "vitest"

This means multiple vitest processes. Is there a different way to setup vitest so it is one process over the entire monorepo that would then work with this vscode plugin?

[rogerleung0411]

Sorry to bother you @zxch3n but, any workaround for this monorepo issue? Or can u provide some information about this, im glad to create a pr if i can :)

[jherdman]

Here's my scenario and workaround.

I have a monorepo that, so far, only uses Vitest in one of the projects. I configured this extension to run the tests as follows:

pnpm --filter MY_PACKAGE_NAME test --

[codethief]

I've also been struggling to run my tests which, together, with vite.config.ts are located in a subfolder of my repo / workspace. The only thing that seems to work (somewhat) is setting the following in the VSCode workspace settings:

    "vitest.commandLine": "npx vitest --run --config mysubfolder/vite.config.ts",
    "vitest.include": [
      "**/mysubfolder/**/*.test.ts"
    ],

or (more or less equivalently)

    "vitest.commandLine": "npm run test",
    "vitest.include": [
      "**/mysubfolder/**/*.test.ts"
    ],

where the test command is defined in the package.json as:

  "test": "cd mysubfolder && vitest --run --config vite.config.ts",

Anyway, in both cases vitest then still reports "Test result not found […]" for every single test, even though the verbose test logs do report the test results, e.g.:

Test result not found. 
Are there tests with the same name?
Can you run vitest successfully on this file? Does it need custom option to run?

Vitest output:

 RUN  v0.25.1 /home/user/myrepo/mysubfolder
      API started at http://localhost:37661

 ❯ src/components/MyComponent/__tests__/MyComponent.test.ts  (11 tests | 1 failed | 10 skipped) 145ms
   ❯ src/components/MyComponent/__tests__/MyComponent.test.ts > MyComponent > shows error page on failed request
     → Unable to find an element by: [data-testid="generic-error-overlay"]

…

(DOM)

…

(stack trace)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 10 skipped (11)
   Start at  16:04:15
   Duration  3.75s (transform 2.25s, setup 122ms, collect 2.18s, tests 145ms)

What gives?

[divmgl]

I'm able to get some integration working with this with a monorepo but not quite. In my root package.json:

"test:app": "pnpm --filter app test --",

And then in my VSCode configuration:

"vitest.commandLine": "pnpm test:app",

But I'm getting that all of the tests are skipped:

[INFO 10:57:58 PM]  ↓ src/pages/CreateEditProjectPage/FirstPage.test.tsx  (1 test | 1 skipped)



 Test Files  1 skipped (1)

      Tests  1 skipped (1)

   Start at  22:57:56

   Duration  2.16s (transform 650ms, setup 153ms, collect 1.31s, tests 0ms)

Here's what Vitest runs according to Visual Studio:

> vitest "/Users/user/dev/monorepo/packages/app/src/pages/CreateEditProjectPage/FirstPage.test.tsx" "-t" "FirstPage.name renders" "--api.port" "62517" "--api.host" "127.0.0.1"

[hidde-jan]

@zxch3n could you or someone else from the team please have a look? Since there are examples for monorepos, and you created those, I think you are probably the most suitable person to answer the questions in this issue.

[dohooo]

Same here.

---

I have debugged it and found some information.

First, I have two test files in the single and multi repo.

single

// samples/basic/test/add.test.ts

import { describe, expect, it } from 'vitest'

describe('single testing', () => {
  it('1', () => {
    expect(1).toBe(1)
  })
  it('2', () => {
    expect(2).toBe(2)
  })
})

multi

// samples/monorepo/packages/react/test/basic.test.tsx

import { describe, expect, it } from 'vitest'

describe('multi testing', () => {
  it('1', () => {
    expect(1).toBe(1)
  })
  it('2', () => {
    expect(2).toBe(2)
  })
})

There was some difference between them when I added the breakpoint in the handler event.

This file is used to receive testing information from the vitest server.

• Running the test of "single repo".

• Running the test of "multi repo".

I don't know why the tasks list is empty when running it in the multi repo and the "Test result not found" error comes from here:

So the finishedTests is empty if tasks are empty, and then we'll get this error message. This problem may come from vitest because it sends events incorrectly.

And I found another problem in the vitest. The testing result fails when I run it via vitest <specific file>, like:

// ✅
npm vitest 

// ✅
npm vitest 

Is that mean I must run this command( vitest ) in the sub-package directory, or have I lost some arguments? This repo's underlying logic is run the command line in the node, so maybe this problem causes this issue. @zxch3n

[sheremet-va]

Would be very nice to have a similar guide on how to use the extension that Jest extension has - with images and examples.

[vikingair]

I finally found a proper workaround for something that should definitely be integrated into the plugin itself.

Create file .vscode/vitest-fix.mjs

import fs from "fs";
import path from "path";
import { execSync } from "child_process";

const [testFile, ...args] = process.argv.slice(2);

const findClosestPackage = (p) => {
    const parent = path.dirname(p);
    if (fs.existsSync(path.join(parent, "package.json"))) return parent;
    return findClosestPackage(parent);
}

const cwd = findClosestPackage(testFile);

const targetPath = path.relative(cwd, testFile);

execSync(`pnpm vitest -w ${targetPath} ${args.map((a) => a.startsWith("-") ? a : `"${a}"`).join(" ")}`, { env: { ...process.env }, cwd, stdio: "inherit" });

And add this to your .vscode/settings.json

"vitest.commandLine": "node .vscode/vitest-fix.mjs",

What it does? It consumes all passed args and then runs vitest in watch mode with the passed args, but

• Using the current package (with closest package.json) as workdir
• Changing the first passed path param

[sheremet-va]

I finally found a proper workaround for something that should definitely be integrated into the plugin itself.

Please, use the latest pre-release version.

And add this to your .vscode/settings.json

The latest version doesn't support vitest.commandLine option.

[vikingair]

@sheremet-va Then lets hope the pre-release also fixes finally that issue with these workspaces, where I have to manually do things that could have been just inferred correctly by searching for the closest vite(st) config :/

[sheremet-va]

@sheremet-va Then lets hope the pre-release also fixes finally that issue with these workspaces, where I have to manually do things that could have been just inferred correctly by searching for the closest vite(st) config :/

There is no need to "hope", you can install it yourself and see if it fixes it for you.

[weyert]

If I understand it correctly the extension has a hard-requirement that you install vitest in the root workspace otherwise it is not working.

I think it would be nice if it would use the vitest from the package with vitest.config.ts-file instead. I haven't figured out how to achieve that.

Also seems to display all workspaces (using pnpm) which don't have a vitest.config.*-file, such as projects that only have a jest.config.*-file instead or no file at all. I think it shows all places where it finds *.test* or *.spec*-files.

[sheremet-va]

If I understand it correctly the extension has a hard-requirement that you install vitest in the root workspace otherwise it is not working.

There is no such requirement, it uses the working directory of a config file.

Also seems to display all workspaces (using pnpm) which don't have a vitest.config.*-file, such as projects that only have a jest.config.*-file instead or no file at all. I think it shows all places where it finds *.test* or *.spec*-files.

It only shows tests that Vitest found with provided config.