QwikDev
@builder.io/qwik/testing with setTimeout not update view
repo: https://github.com/piying-org/qwik-test/tree/v5 playground: https://qwik.dev/playground/#f=Q0o0ZhYW2BKNDqL2BTPB5RqYhVzQ6SAKFEoTGbBwBWWu0lQjYIjB7dZQN1AHOlkBUWVrVEMr4Fq4VgWICJJhIAANa4iZemAKZJACUCOERm4oqIMqeUN1hH%2FAaiAq0Qt3GrrACNUFcCfgSDeQNhk87sFtMlul5IzEvPRU3aSSPCW4FLy1Uo3qRBBA1O9o7ocAZOcDo0bdAgiAkYpQUKujYAD1EJhbC2UiEiXERRCTDBFJE9KihPFBDc1qZMtqjeAtU%2BTUO1rkDMkiBwA
This issue does not exist in the playground, but it occurs during testing using @builder.io/qwik/testing
import { component$, isBrowser, isServer, useSignal, useTask$, useVisibleTask$ } from '@builder.io/qwik';
export const ExampleTest = component$((props: { flag: boolean }) => {
let value2 = useSignal('0');
useTask$(({ track }) => {
track(() => {
return value2.value;
});
console.log('useTask:server/browser', isServer, isBrowser);
console.log('useTask', value2.value);
});
useVisibleTask$(({ track }) => {
track(() => {
return value2.value;
});
console.log('useVisibleTask:server/browser', isServer, isBrowser);
console.log('useVisibleTask', value2.value);
});
return (
<>
<button
class="change-btn"
onClick$={() => {
// If setTimeout is commented out, it will work normally
setTimeout(() => {
value2.value = '8888';
}, 0);
}}
>
change value1
</button>
<div>{value2.value}2</div>
</>
);
});
test(`test1`, async () => {
const { screen, render, userEvent } = await createDOM();
await render(<ExampleTest flag={true} />);
await userEvent('.change-btn', 'click');
await new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
console.log(screen.outerHTML);
expect(screen.outerHTML).toContain('88882');
});
log
stdout | src/components/example/example.spec.tsx > test1
useTask:server/browser true false
useTask 0
useVisibleTask:server/browser true false
useVisibleTask 0
stdout | src/components/example/example.spec.tsx > test1
<host q:version="1.16.1" q:container="resumed" q:render="dom-dev"><!--qv --><!--qv --><button class="change-btn">change value1</button><div>02</div><!--/qv--><!--/qv--></host>
I'm reasonably sure that V1 testing can't do reactivity tests.
In V2 it's better, but the surest is to use something like playwright
I'm reasonably sure that V1 testing can't do reactivity tests.
In V2 it's better, but the surest is to use something like playwright
Thank you for your reply If the official v2 has been officially released, I can give it a try But I didn't expect the official test to have problems Because testing is used to troubleshoot problems
Thank you for your reply If the official v2 has been officially released
Hi @wszgrcy, you can use pnpm create [email protected] to try the latest v2 version.
May I ask you to try with this?
Thank you for your reply If the official v2 has been officially released
Hi @wszgrcy, you can use
pnpm create [email protected]to try the latest v2 version. May I ask you to try with this?
Okay, I'll give it a try when I have some free time.
pnpm create [email protected] is returning me an error on my machine.
if it's the same for you, you can use the beta.13 to try. Thanks
pnpm create [email protected]is returning me an error on my machine. if it's the same for you, you can use the beta.13 to try. Thanks
I attempted to run npm run qwik add vitest to add testing, but it still installed version 0.34.6, which is incompatible with v2.0. I suspect the official team may not have finished implementing the testing functionality yet.
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @qwik.dev/[email protected]
npm error Found: [email protected]
npm error node_modules/vitest
npm error dev vitest@"^0.34.6" from the root project
npm error peer vitest@">=0.30.1 <1" from @vitest/[email protected]
npm error node_modules/@vitest/ui
npm error dev @vitest/ui@"^0.34.6" from the root project
npm error peerOptional @vitest/ui@"*" from [email protected]
npm error
npm error Could not resolve dependency:
npm error peerOptional vitest@">=2 <4" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/core
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/router@"latest" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/vitest
npm error peerOptional vitest@">=2 <4" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/core
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/router@"latest" from the root project
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/core@"2.0.0-beta.13" from the root project
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error peer @qwik.dev/core@"^2.0.0-beta.13" from @qwik.dev/[email protected]
npm error node_modules/@qwik.dev/router
npm error dev @qwik.dev/router@"latest" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\chen\AppData\Local\npm-cache\_logs\2025-11-27T11_01_55_478Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\chen\AppData\Local\npm-cache\_logs\2025-11-27T11_01_55_478Z-debug-0.log
Of course I know how to fix this dependency problem, but since even the official team hasn't resolved it, it suggests that we're still quite far from addressing it in v2.0.