Creating React TypeScript component library - Testing with Jest, Summary
Published: 2021-08-01 22:03:27

## 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:
```bash
npm i --save-dev jest ts-jest @types/jest @testing-library/react
```

Then, we must add the Jest types to tsconfig.json:
```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:
```bash
jest --init
npx jest --init
```

It will ask you a few questions:
![Jest config initialization questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvgmqr7rq25i199dxewn.png)

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

```js
// @/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](https://www.typescriptlang.org/tsconfig#paths) in tsconfig.json:

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

In a separate file, we create a [custom render method](https://testing-library.com/docs/react-testing-library/setup/#custom-render) that can include any stuff we need - store and theme providers, and more, to be used globally in our tests.

```ts
// @/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:

```ts
// @/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:

```bash
npm run test
```

If everything is good, then that's what should appear:
![Jest test command result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yme5pk60q3fxx6qptzbd.png)

## 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:
{% github https://github.com/kraftdorian/react-ts-rollup-starter-lib %}

Thanks for reading!

Article cover photo by <a href="https://unsplash.com/@lazycreekimages?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Michael Dziedzic</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>