Introduction and tooling
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"
}
}
This page is a preview of The newline Guide to Building a Company Component Library