Testing a component library is similar to application testing. Our tests should resemble how consumers will actually use our library. Testing is a complex topic that deserves its own course and we will just be scratching the surface. In this module we will be setting up a basic testing environment using React Testing Library and ts-jest.

React Testing Library has several guiding principles that help ensure that your tests are as flexible and accurate as possible. ts-jest is a TypeScript pre-processor that ensures Jest is able to consume and type-check our tests.

ts-jest configuration#

Since ts-jest is a pre-processor for Jest, the setup is similar to a non-TypeScript codebase. To start, we will add jest and ts-jest.

npm install --save-dev jest@26 ts-jest@26 @types/jest@26

Next we add a Jest configuration that uses ts-jest as a preset. Create a new jest.config.js file.

touch jest.config.js

// File: jest.config.js

/* eslint-env node */

module.exports = {

  preset: 'ts-jest'

};

Jest is now configured to consume any TypeScript tests we write. We can update our test script in the package.json file to use Jest.

// File: package.json

{

 "scripts": {

    "test": "jest"

  }

}