why is my test not working?

[PhilipZi]

Hallo zusammen,

ich würde gerne wissen wieso mein Test nicht funtioniert. Habe einiges ausporbiert und noch mit jemand anderem probiert wie man es lösen könnte leider vergebens.
Hier ein Bild von dem Code und der Fehlermeldung:

Hier der Code:

/**
 * @jest-environment jsdom
 */
import {render, renderHook, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import useStore from '../hooks/useStore';

import CountDownButton from './CountDownButton';

describe('CountDownButton component', () => {
	it('should render children', () => {
		render(<CountDownButton />);
		const countDownButton = screen.getByRole('button');
		expect(countDownButton).toBeInTheDocument();
	});

	it('should allow clicks', async () => {
		const store = renderHook(() => useStore());
		const {changeToFalse} = store.result.current;
		render(<CountDownButton />);
		const countDownButton = screen.getByTestId('countdownbutton');
		await userEvent.click(countDownButton);
		expect(changeToFalse).toBeCalled();
	});
});

[PhilipZi]

here the link to my github:

PhilipZi/capstone-project#30

[alexclaes]

The test breaks because the Next.js router is not available in the jest tests. You need to mock it.

Additionally you are nesting a button inside an a element, which is incorrect. It should either be a simple link (a element) or a button with additional functionality - which is your case. You can use useRouter to switch between pages.

You component should look like this:

	const router = useRouter();
	const changeToFalse = useStore(state => state.changeToFalse);

	function onButtonClick() {
		changeToFalse();
		router.push('/countdown');
	}

	return (
		<StyledButton
			data-testid="countdownbutton"
			variant="countdownButton"
			onClick={onButtonClick}
		>
			<Icon variant="play" size="80px" color="black" />
		</StyledButton>
	);

Then add the router mock to your test like this: https://github.com/orgs/neuefische/discussions/110