Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ekrapfl opened this issue Oct 1, 2024 · 3 comments · Fixed by #8331
Closed

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

ekrapfl opened this issue Oct 1, 2024 · 3 comments · Fixed by #8331

Comments

@ekrapfl
Copy link

ekrapfl commented Oct 1, 2024

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

image

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
Copy link
Author

ekrapfl commented Nov 12, 2024

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

@arnoud-dv
Copy link
Collaborator

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants