Testing Infrastructure: - Configure Jest with Next.js integration and TypeScript support - Add React Testing Library with proper setup for Next.js components - Install and configure Playwright for E2E testing - Create jest.setup.ts with mocks for Next.js router and browser APIs - Add CSS module mocking with identity-obj-proxy Unit Tests: - Create LoadingFallback component tests covering all 5 variants - Create tracking API tests for data transformation logic - Test createActivity, getActivities data structure conversions - Verify frontend (timestamp/data) to backend (startedAt/metadata) mapping E2E Tests (Playwright): - Create comprehensive tracking flow tests - Test navigation to all tracker pages (feeding, sleep, diaper) - Test homepage Today's Summary display - Test AI Assistant and Analytics navigation - Test feeding, sleep, and diaper tracker UI elements - Configure multi-browser testing (Chrome, Firefox, Safari, Mobile) CI/CD Pipeline (GitHub Actions): - Create automated CI/CD workflow for master/main branches - Run linting on every push and PR - Execute unit tests with coverage reporting - Run E2E tests (Chromium) in CI environment - Build application and upload artifacts - Upload test coverage to Codecov - Upload Playwright test reports as artifacts Test Scripts: - npm test: Run Jest unit tests - npm run test⌚ Run tests in watch mode - npm run test:coverage: Generate coverage report - npm run test:e2e: Run Playwright E2E tests - npm run test:e2e:ui: Run E2E tests with UI mode - npm run test:e2e:headed: Run E2E tests in headed mode Documentation: - Create comprehensive testing guide (tests/README.md) - Document test structure and best practices - Add troubleshooting section for common issues - Include useful commands for debugging tests Coverage Thresholds: - Branches: 70% - Functions: 70% - Lines: 70% - Statements: 70% 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
const nextJest = require('next/jest')
|
|
|
|
const createJestConfig = nextJest({
|
|
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
|
|
dir: './',
|
|
})
|
|
|
|
// Add any custom config to be passed to Jest
|
|
const customJestConfig = {
|
|
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
|
|
testEnvironment: 'jest-environment-jsdom',
|
|
moduleNameMapper: {
|
|
'^@/(.*)$': '<rootDir>/$1',
|
|
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
|
|
},
|
|
collectCoverageFrom: [
|
|
'app/**/*.{js,jsx,ts,tsx}',
|
|
'components/**/*.{js,jsx,ts,tsx}',
|
|
'lib/**/*.{js,jsx,ts,tsx}',
|
|
'!**/*.d.ts',
|
|
'!**/node_modules/**',
|
|
'!**/.next/**',
|
|
'!**/coverage/**',
|
|
'!**/jest.config.js',
|
|
],
|
|
coverageThreshold: {
|
|
global: {
|
|
branches: 70,
|
|
functions: 70,
|
|
lines: 70,
|
|
statements: 70,
|
|
},
|
|
},
|
|
testMatch: [
|
|
'**/__tests__/**/*.[jt]s?(x)',
|
|
'**/?(*.)+(spec|test).[jt]s?(x)',
|
|
],
|
|
}
|
|
|
|
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
|
|
module.exports = createJestConfig(customJestConfig)
|