Vitest browser hangs while loading without any information

noam-honig commented 1 year ago

Describe the bug

Vitest browser hangs on a test that tests a function that does a simple text manipulation function.

That same test works ok with vitest without the browser.

That same function is used and works with vite react.

I'm guessing it has something to do with my typescript code, but there is no error and I have no way of knowing what should I fix with my code to get this to work

Reproduction

https://github.com/noam-honig/vitest-browser-hang-repro

I've created a github repo for this reproduction - I'm sorry that it is not minimal, I would love to reduce it, but without an error I don't know where to start

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i7-7820X CPU @ 3.60GHz
    Memory: 9.36 GB / 31.70 GB
  Binaries:
    Node: 16.19.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 116.0.5845.111
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.54)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

AriPerkkio commented 1 year ago

Please try again to minimize the reproduction case. Start by removing unnecessary dependencies and files.

I debugged this for a while and ended up minimizing the reproduction case to following:

import { it, expect } from "vitest";

// This import does something that makes browser mode stuck
import "../core/src/remult3/RepositoryImplementation";

it("test", () => {
  expect(1 + 1).toBe(2);
});

Happy to look into this more once a clear minimal reproduction case is available.

noam-honig commented 1 year ago

Hi @AriPerkkio, Thanks - I did that already and got to the same place - I don't know where to go from there :)

Is there any log, any indication, so that I can see what it does? what is its loop?

I'm guessing it is stuck in some circular reference hell - but I can't find it.

The fact that it works with both vite, and vitest nonbrowser - leads me to believe that it is browser related - I would love to spend more time in it, but I need some thread on how to narrow this down

AriPerkkio commented 1 year ago

Is there any log, any indication, so that I can see what it does? what is its loop?

DEBUG=* pnpm run test-browser could reveal something related.

I'm guessing it is stuck in some circular reference hell - but I can't find it.

I think so too. Multiple files are importing same files which end up importing each other... I spent a while reducing the reproduction again and think this is too much. I got to this point:

import { it, expect } from "vitest";

// This makes test stuck
import "../core/src/filter/filter-interfaces";

// These will make test stuck too
// import "../core/src/column";
// import "../core/src/context";
// import "../core/src/data-interfaces";
// import "../core/src/sort";

it("test", () => {
  expect(1 + 1).toBe(2);
});

sheremet-va commented 1 year ago

There is a VITE_NODE_DEBUG_RUNNER=true env variable that shows imports that take a long time which might help with fundings.

noam-honig commented 1 year ago

I've tried the flag VITE_NODE_DEBUG_RUNNER=true and it didn't add any info.

I don't think that it is hung - I just think that it did not run the code that started the tests.

I opened dev tools - and I can see the source, and source maps - they are ok.
I ran the dev tools profiler - and nothing is running.
pressed pause - and it didn't get to any code.
wrote "console.log' in the console and it showed both in the browser and in the terminal.

My guess - it is simply not reaching the code path that should run the tests.

noam-honig commented 1 year ago

After a while as I was waiting with the pause button on it took me to the following exception: And later: I clicked console log and it wrote both in the browser and the terminal.

noam-honig commented 1 year ago

Continued my debugging strategy, I see that it loads my code - traverses some files and last command it runs before hanging is:

My guess is that there's such a big circular depencdency there which kills it.

I'll work on my code - but I still think you should be interested, since it complies, runs, vite runs it and normal tests run it - it just the browser that hangs.

noam-honig commented 1 year ago

Ok - I've solved my case by chasing all circular dependencies using this great tool: https://www.npmjs.com/package/dependency-cruiser

I leave this issue open in case you're interested in investigating why did it break vitest-browser.

Let me know when you're done and I'll delete my repo

Thanks

guansss commented 12 months ago

Hi @noam-honig , thanks for the investigation! Based on this information, I set the slowHijackESM option to false and the problem is gone.

Looks like the ESM hijacking is not working properly, and disabling it would be fine since I don't spy on modules.

mcclayton commented 10 months ago

Issue https://github.com/vitest-dev/vitest/issues/4373 seems to also be related/similar (may be worth consolidating to help focus efforts in fixing).

Setting slowHijackESM to true didn't work for me, but addressing the circular dependencies did.

I ultimately fixed this for myself by addressing the circular dependencies (using the eslint rule: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md#when-not-to-use-it)

sheremet-va commented 7 months ago

Doesn't look like this is an issue anymore. Please open an issue with a new reproduction if it still fails with Vitest 1.3.0.

vitest-dev / vitest