Testing

Testing

We have evaluated several testing frameworks and have decided to use different testing framework for both FrontEnd and Backend. FrontEnd uses Vitest and Backend uses Jest. More information about our Architecture Decision will be displayed in Architectural Decision Log

-- FrontEnd -- BackEnd

FrontEnd

FrontEnd uses Vitest as its testing framework due to it being a Vite-Native testing Framework. It is a testing framework that is based on Jest but it reuses Vite's Config and plugins.

Why use it?

-- Vitest uses Vite's conig and plugins, making it consistent across the app. -- It is Jest Compatible -- It reruns the related changes that you did. For example, changes on a component only triggers the test that is coupled with. -- Out-of-box ESM, TypeScript and JSX support powered by esbuild.

Installation and Startup

Go to project directory

    cd /path/of/directory

Install Vitest

    npm install -D vitest

Add Vitest in your scripts

    test: Vitest

Create a vitest.config.ts in the root directory of your application.

    import { defineConfig } from 'vitest/config';
    import react from '@vitejs/plugin-react';

    export default defineConfig({
    plugins: [react()],
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './src/tests/setupTests.js',
    },
    });

environment: 'jsdom' simulate a browser-like environment in Node.js using jsdom. This is particularly useful for testing web applications as it provides a DOM implementation. setupFiles: './src/tests/setupTests.js' points to a JavaScript file that contains setup code for your tests. Such as configuring global variables, setting up mock functions, or initializing libraries that are required for your test.

Usage and Example

Testing Health Check Component if it displays NMP API is Healthy and Ready!

HealthCheck.ts

    import { useEffect, useState } from 'react';
    import axios from 'axios';

    const HealthCheck = () => {
    const [status, setStatus] = useState(null);
    useEffect(() => {
        const backEndUrl = import.meta.env.VITE_BACKEND_URL;
        const url = `${backEndUrl}/health`;

        axios
        .get(url)
        .then((response) => {
            console.log('Health Check data:', response.data);
            setStatus(response.data);
        })
        .catch((error) => {
            console.error('Error fetching data:', error);
        });
    }, []);

    return (
        <div>
        <h1>Health Check</h1>
        <h2>{status}</h2>
        </div>
    );
    };

    export default HealthCheck;

HealthCheck.test.ts

    import { vi, describe, expect, it } from 'vitest';
    import { render, screen, waitFor } from '@testing-library/react';
    import axios from 'axios';
    import HealthCheck from '../components/HealthCheck';

    vi.mock('axios');

    describe('HealthCheck Component', () => {
    it('fetches and displays HealthCheck Component response data', async () => {
        // Mocked data returned by the Axios Get request
        const response = 'NMP API is healthy and ready!';

        // Setup the mock to return the mocked data
        vi.mocked(axios.get).mockResolvedValueOnce({ data: response });
        render(<HealthCheck />);
        // Wait for the healthcheck data to be fetched and displayed
        await waitFor(() => {
        expect(screen.getByText('NMP API is healthy and ready!')).toBeInTheDocument();
        });
    });
    });

Backend

-- tba