How We Test Semi Design React Component

Code Coverage React Development

Storybook Landing Page
1

Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Pricing:
- Open Source
In Semi's component development process, we will first start a Storybook project, develop component based on Storybook, and write use cases corresponding to our component API through stories. With these use cases we can browse component styles and test component interactions For example, in the image below, we create a story for the primary type of the Button component, and manually check whether the background color and font color are correct.

#React #React Components #Developer Tools 205 social mentions
jsdom Landing Page
2

jsdom

A JavaScript implementation of various web standards, for use with Node.js - jsdom/jsdom
Pricing:
- Open Source
JSDOM is a pure JS implementation of web standards like DOM and HTML for Node.js. When used with Enzyme, JSDOM emulates the DOM manipulation environment for Enzyme. But there are some limitations like no navigation and layout. JSDOM will return 0 when using layout related functions like getBoundingClientRects and properties like offsetTop .

#Development #Automated Testing #Browser Testing 28 social mentions
Codecov Landing Page

3

Codecov

Develop healthier code using Codecov's leading, dedicated code coverage solution. Try it free

In the workflow above, we finally uploaded the code coverage report to the Codecov platform. Codecov.io provides coverage online viewing, PR comment test coverage reporting, and badge generation. On the Codecov platform we can view the code coverage of each file.

#Code Coverage #Code Quality #Code Analysis 18 social mentions