Skip to content

Add unit tests with Jest and React Testing Library#1

Open
bigweavergammainternal[bot] wants to merge 1 commit intomainfrom
dev-20260127-005826
Open

Add unit tests with Jest and React Testing Library#1
bigweavergammainternal[bot] wants to merge 1 commit intomainfrom
dev-20260127-005826

Conversation

@bigweavergammainternal
Copy link
Copy Markdown

This pull request was generated by @kiro-agent 👻

Comment with /kiro fix to address specific feedback or /kiro all to address everything.
Learn about Kiro autonomous agent


Summary

This PR implements a comprehensive unit testing infrastructure for the amplify-next-template Next.js application using Jest and React Testing Library.

Changes

Testing Framework Setup:

  • Added Jest configuration (jest.config.ts) with Next.js integration using next/jest
  • Configured jsdom test environment for React component testing
  • Set up module path aliasing (@/*) to match the project's TypeScript configuration
  • Added Jest setup file (jest.setup.ts) with @testing-library/jest-dom matchers
  • Updated tsconfig.json to include test files in TypeScript compilation

App Component Tests (__tests__/app/page.test.tsx):

  • Added rendering tests for the main heading, "new" button, success message, and tutorial link
  • Implemented tests for listTodos function behavior including:
    • Subscription initialization via observeQuery on mount
    • State updates when subscription receives todo data
    • Handling empty todo lists from subscription
    • Handling subscription updates with new todos
  • Implemented tests for createTodo function behavior including:
    • Prompt opening when "new" button is clicked
    • Creating todos with user-entered content
    • Handling cancelled prompts (null content)
    • Handling empty string input
  • Added user interaction tests for multiple todo creations

RootLayout Component Tests (__tests__/app/layout.test.tsx):

  • Added rendering tests for children, HTML lang attribute, and Inter font className
  • Implemented structure tests for HTML document hierarchy
  • Added metadata export tests for title and description

Amplify Backend Configuration Tests:

  • Added auth resource tests (__tests__/amplify/auth.resource.test.ts) for email login configuration
  • Added data resource tests (__tests__/amplify/data.resource.test.ts) for:
    • Schema configuration with Todo model
    • Authorization modes (apiKey with 30-day expiration)
    • Schema type exports

Package Dependencies:

  • Added @testing-library/jest-dom for extended DOM matchers
  • Added @testing-library/react for React component testing
  • Added @types/jest for TypeScript type definitions
  • Added jest, jest-environment-jsdom, and ts-jest for test execution

NPM Scripts:

  • Added test script for running tests
  • Added test:watch script for watch mode
  • Added test:coverage script for coverage reports

Impact Assessment

  • Establishes testing infrastructure for ongoing development quality assurance
  • Follows React Testing Library best practices with proper mocking of Amplify dependencies
  • Enables CI/CD integration with Jest test runner

Testing

  • All unit tests pass successfully
  • Tests are isolated with proper mocking of external dependencies (aws-amplify, next/font)
[This description was generated by Claude]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant