DEV Community

Cover image for Creating React TypeScript component library - Testing with Jest, Summary
Damian
Damian

Posted on

Creating React TypeScript component library - Testing with Jest, Summary

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:

Firstly, we need to install these libraries, obviously:

npm i --save-dev jest ts-jest @types/jest @testing-library/react
Enter fullscreen mode Exit fullscreen mode

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

"types": ["jest"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

It will ask you a few questions:
Jest config initialization 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
  }
};
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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();
  });
});
Enter fullscreen mode Exit fullscreen mode

Now, run test command:

npm run test
Enter fullscreen mode Exit fullscreen mode

If everything is good, then that's what should appear:
Jest test command result

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 logo kraftdorian / react-ts-rollup-starter-lib

React TypeScript components library built with rollup.js from scratch.




Thanks for reading!

Article cover photo by Michael Dziedzic on Unsplash

Top comments (0)