Routify hangs with vitest

[yairkukielka]

Describe the bug

When running the tests it looks like the process hangs at the end, just after passing the tests.

Reproduction

When running tests with vitest. The issue gets resolved if I remove the routify plugin from the vite config file, so it looks like routify is the culprit. After the Vitest default 10 seconds timout, the process is killed by Vitest

See reproduction example here https://github.com/yairkukielka/routify-vitest-example

Logs

npm run test

> vitest-routify@0.0.0 test
> vitest run

[Routify 3] build completed (31 ms)

 RUN  v1.6.0 /Users/myuser/p/exp/routify-vitest-example

 ✓ src/components/component1/Component1.spec.js (1)
   ✓ my description (1)
     ✓ simple test

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:30:16
   Duration  454ms (transform 27ms, setup 0ms, collect 14ms, tests 3ms, environment 0ms, prepare 122ms)

close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

If I add this

  test: {
    reporters: ["default", "hanging-process"],
  },

to the vite config as the error suggests, I get

There are 8 handle(s) keeping the process running

# Tinypool
node:internal/async_hooks:200                                                                                   
node:internal/async_hooks:503                                                                                   
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/tinypool/dist/esm/index.js:37              
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/tinypool/dist/esm/index.js:58              
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/tinypool/dist/esm/index.js:952             
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/vitest/dist/vendor/cli-api.E07AF1Yq.js:8192
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/vitest/dist/vendor/cli-api.E07AF1Yq.js:8845
file:///Users/myuser/p/exp/routify-vitest-example/node_modules/vitest/dist/vendor/cli-api.E07AF1Yq.js:8870

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200

# FILEHANDLE
node:internal/async_hooks:200
close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

### System Info

```shell
System:
    OS: macOS 13.6.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 163.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
  npmPackages:
    @roxi/routify: ^3.0.0-next.223 => 3.0.0-next.225 
    svelte: ^4.2.12 => 4.2.17 
    vite: ^5.2.0 => 5.2.11

[jakobrosenberg]

Thanks for the report @yairkukielka

I am not able to reproduce it on my end.

What happens if you run npm init routify@latest and select starter-basic with all components included. Then run npm run test. Make sure the ssr is enabled:

routify({ render: { ssr: { enable: true } } }),

[yairkukielka]

Ok, I tried but the test failed :)

 FAIL  tests/test.spec.js > can see /
AssertionError: expected '' to contain 'Welcome to Your New Routify 3 Project!'

- Expected
+ Received

- Welcome to Your New Routify 3 Project!

 ❯ tests/test.spec.js:15:37
     13|     await router.url.push('/')
     14| 
     15|     expect(document.body.innerHTML).toContain('Welcome to Your New Routify 3 Project!')
       |                                     ^
     16| })
     17| 

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

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  18:38:17

I couldn't make it pass. In any case, what you suggested is a different project. Mine doesn't use ssr, it's an SPA. Could you try my example?

[jakobrosenberg]

The ssr wasn't needed. Blunder on my part.

Tried your code. Seems you're missing

<script context="module">

in your App.svelte.

Without context="module" the export below doesn't work.

  export const router = createRouter({ routes });

Let me know if this works for you. 😊

[yairkukielka]

Hello, thanks for taking a look. Unfortunately that didn't fix it. I replaced <script> with <script context="module"> but I'm still getting the same problem when I run tests:

close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

[jakobrosenberg]

I fixed some timing issues related to testing, could you try the following

mkdir mytest
cd mytest
npm init routify@latest . -- -t starter-basic -i -p npm -v 3 --features test -r
npm run test

[yairkukielka]

Hello, this isn't using my reproduction example, is it?
I think it would be useful to fix it there

[jakobrosenberg]

I can't tell if it fixes your example as I couldn't reproduce the error when I ran it.

If the commands above work for you, we'll have something to go on in terms of fixing the issue.

[yairkukielka]

I see. I ran those commands and here's the result:

➜  mytest npm run test

> test
> vitest

[Routify 3] build completed (16 ms)

 DEV  v2.0.2 /Users/yair/p/mytest

 ✓ tests/test.spec.js (1) 438ms
   ✓ can see /

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  09:43:05
   Duration  902ms (transform 351ms, setup 0ms, collect 5ms, tests 438ms, environment 292ms, prepare 32ms)


 PASS  Waiting for file changes...
       press h to show help, press q to quit

[jakobrosenberg]

That's great news. You may need to add some or all of this

`/** @type { Router } */
let router

beforeAll(async () => {
    await import('../.routify/routify-init.js') // fix path if needed
    router = globalThis.__routify.routers[0]
    await router.ready()
    await router.activeRoute.get().rendered
})

[yairkukielka]

I added that code to the test as you can see here and it still failed, unfortunately.

> vitest run

[Routify 3] build completed (12 ms)

 RUN  v1.6.0 /Users/yair/p/exp/routify-vitest-example

stderr | src/components/component1/Component1.spec.js
[HMR][Svelte] Unrecoverable HMR error in <App>: next update will trigger a full reload

 ❯ src/components/component1/Component1.spec.js (1) 10005ms
   ⠦ [ beforeAll ]
   · my description (1)
     · simple test

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/component1/Component1.spec.js [ src/components/component1/Component1.spec.js ]
Error: Hook timed out in 10000ms.
If this is a long-running hook, pass a timeout value as the last argument or configure it globally with "hookTimeout".
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: 'target' is a required option
 ❯ new SvelteComponentDev node_modules/svelte/src/runtime/internal/dev.js:348:10
    347| }
    348| /**
    349|  * @template {Record<string, any>} [Props=any]
       | ^
    350|  * @template {Record<string, any>} [Events=any]
    351|  * @template {Record<string, any>} [Slots=any]
 ❯ new App src/App.svelte:89:3
 ❯ Module.createProxiedComponent node_modules/svelte-hmr/runtime/svelte-hooks.js:338:9
 ❯ new ProxyComponent node_modules/svelte-hmr/runtime/proxy.js:243:29
 ❯ new Proxy<App> node_modules/svelte-hmr/runtime/proxy.js:351:11
 ❯ src/main.js:4:13
 ❯ VitestExecutor.runModule node_modules/vite-node/dist/client.mjs:362:5
 ❯ VitestExecutor.directRequest node_modules/vite-node/dist/client.mjs:346:5
 ❯ VitestExecutor.cachedRequest node_modules/vite-node/dist/client.mjs:189:14
 ❯ VitestExecutor.dependencyRequest node_modules/vite-node/dist/client.mjs:233:12

This error originated in "src/components/component1/Component1.spec.js" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "src/components/component1/Component1.spec.js". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  1 failed (1)
      Tests   (1)
     Errors  1 error
   Start at  09:24:51
   Duration  10.35s (transform 349ms, setup 0ms, collect 7ms, tests 10.01s, environment 213ms, prepare 33ms)

close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

From the project created using your command I saw that in the index.html this line

 <script type="module" src="/src/main.js"></script> 

was replaced by this one

<script type="module" src="/.routify/routify-init.js"></script>

I tried this with no avail.

Something else I tried: in main.js when I replace

const app = new App({
  target: document.getElementById('app'),
})

with

const app = new App({
  target: document.body,
})

The test passes but I get the same error as before:

close timed out after 10000ms
Tests closed successfully but something prevents Vite server from exiting
You can try to identify the cause by enabling "hanging-process" reporter. See https://vitest.dev/config/#reporters

Lastly, I tried with the new vitest 2.0 but I got the same result