@builder.io/qwik/testing with setTimeout not update view
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 22.1k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 52
Description
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction in src/components/example/example.spec.tsx and the createDOM and userEvent APIs from @builder.io/qwik/testing. Run the test with the setTimeout callback and compare it with the version where setTimeout is removed. Done means the DOM updates to contain 88882 after the delayed signal change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100