Configure Jest for Unit & Integration Testing

[DevonGifford]

Description

The objective is to establish a robust testing environment using Jest, configure folder structures, and set up necessary config files. This task centers on creating a standardized testing setup, ensuring the environment is correctly configured for efficient testing within the application.

Actionable Items

• [x] Jest Setup: Configure Jest for the application testing environment.
• [x] Folder Structure: Establish a standardized folder structure for tests.
• [x] Config Files: Create necessary configuration files (e.g., jest.config.js).
• [x] Environment Confirmation: Validate that the testing environment is correctly set up and operational.

Testing Considerations

• [x] Configuration Verification: Confirm that Jest is configured and operational.
• [x] Environment Check: Verify that the testing environment is correctly set up and functional.

[DevonGifford]

Setting up Jest & RTL - Unit & Integration Testing

Summary

This pull request sets up Jest and React Testing Library (RTL) for unit and integration testing in our application. The goal is to ensure that individual components and their interactions are working as expected.

Click here to see more:

## Changes - Installed `jest`, `jest-environment-jsdom`, `@testing-library/react`, and `@testing-library/jest-dom`. - Created a `jest.config.mjs` file in the project's root directory to configure Jest's behavior. Here's a breakdown: - **nextJest:** Utilized the `next/jest.js` function to craft a Jest configuration compatible with Next.js. - **Shared Configuration:** Unified setup for both SSR and CSR components testing, covering environments and match patterns. - **Client Test Configuration:** Specific setup for testing CSR components using `jest-environment-jsdom` and defining test match patterns. - **Server Test Configuration:** Tailored for testing SSR components using `jest-environment-node` and defining test match patterns. - **Projects:** Separate configurations for CSR and SSR components testing via the `projects` property. - Updated ESLint configuration to support the testing environment. - **Added Packages:** `eslint-plugin-jest-dom` (version `5.1.0`) and `eslint-plugin-testing-library` (version `6.2.0`). - **Updated ESLint Configuration:** Added `plugin:testing-library/react` and `plugin:jest-dom/recommended` to the `extends` array for rules usage. **⚠ Note:** Using version 5.16.5 of `@testing-library/jest-dom`, a stable version for Next.js. Monitoring the official GitHub repository for updates is recommended.

## Environment Testing Tests ✅ Created tests to verify the environment setup: 1. **Test 1: Page Renders Correctly** - Checks rendering of the landing page. 2. **Test 2: Navigation to Login Page** - Verifies navigation to the login page after clicking the “Get Started Now” button. 3. **Test 3: Page Content Rendering** - Validates rendering of the logo, heading, text, and “How it works?” button on the landing page.

## Running Tests 🏃‍♂️ The tests can be run using the `npm run test` command. For continuous testing during development, use `npm run test:watch`. To generate a coverage report, use `npm run test -- --coverage`. #### Quick Usage: 1. **Run All Tests:** `npm run test` 2. **Run Specific Test:** `npm run test -- ` 3. **Watch Mode:** `npm run test:watch` 4. **Code Coverage:** Add `--coverage` flag for coverage report: `npm run test -- --coverage`

Environment Setup Notes

---

1. Install Jest and related libraries: Install jest, jest-environment-jsdom, @testing-library/react, and @testing-library/jest-dom. These libraries are essential for setting up Jest with Next.js and React.

2. Create Jest Configuration File: Create a jest.config.mjs file in your project’s root directory. This file is used to configure Jest’s behaviour.

3. Update ESLint Configuration: Update your .eslintrc.json file to include the newly added plugins for Jest and Testing Library.

Special Note:

Currently using version 5.16.5 of @testing-library/jest-dom, which is an older stable version that works well with Next.js, especially the latest version

It’s worth noting that there are no known vulnerabilities for this version of @testing-library/jest-dom.

However, as with any library, it’s important to keep an eye on the official GitHub repository for any open issues or updates.

Naming, Saving, and Creating Tests

---

Naming and Saving Tests

• Naming Tests:  Test files should be named in a way that clearly describes what they are testing. For example, if you have a component named MyComponent, the test file could be named MyComponent.test.js.

• Saving Tests:  Test files should be saved in a __tests__ directory. This makes it easy to locate them and keeps your project organized.

Creating Tests

The environment has been set up to accommodate both Server-Side Rendered (SSR) and Client-Side Rendered (CSR) components:

// Setup for testing client side rendered components
const clientTestConfig = {
  ...sharedConfig,
  testEnvironment: 'jest-environment-jsdom',
  testMatch: ['**/__tests__/*components.test.tsx','**/__tests__/page-*']
};

// Setup for testing server side rendered components
const serverTestConfig = {
  ...sharedConfig,
  testEnvironment: 'jest-environment-node',
  testMatch: ['**/__tests__/*.server.test.tsx']
};

• Server-Side Rendered (SSR) Components:  To test SSR components, you can use the render function from @testing-library/react. This function renders your component in a way that simulates how it would be rendered on a server.

• Client-Side Rendered (CSR) Components:  To test CSR components, you can use the render function from @testing-library/react. However, since CSR components may rely on browser APIs, you might need to use a library like jest-environment-jsdom to provide those APIs in your testing environment.

Naming Convention and Its Effect on Testing

The naming convention of your test files affects how Jest identifies and runs your tests. In the configuration above, the testMatch option is used to specify the patterns Jest uses to locate test files.

• For CSR components, Jest looks for test files in the __tests__ directory with a filename that ends with components.test.tsx or starts with page-.

• For SSR components, Jest looks for test files in the __tests__ directory with a filename that ends with .server.test.tsx.

By following these naming conventions, you ensure that Jest correctly identifies and runs your tests based on whether they’re for CSR or SSR components.