When using our skeleton app template, we bundle in a test runner as well as configuration to get you started. We use Jest to run app tests, with configured add-ons for React so that your components may be functionally tested.

Component/Functional Tests

When writing components, you should add a complementary test. Our convention is for the test suite for a given component to be in the same directory as the component itself.

So, for the component src/App.tsx you must add the test suite src/App.test.tsx

When writing React tests, please refer to the react testing library documentation.

Example test suite for src/App.tsx:

import { render, waitFor } from "@testing-library/react";
import App from "./App";

test("renders App component", async () => {
    const { getByText } = render();
    
    await waitFor(() => {
        const buttonElement = getByText(/My App/i);
        expect(buttonElement).toBeInTheDocument();
    });
});
 copy

Unit Tests

Unit test suites follow a similar naming convention and structure to functional tests. For a given service, it's best practice to include a complementary test suite with the same name as the file that contains the service.

So, for the service src/my-service.ts you must add the test suite src/my-service.test.ts

Running Tests

To run all test suites, execute the following:

pnpm test
 copy

To run a specific test suite, add the path as follows:

pnpm test -- ./src/App.test.tsx
 copy

You should see the following output, showing that all test suites have passed successfully:

Code Coverage

To have an app officially accepted by Deskpro you'll need to provide a minimum of 60% code coverage in your test suites. To check your coverage, simply run the following command to generate a coverage report:

pnpm test:coverage
 copy

You should see the code coverage report in your CLI like this:

The command will also build a code coverage report for you, found in ./coverage.