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:
kraftdorian / react-ts-rollup-starter-lib
React TypeScript components library built with rollup.js from scratch.
Component library starter template
Used libraries
Notes
This is a repository created for learning purposes, specifically to use one of my articles which you can find here.
Thanks for reading!
Article cover photo by Michael Dziedzic on Unsplash
Top comments (0)