I was recently continuing to develop the Kindle UI library and thought it was time to write some tests, so I decided to use the Mocha testing scheme (to try something new).
(This paragraph is generated by GPT 👉) During the development process, it is very important to ensure the accuracy Testing is one of the effective ways to achieve this, especially in JavaScript development. In React application development, Mocha and Chai are two very popular testing frameworks. This article explains how to use Mocha and Chai to test React applications.
Why not use the official Jest tests recommended by react?
Jest was originally designed for testing react apps. Compared to Jest, Mocha is more flexible (the latter can and must be additionally configured, while the former works out of the box), runs in both browser and node environments, and supports complex statements such as
Mocha itself does not support JSX, so we need to install a few dependencies.
yarn add mocha -D
# Babel Plugins
yarn add -W -D @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/register
# Used to render react components, please select corresbonding version which should be same with react.
yarn add [email protected] -D -W
Note: If you are installing test dependencies in the workspace root (the recommended practice), remember to add the -W parameter.
Configuring Mocha
Create a .mocharc.js file in the project root directory with the following contents.
For more information about the usage of react-test-renderer, you can refer to the official documentation.
Some common testing scenarios are listed here for reference.
Check component type
import * as React from "react";
import { expect } from "chai";
import renderer from "react-test-renderer";
// It is recommended to use the package processed with "npm link" to ensure that it is close to the actual scenario.
import { ListItem } from "@kindle-ui/core";
describe("<ListItem />", () => {
describe("prop: component", () => {
it("renders a div", () => {
const component = renderer.create(<ListItem />);
expect(component.toTree().rendered).to.have.property("type", "div");
});
it("renders a link", () => {
const component = renderer.create(
<ListItem component="a" href="#" />
);
expect(component.toTree().rendered).to.have.property("type", "a");
});
});
});
The official testing library provided by react is rather limited, for example, we can't test whether an element is visible or not, and we can't simulate a user operating the page.
So, we can use @testing-library/react to improve it further.
Note that there is no document object in the node environment, so we need to simulate one using the JSDom library.