it('can test spies', async () => {
const spy = browserMock.fn();
const { page } = await render(
app =>
<LogoutButtonAction.Override with={() => spy}>
{app}
<LogoutButtonAction.Override>
);
await page.getByText('Log out').click();
expect(await spy).toHaveBeenCalled();
}); export const CountdownTime = createOverride(60);
export const Countdown = () => {
const initialTime = CountdownTime.useValue();
const [time, setTime] = React.useState(initialTime);
React.useEffect(() => {
const interval = setInterval(() => {
setTime(t => t - 1);
if (t === 1) clearInterval(interval);
}, 1000);
return () => clearInterval(interval)
}, []);
return time > 0 ? <>Time left {time}</> : <>Done</>
};
it('tests faster', async () => {
const { page } = await render(
app => <CountdownTime.Override with={() => 5}>{app}</CountdownTime.Override>
);
await expect(page.getByText('Done')).not.toBeVisible();
page.waitForTimeout(5000);
await expect(page.getByText('Done')).toBeVisible();
});
If I needed something like this, I'd probably also make setInterval an override as well, so I don't need to wait at all, but you get the idea. export const Countdown = () => {
const [time, setTime] = React.useState(60);
React.useEffect(() => {
const interval = setInterval(() => {
setTime(t => t - 1);
if (t === 1) clearInterval(interval);
}, 1000);
return () => clearInterval(interval)
}, []);
return time > 0 ? <>Time left {time}</> : <>Done</>
};
Short of using Playwright Component Tests, this isn't possible.
Overrides are opt-in so you can just expose any overridable value as a prop and run a isolated component test on it.