La til testing-library og jest-axe for å kunne teste komponenter.

Author: sstensby

client/__tests__/testing-library.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+const mockfunc = jest.fn();
+
+function Testkomponent({ lagAxeFeil = false }: { lagAxeFeil?: boolean }) {
+	return (
+		<div>
+			<div>Dette er en testkomponent. Testing-library burde kunne finne tekstinnholdet.</div>
+			<button onClick={mockfunc}>Klikk meg</button>
+			{/* eslint-disable-next-line jsx-a11y/alt-text */}
+			{lagAxeFeil && <img src="#" />}
+		</div>
+	);
+}
+
+describe('Testkomponent', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('Rendrer korrekt', () => {
+		render(<Testkomponent />);
+		expect(screen.getByText('Dette er en testkomponent.', { exact: false })).toBeInTheDocument();
+	});
+
+	it('Testing av mockfunksjoner', () => {
+		render(<Testkomponent />);
+
+		expect(mockfunc).not.toHaveBeenCalled();
+
+		const button = screen.getByText('Klikk meg');
+		button.click();
+
+		expect(mockfunc).toHaveBeenCalled();
+	});
+
+	it('Mocks cleares mellom tester (krever at du kjører alle tester)', () => {
+		render(<Testkomponent />);
+
+		expect(mockfunc).not.toHaveBeenCalled();
+
+		const button = screen.getByText('Klikk meg');
+		button.click();
+
+		expect(mockfunc).toHaveBeenCalled();
+	});
+
+	it("Fanger opp axe-feil", async () => {
+		const { container } = render(<Testkomponent lagAxeFeil />);
+		const results = await axe(container);
+		expect(results).not.toHaveNoViolations();
+	});
+
+	it("Gir ikke axe-feil når komponenten er korrekt", async () => {
+		const { container } = render(<Testkomponent />);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

client/package-lock.json

@@ -42,7 +42,10 @@
         "@storybook/react": "^9.1.10",
         "@storybook/react-vite": "^9.1.10",
         "@storybook/testing-library": "0.2.2",
+        "@testing-library/dom": "10.4.1",
+        "@testing-library/react": "16.3.0",
         "@types/jest": "30.0.0",
+        "@types/jest-axe": "3.5.9",
         "@types/react": "19.2.2",
         "@types/react-dom": "19.2.1",
         "@typescript-eslint/eslint-plugin": "^8.46.0",
@@ -55,6 +58,7 @@
         "eslint-plugin-storybook": "^9.1.10",
         "husky": "9.1.7",
         "jest": "30.2.0",
+        "jest-axe": "10.0.0",
         "jest-environment-jsdom": "30.2.0",
         "msw": "2.11.4",
         "msw-storybook-addon": "2.0.5",