Component tests fail when angular-query is used in the component

[ekrapfl]

Describe the bug

We are using Angular Query in our project, and we have noticed that it can interfere with our Cypress component tests in some cases. To illustrate this, we have made a simple modification to the Cypress component testing sample app for standalone Angular. If you pull it down and run the test-component spec, you will see that none of the tests pass. It appears as though change detection is not running properly once the TanStack Query is injected in the component file. To see the tests work again, comment out the query property in test-component.component.ts.

Reproduction fork

Notes:

• There does not appear to be any issue when running the app, only when running through Cypress component tests.
• I have tested this in an ultra-simple repo with nothing but a simple component and a Cypress component test as well (if you would prefer this format): simple repro
• This bug has been cross-posted to Cypress as well.

Cypress Version

13.15

Node version

20.11.0

Your minimal, reproducible example

https://github.com/ekrapfl/angular-plus-tsq-cypress-fail

Steps to reproduce

cypress-component-testing-apps Reproduction fork

• cd angular-standalone
• npm ci
• npx cypress open
• Run Component tests in the browser of your choice
• Run the tests for test-component

Simple Angular Repro

• npm ci
• npx cypress open
• Run Component tests in the browser of your choice
• Run the tests for fail.component

In either repro, notice that change detection is not properly fired, and the UI does not update appropriately. In either repro, comment out the TanStack Query in order to get the tests passing again.

Expected behavior

I would expect that injecting a simple TSQ would not affect change detection in Cypress component tests.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: MacOS
• Browser: Chrome, Edge, and Electron
• Version: 129, 129, and 118

Tanstack Query adapter

angular-query

TanStack Query version

v5.56.2

TypeScript version

v5.5.2

Additional context

No response

[ekrapfl]

Is this on anyone's radar at all? Just curious.

[arnoud-dv]

I've isolated the cause to the garbage collection timer, adding this to your reproduction allows the test to run successfully:

    cy.mount(FailComponent, {
      providers: [provideTanStackQuery(new QueryClient({
        defaultOptions: {
          queries: {
            gcTime: Infinity, // 0 also works
          },
        },
      }))],
    });

Note this does influence caching behaviour, I don't know if that might invalidate your tests.

I'll also look into if this can be fixed in the Angular adapter.

[arnoud-dv]

This should be fixed in v5.61.2 and the gcTime workaround above won't be needed anymore.