Content Comparison

🛠️ Testing Frameworks and Tools

Framework Details

...

• Just is the testing framework used

• Babel is used It is used in this project to transform modern JavaScript and TypeScript code for testing purposes

Version Information

...

• Jest: 29.7.0

  • Babel: Core version 7.22.20 with specific presets and plugins for React and TypeScript.

🧰 Setup and Configuration

Installation Instructions

• Prerequisites

  • Node.js installed on your machine.

  • npm (Node Package Manager) available.

• Install Project Dependencies

  • Navigate to the root directory of the project.

  • Run the following command to install all project dependencies, including those required for testing:

    Code Block
    npm install

• Install Jest and Babel Dependencies

  Code Block
  npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

Jest Configuration

Configuration file: jest.config.js

...

These configurations help tailor Jest to work effectively with the project's TypeScript and React code, ensuring a smooth testing process.

Babel Configuration

Configuration file: babel.config.jest.js

...

📒 Test Organization and Structure

Directory Structure

...

root/tests/name.test.tsx or .ts

...

🗒️ Writing Unit Tests

Test Structure

...

The ultimate goal is to gradually migrate from javascript to Typescript the whole project frontend codebase. Thus tests are written in Typescript, so that tests can also benefit from type-safety when anything changes in other files.

• Test Naming Conventions: Provide guidelines on how to name test files and test cases.

• Common Test Patterns: Explain common patterns used in your tests, such as setup and teardown, mocking, and assertions.

A typical test file in this project follows a structured format to ensure clarity and maintainability:

• Imports: Import necessary libraries and components at the beginning of the file. This includes React, testing utilities from @testing-library/react, and any components or modules being tested.

• Mocks: Define any mocks needed for the test. This can include mocking components, functions, or APIs that the component interacts with.

• Setup and Teardown: Use beforeAll, beforeEach, afterAll, and afterEach hooks to set up and clean up any global state or configurations needed for the tests.

• Test Suite: Use describe to group related tests together. This helps organize tests and provides a clear context for each group of tests.

• Individual Tests: Use test or it to define individual test cases. Each test should focus on a single aspect of the component's behavior.

Test Naming Conventions

• Test Files: Name test files to reflect the component or module being tested. For example, if testing a component named CopyButton, the test file should be named CopyButton.test.tsx.

• Test Cases: Name test cases to clearly describe the expected behavior. Use a consistent format, such as "should [do something] when [condition]". For example, "button should be disabled when no content is provided".

Common Test Patterns

• Setup and Teardown: Use beforeEach to reset mocks and any shared state before each test. This ensures that tests do not interfere with each other.

• Mocking: Use jest.mock to mock dependencies that the component interacts with. This can include components, functions, or APIs. In the provided test, the IconButton component and the clipboard API are mocked.

• Assertions: Use assertions to verify that the component behaves as expected. Common assertions include checking if elements are present in the document, if functions are called with the correct arguments, and if the component's state changes as expected.

• Async Testing: Use waitFor to handle asynchronous operations, ensuring that assertions are made after the component has updated.

• Timers: Use jest.useFakeTimers and jest.advanceTimersByTime to test components that rely on timing functions, such as setTimeout.

🏃‍♀️ Running Tests

Command Line Instructions

...

To run tests in different environments

...

, use the following commands. These commands are defined in the package.json under the scripts section, allowing for easy execution of tests in different environments and facilitating efficient local testing.

• Development Environment: By default, running npm test will execute tests in the local development environment.

• Staging Environment: To run tests in the staging environment, use the following command. This sets the environment variable NEXT_PUBLIC_APP_ENV to STG.

  Code Block
  npm run test:stg

• Production Environment: To run tests in the production environment, use the following command. This sets the environment variable NEXT_PUBLIC_APP_ENV to PROD.

  Code Block
  npm run test:prod

• Preferred Local Testing Command: When testing unit tests locally, it is recommended to redirect the output to a log file for easier analysis:

  • For production tests:

    Code Block
    npm run test:prod > jest-output.log 2>&1

  • For staging tests:

    Code Block
    npm run test:stg > jest-output.log 2>&1

This approach captures the test results and console logs in the jest-output.log file, which is particularly useful when dealing with a large number of tests. It allows for easier troubleshooting and review of test outputs compared to viewing them directly in the terminal.

Continuous Integration

The unit tests are integrated into the CI/CD pipeline

...

to ensure code quality and prevent regressions before deploying to staging or production environments.

• Staging Pre-checks: The pre-check-staging.yml file defines a workflow that runs unit tests as part of the pre-checks when a pull request is made to the dev branch. This workflow:

  • Checks out the code and configures AWS credentials.

  • Sets environment variables and fetches secrets from AWS Secrets Manager.

  • Installs dependencies using pnpm.

  • Runs the unit tests using the pnpm run test:stg command.

  • If the tests pass, the workflow proceeds to build, tag, and push the Docker image to Amazon ECR.

• Production Pre-checks: The pre-checks-production.yml file defines a similar workflow for the main branch, running unit tests as part of the pre-checks for production releases. It uses the pnpm run test:prod command to execute tests in the production environment.

• Release Approval: If any of the pre-checks, including unit tests, fail, the release is rejected. Otherwise, the release is approved, ensuring that only thoroughly tested code is deployed.