TanStack / TanStack/query

Reading out query signals in template causes test failure

Open
#9,910 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

package: angular-query
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
  1. Create a new project that uses Angular 21 and Vitest
  2. Define a simple query in App using injectQuery() with some simple data result, Promise.resolve([1, 2, 3, 4, 5])
  3. Define a test that reads out isSuccess()/data() of that query after detectChanges()/await fixture.whenStable(); and watch it pass.
  4. In the template of App, read out one of the query signals like isSuccess() or data(). 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.