QwikDev / QwikDev/qwik

@builder.io/qwik/testing with setTimeout not update view

Open
#8,016 7 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.