[🐛] Vitest not working? Optimizer should replace all usages of $()

[yoroshikun]

First thanks for working on this integration, it is super interesting to play with the integration of multi awesome concepts for making the web faster and better.
Please let me know if this is not related at all to this integration, throughout troubleshooting it seems to only affect astro template so far.

I am trying to setup Vitest with it to enable some unit testing.

I have attempted to setup Vitest with the following steps that are outlined in a blog here It however uses qwik city and vite instead.

1. Install vitest with npm i vitest --save-dev
2. Create a vitest.config.ts with the following

/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
	test: {
    exclude: ['~', 'node_modules', 'dist', 'public'],
	},
});

3. Add the Counter.tsx (small change to have count in a div and class count for test targeting) (from README.md example) and a Counter.test.tsx with the following content for basic test

import { createDOM } from '@builder.io/qwik/testing'; // import the createDOM method
import { describe, expect, it } from 'vitest';
import Counter from './Counter';

describe('Counter component', function () {
  it('should render', async () => {
    // create the component's DOM and get back the container and a render method
    const { screen, render } = await createDOM();

    // call the render method with the JSX node of our Counter component as a parameter
    await render(<Counter />);

    // get the div that displays the count from our container
    const countElement = screen.querySelector('.count');

    // assert the displayed count is "0" which is the default value
    expect(countElement?.textContent).toBe('0');
  });
});

Expected outcome: (from the qwik city example)

✓ src/components/starter/counter/counter.test.tsx (1)
   ✓ Counter component (1)
     ✓ should render

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  19:11:43
   Duration  617ms (transform 367ms, setup 0ms, collect 405ms, tests 27ms, environment 0ms, prepare 48ms)


  ❗️ Expect significant performance loss in development.
  ❗️ Disabling the browser's cache results in waterfall requests.

Also as a bonus does anyone know why it has these warnings for performance?

Actual Outcome:

 FAIL  src/components/Counter/Counter.test.tsx [ src/components/Counter/Counter.test.tsx ]
Error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.
 ❯ $ dist-dev/tsc-out/packages/qwik/src/core/qrl/qrl.public.js:83:15
 ❯ Module.component$ dist-dev/tsc-out/packages/qwik/src/core/component/component.public.js:140:25
 ❯ src/components/Counter/Counter.tsx:4:16
      2| import styles from './counter.module.css';
      3| 
      4| export default component$(() => {
       |                ^
      5|   const count = useSignal(70);
      6| 
 ❯ src/components/Counter/Counter.test.tsx:4:31

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

 Test Files  1 failed (1)
      Tests  no tests
   Start at  19:35:12
   Duration  239ms (transform 24ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 40ms)

Any information on this would be awesome, I struggled finding any information on this through some searches. 🙇

Extra
When trying to build it happens to do this as well

✓ built in 663ms
"fileURLToPath" is not exported by "__vite-browser-external", imported by "node_modules/@builder.io/qwik/testing/index.mjs".
file: /Users/me/projects/personal/site/node_modules/@builder.io/qwik/testing/index.mjs:22378:9
22376: // packages/qwik/src/testing/platform.ts
22377: import { existsSync } from "fs";
22378: import { fileURLToPath } from "url";

[thejackshelton]

First thanks for working on this integration, it is super interesting to play with the integration of multi awesome concepts for making the web faster and better.

Of course! This has been the ultimate goal since I first started playing with Astro. (before I knew Qwik even existed)

❗️ Expect significant performance loss in development.
❗️ Disabling the browser's cache results in waterfall requests.

It's because the service worker is disabled in dev mode (and speculative module fetching)
https://qwik.builder.io/docs/advanced/speculative-module-fetching/#speculative-module-fetching

This makes sure dev mode is never stale.

I have attempted to setup Vitest with the following steps that are outlined in a blog here It however uses qwik city and vite instead.

Yeah this blog post came out when Qwik City was the only meta-framework option for Qwik.

I would follow Astro's vitest guide and example:
https://docs.astro.build/en/guides/testing/#vitest
https://github.com/withastro/astro/tree/latest/examples/with-vitest/test

Qwik City is an alternative to Astro. It's similar to what Next.js is to React for example. They are incompatible.

[yoroshikun]

@thejackshelton I actually did follow those two links you provided and did not have any luck. Let me create a reproduction.

The astro vitest does not have DOM tests, and the testing documentation is very barebones on if it is actually working or not.

Pleas check this reproduction, Here

Running test will fail for DOM and running build will also fail with lots of warnings and error at end.

[thejackshelton]

@thejackshelton I actually did follow those two links you provided and did not have any luck. Let me create a reproduction.

The astro vitest does not have DOM tests, and the testing documentation is very barebones on if it is actually working or not.

Pleas check this reproduction, Here

Running test will fail for DOM and running build will also fail with lots of warnings and error at end.

I'm a bit confused, does it work without the @qwikdev/astro integration? and then when it's added it doesn't work?

It looks like this reproduction does not include the integration and breaks, if that's the case, it'd probably be better to copy the conversation link here and include your reproduction in the Astro repository or the Astro vitest integration repo.

[yoroshikun]

@thejackshelton Sorry for some reason the link was just the template not the repro, Here is the repo 🙇 Running build or test (simplest way is useing this dropdown) will error in slightly different ways described above.

[yoroshikun]

🙇

[thejackshelton]

Hey will try to figure out what to do here, but it looks like that can't be achieved without externally touching the @builder.io/qwik/testing package, and figuring out how to extract out the qwikCity plugin from the package.

[Caden64]

I am also running into the same problem in this repo. Brand new template did the same steps as shown in the video where Steve announced it a month ago. Only differences that may be affecting it is using Astro 4.0. Getting this output
[ERROR] Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.
when using the verbose flag I get this full stack trace [ERROR] Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead. Stack trace: at $ (file:///C:/Windows_Path/qwik-astro-test/node_modules/@builder.io/qwik/core.mjs:8581:15) at C:\Windows_Path\qwik-astro-test\components\counter.tsx:3:24
the stack trace points to component$ in counter.tsx

[thejackshelton]

I am also running into the same problem in this repo. Brand new template did the same steps as shown in the video where Steve announced it a month ago. Only differences that may be affecting it is using Astro 4.0. Getting this output [ERROR] Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead. when using the verbose flag I get this full stack trace [ERROR] Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead. Stack trace: at $ (file:///C:/Users/crx2s/Desktop/projects/qwik-astro-test/node_modules/@builder.io/qwik/core.mjs:8581:15) at C:\Windows_Path\qwik-astro-test\components\counter.tsx:3:24 the stack trace points to component$ in counter.tsx

Yeah I'm gonna try to tackle this tomorrow, although I think the challenging part is this seems to be something tied to Qwik City 😬 .

Will see if there's an astro way of doing this first and then circle back to what we can do there. Thanks for being patient guys and appreciate raising awareness on this issue!