unit-tests-generic.mdc

---
description: USE WHEN writing unit tests for components in template packages
globs: ["packages/template-*/*/components/**/*.test.{js,jsx,ts,tsx}"]
alwaysApply: false
---
USE WHEN writing unit tests for components in template packages

# 🧪 Generic Component Test Rules

# CRITICAL: AI Attribution Requirements
* **IMPORTANT** All individual test methods generated or modified by Cursor MUST include an AI attribution comment directly above the test stating the following: 
"DO NOT REMOVE THIS COMMENT! This test was generated by Cursor". The comment should go on the test method and not the test class. Failure to add an AI Attribution Comment will be considered a failure of test generation.
* The AI attribution comment MUST include a comment declaring the LLM model that was used in writing the test on its own line.

*Sample AI Attribution Comment*
```
/*
 * DO NOT REMOVE THIS COMMENT! This test was generated by Cursor 
 * This test was generated with the following model: Claude 3.5 Sonnet
 */
test('renders component correctly', () => {
    // test implementation
})
```

## Structure & Best Practices
- Use `describe` blocks to group tests, `test` for individual cases
- Use `beforeEach` for setup, clear mocks after each test
- **Arrange** → **Act** → **Assert** pattern
- One behavior per test, clear descriptive names

## Queries & Assertions
- Prefer `getByRole`, `getByLabelText`, `getByTestId`
- Use `expect().toBeInTheDocument()`, `.toHaveBeenCalledTimes()`, etc.
- For async: `await waitFor(() => { ... })`

## Mocking
- `jest.fn()` for handlers, `jest.mock()` for modules
- Clear mocks/storage after each test

```js
describe('MyComponent', () => {
    beforeEach(() => jest.clearAllMocks())
    
    test('renders and handles interaction', async () => {
        const mockHandler = jest.fn()
        render(<MyComponent onClick={mockHandler} />)
        
        await userEvent.click(screen.getByRole('button'))
        expect(mockHandler).toHaveBeenCalledTimes(1)
    })
})
```

## Running Tests
After creating unit tests, **ALWAYS run the tests** to verify they pass and provide feedback on test results.

### Command Format:
```bash
cd packages/<package-name> && npm run test -- '<relative-path-to-test-file> --coverage=false'
```

### Examples:
```bash
# Run specific test file from packages directory
cd packages/template-retail-react-app && npm run test -- 'app/components/drawer-menu/drawer-menu.test.js --coverage=false'
```

### After Running Tests:
- Report if tests **pass** or **fail**
- If tests fail, provide the error messages and fix any issues
- Confirm test coverage is appropriate for the component's core functionality
- Suggest any additional tests if critical functionality is missing