How to Test React Component Libraries With ts-jest
This lesson preview is part of the The newline Guide to Building a Company Component Library course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Building a Company Component Library, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:09] Testing a component library is similar to application testing. Our tests should resemble how consumers will actually use our library.
[00:10 - 00:21] Testing is a complex topic that deserves its own course, and we will just be scratching the surface here. In this module, we will be setting up a basic testing environment using React Testing Library and TS JEST.
[00:22 - 00:35] 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 preprocessor that ensures JEST is able to consume and type check our tests.
[00:36 - 00:46] Since TS JEST is a preprocessor, for JEST, the setup is similar to a non-touchg rip codebase. To start, let's add JEST and TS JEST as development dependencies.
[00:47 - 01:01] We'll also include the type declarations for JEST as well. While those are installing, let's include a new JEST config.
[01:02 - 01:21] We will want to include a default preset using TS JEST. To make it a little bit easier to run our testing here, let's replace the existing test, a subscript, to just call JEST.
[01:22 - 01:34] Next, we're going to be installing React Testing Library with an additional utility package, JESTON. JESTON provides some custom matches that allow us to write assertions in a clear and reliable way.
[01:35 - 01:48] Let's add the new dependencies with npm install saved_dev. We're going to install @testing_library_react and @testing_library_justON.
[01:49 - 02:04] To make those JESTON assertions available within JEST, let's create a new JEST setup.ts file. We will import @testing_library_justON.
[02:05 - 02:23] To make this a part of the environment within JEST, let's add this as a setup file. To help the type completion, let's include the JEST setup file in our TS config .
[02:24 - 02:36] If we include, we can reference JEST setup.ts. This now gives us a full test script environment to start testing.
[02:37 - 02:44] Let's commit our changes, save our progress, and in the next lesson, we're going to be creating a test suite for our button component.