95 lines
2.4 KiB
Markdown
95 lines
2.4 KiB
Markdown
# Component Testing
|
|
|
|
## Philosophy: Test Behavior, Not Implementation
|
|
|
|
```javascript
|
|
// BAD: Tests internals
|
|
expect(component.state.isOpen).toBe(true);
|
|
|
|
// GOOD: Tests user-visible behavior
|
|
await userEvent.click(getByRole('button', { name: 'Open' }));
|
|
expect(getByRole('dialog')).toBeVisible();
|
|
```
|
|
|
|
## React Testing Library
|
|
|
|
```javascript
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
test('form submission', async () => {
|
|
render(<LoginForm />);
|
|
await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
|
|
await userEvent.type(screen.getByLabelText('Password'), 'secret123');
|
|
await userEvent.click(screen.getByRole('button', { name: /login/i }));
|
|
expect(screen.getByText('Login successful')).toBeInTheDocument();
|
|
});
|
|
```
|
|
|
|
## Vue Test Utils
|
|
|
|
```javascript
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
test('form submission', async () => {
|
|
const wrapper = mount(LoginForm);
|
|
await wrapper.find('input[type="email"]').setValue('test@example.com');
|
|
await wrapper.find('button').trigger('click');
|
|
expect(wrapper.text()).toContain('Login successful');
|
|
});
|
|
```
|
|
|
|
## Angular Testing Library
|
|
|
|
```typescript
|
|
import { render, screen } from '@testing-library/angular';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
test('form submission', async () => {
|
|
await render(LoginFormComponent);
|
|
const user = userEvent.setup();
|
|
await user.type(screen.getByLabelText('Email'), 'test@example.com');
|
|
await user.click(screen.getByRole('button', { name: /login/i }));
|
|
expect(screen.getByText('Login successful')).toBeInTheDocument();
|
|
});
|
|
```
|
|
|
|
## Query Priority (Accessibility-First)
|
|
|
|
1. `getByRole` - buttons, links, headings
|
|
2. `getByLabelText` - form fields
|
|
3. `getByPlaceholderText` - inputs
|
|
4. `getByText` - non-interactive elements
|
|
5. `getByTestId` - last resort
|
|
|
|
## Async Patterns
|
|
|
|
```javascript
|
|
await screen.findByText('Loaded');
|
|
await waitForElementToBeRemoved(() => screen.queryByText('Loading'));
|
|
await waitFor(() => expect(screen.getByText('Done')).toBeInTheDocument());
|
|
```
|
|
|
|
## Mocking
|
|
|
|
```javascript
|
|
vi.mock('./api', () => ({
|
|
fetchUser: vi.fn().mockResolvedValue({ name: 'John' })
|
|
}));
|
|
|
|
render(
|
|
<UserContext.Provider value={{ user: mockUser }}>
|
|
<Profile />
|
|
</UserContext.Provider>
|
|
);
|
|
```
|
|
|
|
## Vitest Browser Mode
|
|
|
|
```typescript
|
|
// vitest.config.ts - more accurate than jsdom
|
|
export default defineConfig({
|
|
test: { browser: { enabled: true, name: 'chromium', provider: 'playwright' } },
|
|
});
|
|
```
|