Doin' it Right

To be sure that our component(s) work as expected, we can test them with the Jest and React Testing Library.

I used these references for purposes of this article:

• https://testing-library.com/docs/react-testing-library/setup/
• https://jestjs.io/docs/getting-started

Firstly, we need to install these libraries, obviously:

npm i --save-dev jest ts-jest @types/jest @testing-library/react

Then, we must add the Jest types to tsconfig.json:

"types": ["jest"]

Finally, if we want, we can use the Jest configuration tool.
If the first command doesn't work, you can use the second one:

jest --init
npx jest --init

It will ask you a few questions:

Done! It created a lot of config options for us, but these ones will suffice for our purposes:

// @/jest.config.js
module.exports = {
  moduleDirectories: [
    "node_modules",
    "src"
  ],
  moduleFileExtensions: [
    "js",
    "ts",
    "tsx",
    "json",
    "node"
  ],
  roots: [
    "src"
  ],
  testEnvironment: "jest-environment-jsdom",  // Use browser-like testing environment
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  testPathIgnorePatterns: [
    "\\\\node_modules\\\\"
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"  // That one tells Jest to use ts-jest when dealing with TypeScript files
  }
};

Around the World (or the Project?)

If we want to be able to access our basic setup of React Testing Library easily, we can make use of TypeScript paths configuration in tsconfig.json:

"baseUrl": "src",
"paths": {
  "test-setup": ["test-setup"]
}

In a separate file, we create a custom render method that can include any stuff we need - store and theme providers, and more, to be used globally in our tests.

// @/src/test-setup.tsx
import React, { FC, ReactElement } from 'react';
import { render, RenderOptions } from '@testing-library/react';

// Here we can set all providers for themes, stores and other stuff
const AllTheProviders: FC = ({ children }) => {
  return <div>{children}</div>;
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };

Voyager (through the component logic)

As we have completed the configuration, we can write a test for the Component:

// @/src/index.test.tsx
import React from 'react';
import { render } from 'test-setup';

import { Basic as Component } from './index.stories';

describe('Component', () => {
  it('renders without crashing', () => {
    const component = render(<Component />);
    expect(component).toBeTruthy();
  });
});

Now, run test command:

npm run test

If everything is good, then that's what should appear:

Summary

This article concludes the "Creating React TypeScript component library with rollup.js from scratch" series.

There are still a lot of things that could be made in our awesome component library, such as:

• installing Styled Components,
• adding husky/yorkie with precommit git hook that uses lint-staged to format changed source files with prettier,
• exploring how we can publish our library to npm.

However, I believe, now as we have our basic project, it's not a challenge for you.

You can find the finished repository here, in case of any doubts:

Thanks for reading!

Article cover photo by Michael Dziedzic on Unsplash