Unit testing with Jest

Introduction

Concierge tool supports unit testing of webmodules. Those can be written in TypeScript using Jest as test runner and React Testing Library for testing React components.

Jest framework documentation: https://jestjs.io/docs/en/getting-started

React Testing Library documentation: https://testing-library.com/docs/react-testing-library/intro

Setting up test configuration for a module

Run the ngv build and ngv test:prepare commands and it will create everything using Concierge tool. Test files should be created in the code/src/test/jest directory and match the *.test.[tsx|ts] filename pattern.

Tests can be run by running the ngv test command in the webmodule’s directory

Basic test structure

Below find general structure of tests for webmodules:

// imports

describe('name of test suite', () => {

    // setup of consts

    it('test case 1', () => {
      //given-when-then
    })

     it('test case 2', () => {
       //given-when-then
     })
});

describe creates a block that groups together several related tests with tests invoked in a callback method.

it defines one test case

Testing component using React Testing Library

import '@testing-library/jest-dom';
import { render, fireEvent, screen } from '@testing-library/react';

it('test description', () => {
    // Given
    const props = { ... };

    // When
    render(<TestComponent {...props} />);
    fireEvent.click(screen.getByText('Load test data'));

    // Then
    expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!');
})

More examples (samples with code)

  • Testing asynchronous code with Sabre’s interfaces

~srw-sdk/redapp/referenceplugins/com.sabre.redapp.example3.web.wf.extension/web-src/com-sabre-redapp-example3-web-wf-extension-web-module/src/tests/jest/services/SampleExtPointAfterIssueTicketCmd.test.ts