Reading out query signals in template causes test failure
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 50.3k
- Forks
- 4.2k
- Avg merge
- 18h 25m
- Merged PRs (30d)
- 200
Description
Describe the bug
First off, great library, thanks for your work!
I'm running on Angular 21 and I'm unit testing with Vitest, I have this component:
@Component({
selector: 'app-root',
template: `
<!-- comment out the line below and the test passes -->
{{ numbersQuery.isSuccess() }}
`,
})
export class App {
numbersQuery = injectQuery(() => ({
queryKey: ['stuff'],
queryFn: () => Promise.resolve([1, 2, 3, 4, 5]),
}));
}
And I have this test for it:
describe('App', () => {
let sut: App;
let fixture: ComponentFixture<App>;
beforeEach(async () => {
await TestBed.configureTestingModule({
providers: [provideTanStackQuery(new QueryClient())],
imports: [App],
}).compileComponents();
fixture = TestBed.createComponent(App);
sut = fixture.componentInstance;
});
it('fires a query', async () => {
await triggerQueries(fixture);
expect(sut.numbersQuery.isSuccess()).toBe(true);
expect(sut.numbersQuery.data()).toEqual([1, 2, 3, 4, 5]);
});
});
const triggerQueries = async (fixture: ComponentFixture<unknown>) => {
// Kick off effects & queries
fixture.detectChanges();
// Wait for TanStack Query + Angular to settle
await fixture.whenStable();
// Apply final results to the template / signals
fixture.detectChanges();
};
But seemingly, using the .isSuccess() signal inside the template of the component is causing the behavior of the query signals to malfunction or something: isSuccess() returns false, data() is undefined. When I comment out the {{ numbersQuery.isSuccess() }}, the test passes without problems.
Your minimal, reproducible example
https://github.com/JPtenBerge/tanstack-query-test-bug
Steps to reproduce
- Create a new project that uses Angular 21 and Vitest
- Define a simple query in
AppusinginjectQuery()with some simple data result,Promise.resolve([1, 2, 3, 4, 5]) - Define a test that reads out
isSuccess()/data()of that query afterdetectChanges()/await fixture.whenStable();and watch it pass. - In the template of
App, read out one of the query signals likeisSuccess()ordata(). Test now fails.
Expected behavior
The unit test should simply pass. Why does the template influence the signal like this?
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows 11
- Browser: not relevant, it's a unit test.
Tanstack Query adapter
angular-query
TanStack Query version
v5.90.14
TypeScript version
v5.9.2
Additional context
No response
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 linked minimal reproducible example and the App component test, especially triggerQueries and the template read of numbersQuery.isSuccess(). Compare the test with and without that template expression, then trace the Angular query-signal update and scheduling behavior. Done means the test passes while the template still reads the query signal.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100