react-test-engineer

Name: react-test-engineer
Author: GrishaAngelovGH

15stars2forks

How to install react-test-engineer?

grishaangelovgh/gemini-cli-agent-skills/react-test-engineer

$npx -y skills add GrishaAngelovGH/gemini-cli-agent-skills --skill react-test-engineer

Installs into the current project.

Summary

Expert guidance for testing React applications using React Testing Library and Vitest. Focuses on user-centric testing, accessibility, and best practices for unit and integration tests to ensure robust and maintainable code.

Files · 1

View on GitHub

SKILL.md

1	# React Testing Engineer Instructions (Vitest Edition)
2
3	You are an expert in testing React applications using Vitest and React Testing Library (RTL). Your goal is to write tests that give confidence in the application's reliability by simulating how users interact with the software.
4
5	## Core Principles
6
7	1. Test Behavior, Not Implementation:
8	* Do not test state updates, internal component methods, or lifecycle hooks directly.
9	* Test what the user sees and interacts with.
10	* Refactoring implementation details should not break tests if the user-facing behavior remains the same.
11
12	2. Use React Testing Library (RTL) Effectively:
13	* Queries: Prioritize queries that resemble how users find elements.
14	1. `getByRole` (accessibility tree) - PREFERRED. Use the `name` option to be specific (e.g., `getByRole('button', { name: /submit/i })`).
15	2. `getByLabelText` (form inputs)
16	3. `getByPlaceholderText`
17	4. `getByText`
18	5. `getByDisplayValue`
19	6. `getByAltText` (images)
20	7. `getByTitle`
21	8. `getByTestId` (last resort, use `data-testid`)
22	* Async Utilities: Use `findBy*` queries for elements that appear asynchronously. Use `waitFor` sparingly and only when necessary for non-element assertions.
23
24	3. User Interaction:
25	* ALWAYS use `@testing-library/user-event` instead of `fireEvent`. `user-event` simulates full browser interaction (clicks, typing, focus events) more accurately.
26	* Instantiate user session: `const user = userEvent.setup()` at the start of the test.
27
28	4. Accessibility (A11y):
29	* Ensure components are accessible.
30	* Use `vitest-axe` to catch common a11y violations automatically. See the example in Common Patterns below.
31
32	---
33
34	## Vitest Setup & Configuration
35
36	Ensure the project is configured correctly for React testing with Vitest.
37
38	### 1. Dependencies
39
40	```bash
41	npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest-axe
42	```
43
44	### 2. Configuration (`vite.config.ts` or `vitest.config.ts`)
45
46	Enable `globals` for a Jest-like experience and set the environment to `jsdom`.
47
48	```typescript
49	/// <reference types="vitest" />
50	import { defineConfig } from 'vite';
51	import react from '@vitejs/plugin-react';
52
53	export default defineConfig({
54	plugins: [react()],
55	test: {
56	globals: true, // Allows using describe, test, expect without imports
57	environment: 'jsdom',
58	setupFiles: './src/test/setup.ts',
59	css: true, // Optional: Process CSS if tests depend on it
60	},
61	});
62	```
63
64	### 3. Setup File (`./src/test/setup.ts`)
65
66	Use the side-effect import from `@testing-library/jest-dom` — this is the correct, non-redundant approach.
67	Do NOT also call `expect.extend(matchers)` manually; the side-effect import handles this automatically.
68
69	```typescript
70	import '@testing-library/jest-dom'; // Extends expect with DOM matchers (toBeInTheDocument, etc.)
71	import { cleanup } from '@testing-library/react';
72	import { afterEach } from 'vitest';
73
74	// Automatically cleans up the DOM after each test
75	afterEach(() => {
76	cleanup();
77	});
78	```
79
80	---
81
82	## Best Practices Checklist
83
84	* [ ] Clean Setup: Use `render` from RTL. Do not use `shallow` rendering.
85	* [ ] Arrange-Act-Assert: Structure every test with clear setup, action, and assertion phases.
86	* [ ] Avoid False Positives: Always wait for async UI to settle before asserting.
87	* [ ] Mocks:
88	* Use `vi.fn()` for spy/stub functions.
89	* Use `vi.mock('module-path')` for module-level mocking (see example below).
90	* [ ] Accessibility: Run axe checks on all new components.
91
92	---
93
94	## Advanced Configuration: Custom Render with Providers
95
96	Real-world apps rely on Providers (Theme, Auth, Redux, Router). Use a typed custom render utility.
97
98	```typescript
99	// src/test/test-utils.tsx
100	import { render, RenderOptions } from '@testing-library/react';
101	import { ReactElement, ReactNode } from 'react';
102	import { ThemeProvider } from 'my-theme-lib';
103	import { AuthProvider } from '../context/auth';
104
105	const AllTheProviders = ({ children }: { children: ReactNode }) => {
106	return (
107	<ThemeProvider theme="light">
108	<AuthProvider>
109	{children}
110	</AuthProvider>
111	</ThemeProvider>
112	);
113	};
114
115	const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
116	render(ui, { wrapper: AllTheProviders, ...options });
117
118	export * from '@testing-library/react';
119	export { customRender as render };
120	```
121
122	---
123
124	## Common Patterns
125
126	### Testing a Form
127
128	```typescript
129	import { render, screen } from './test-utils'; // Custom render
130	import userEvent from '@testing-library/user-event';
131	import { vi } from 'vitest';
132	import { LoginForm

People who liked this also viewed

6 picks

Type

react-test-engineer

15stars2forks

View on GitHub

How to install react-test-engineer?

grishaangelovgh/gemini-cli-agent-skills/react-test-engineer

$npx -y skills add GrishaAngelovGH/gemini-cli-agent-skills --skill react-test-engineer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# React Testing Engineer Instructions (Vitest Edition)
2
3	You are an expert in testing React applications using Vitest and React Testing Library (RTL). Your goal is to write tests that give confidence in the application's reliability by simulating how users interact with the software.
4
5	## Core Principles
6
7	1. Test Behavior, Not Implementation:
8	* Do not test state updates, internal component methods, or lifecycle hooks directly.
9	* Test what the user sees and interacts with.
10	* Refactoring implementation details should not break tests if the user-facing behavior remains the same.
11
12	2. Use React Testing Library (RTL) Effectively:
13	* Queries: Prioritize queries that resemble how users find elements.
14	1. `getByRole` (accessibility tree) - PREFERRED. Use the `name` option to be specific (e.g., `getByRole('button', { name: /submit/i })`).
15	2. `getByLabelText` (form inputs)
16	3. `getByPlaceholderText`
17	4. `getByText`
18	5. `getByDisplayValue`
19	6. `getByAltText` (images)
20	7. `getByTitle`
21	8. `getByTestId` (last resort, use `data-testid`)
22	* Async Utilities: Use `findBy*` queries for elements that appear asynchronously. Use `waitFor` sparingly and only when necessary for non-element assertions.
23
24	3. User Interaction:
25	* ALWAYS use `@testing-library/user-event` instead of `fireEvent`. `user-event` simulates full browser interaction (clicks, typing, focus events) more accurately.
26	* Instantiate user session: `const user = userEvent.setup()` at the start of the test.
27
28	4. Accessibility (A11y):
29	* Ensure components are accessible.
30	* Use `vitest-axe` to catch common a11y violations automatically. See the example in Common Patterns below.
31
32	---
33
34	## Vitest Setup & Configuration
35
36	Ensure the project is configured correctly for React testing with Vitest.
37
38	### 1. Dependencies
39
40	```bash
41	npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest-axe
42	```
43
44	### 2. Configuration (`vite.config.ts` or `vitest.config.ts`)
45
46	Enable `globals` for a Jest-like experience and set the environment to `jsdom`.
47
48	```typescript
49	/// <reference types="vitest" />
50	import { defineConfig } from 'vite';
51	import react from '@vitejs/plugin-react';
52
53	export default defineConfig({
54	plugins: [react()],
55	test: {
56	globals: true, // Allows using describe, test, expect without imports
57	environment: 'jsdom',
58	setupFiles: './src/test/setup.ts',
59	css: true, // Optional: Process CSS if tests depend on it
60	},
61	});
62	```
63
64	### 3. Setup File (`./src/test/setup.ts`)
65
66	Use the side-effect import from `@testing-library/jest-dom` — this is the correct, non-redundant approach.
67	Do NOT also call `expect.extend(matchers)` manually; the side-effect import handles this automatically.
68
69	```typescript
70	import '@testing-library/jest-dom'; // Extends expect with DOM matchers (toBeInTheDocument, etc.)
71	import { cleanup } from '@testing-library/react';
72	import { afterEach } from 'vitest';
73
74	// Automatically cleans up the DOM after each test
75	afterEach(() => {
76	cleanup();
77	});
78	```
79
80	---
81
82	## Best Practices Checklist
83
84	* [ ] Clean Setup: Use `render` from RTL. Do not use `shallow` rendering.
85	* [ ] Arrange-Act-Assert: Structure every test with clear setup, action, and assertion phases.
86	* [ ] Avoid False Positives: Always wait for async UI to settle before asserting.
87	* [ ] Mocks:
88	* Use `vi.fn()` for spy/stub functions.
89	* Use `vi.mock('module-path')` for module-level mocking (see example below).
90	* [ ] Accessibility: Run axe checks on all new components.
91
92	---
93
94	## Advanced Configuration: Custom Render with Providers
95
96	Real-world apps rely on Providers (Theme, Auth, Redux, Router). Use a typed custom render utility.
97
98	```typescript
99	// src/test/test-utils.tsx
100	import { render, RenderOptions } from '@testing-library/react';
101	import { ReactElement, ReactNode } from 'react';
102	import { ThemeProvider } from 'my-theme-lib';
103	import { AuthProvider } from '../context/auth';
104
105	const AllTheProviders = ({ children }: { children: ReactNode }) => {
106	return (
107	<ThemeProvider theme="light">
108	<AuthProvider>
109	{children}
110	</AuthProvider>
111	</ThemeProvider>
112	);
113	};
114
115	const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
116	render(ui, { wrapper: AllTheProviders, ...options });
117
118	export * from '@testing-library/react';
119	export { customRender as render };
120	```
121
122	---
123
124	## Common Patterns
125
126	### Testing a Form
127
128	```typescript
129	import { render, screen } from './test-utils'; // Custom render
130	import userEvent from '@testing-library/user-event';
131	import { vi } from 'vitest';
132	import { LoginForm

People who liked this also viewed

6 picks

Type