Reading out query signals in template causes test failure

[JPtenBerge]

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

[JPtenBerge]

Also, as a workaround: overriding the template makes the test pass.

TestBed.configureTestingModule({
	providers: [provideTanStackQuery(new QueryClient())],
	imports: [App],
}).overrideTemplate(App, '');

[JPtenBerge]

Oh, it's not just within the template. Any call to a query signal will cause strange behavior, like in an effect():

export class App {
	numbersQuery = injectQuery(() => ({
		queryKey: ['stuff'],
		queryFn: () => Promise.resolve([1, 2, 3, 4, 5]),
	}));

	constructor() {
		effect(() => (console.log('in effect:', this.numberQuery.isSuccess())));
	}
}

No workaround for this yet.