Testing

The Ellemment Stack provides comprehensive testing capabilities through multiple testing frameworks and tools.

End-to-End Testing with Playwright

Setup and Configuration

Tests are located in the tests directory. Run tests in development:

npm run test:e2e:dev

Authentication Testing

Use the built-in login fixture for authenticated tests:

import { test, expect } from '@playwright/test'
test('user dashboard', async ({ page, login }) => {
const user = await login()
await page.goto('/dashboard')
await expect(page.getByText(user.username)).toBeVisible()
})

Test Isolation

Tests are automatically isolated with:

• Clean database state
• Auto-user deletion
• Independent environments
• Isolated browser contexts

Example E2E Test

test('user profile flow', async ({ page, login }) => {
  // Login
  const user = await login()
,[object Object],
,[object Object],
// Verify update
await expect(page.getByText('Profile updated')).toBeVisible()
})

Component Testing with Vitest

Configuration

// vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true,
environment: 'happy-dom',
setupFiles: ['./test/setup.ts'],
include: ['./app/**/*.test.{ts,tsx}'],
},
})

Example Component Test

import { render, screen } from '@testing-library/react'
import { describe, test, expect } from 'vitest'
import { Button } from './button'
describe('Button', () => {
test('renders with correct text', () => {
render(<Button>Click me</Button>)
expect(screen.getByText('Click me')).toBeInTheDocument()
})
})

DOM Testing

Using @testing-library/jest-dom for enhanced assertions:

test('accessibility features', () => {
  render(<Button aria-label="Submit">Send</Button>)
const button = screen.getByRole('button')
expect(button).toHaveAccessibleName('Submit')
})

Type Checking

TypeScript Integration

Run project-wide type checking:

npm run typecheck

Editor Setup

1. Install TypeScript plugin
2. Configure tsconfig paths
3. Enable type checking
4. Setup auto-complete

Code Quality Tools

ESLint Configuration

// .eslintrc.js
module.exports = {
  extends: [
    '@remix-run/eslint-config',
    '@remix-run/eslint-config/node',
    '@remix-run/eslint-config/jest-testing-library',
  ],
  rules: {
    // Custom rules
  },
}

Prettier Setup

// prettier.config.js
module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  // Additional options
}

Best Practices

Test Organization

1. Group by feature
2. Maintain test hierarchy
3. Use descriptive names
4. Keep tests focused

Test Coverage

1. Critical paths
2. Edge cases
3. Error scenarios
4. User interactions

Performance

1. Parallel execution
2. Test isolation
3. Resource cleanup
4. Efficient assertions

Maintenance

1. Regular updates
2. Clean test data
3. Shared utilities
4. Documentation

CI/CD Integration

GitHub Actions

name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npm test

For more information about deployment configuration, see the deployment documentation. For monitoring setup, refer to the monitoring documentation.