There are 3 different kinds of testing in this repository:
Unit tests use Jest and @testing-library/react to test the individual components. They serve to give us confidence that the components exported by our package are working as intended, and are a great way to test all the nitty-gritty logic in our components.
Run these with:
yarn test
An important bit to note: our test fail if there is prop-types are violated.
At the moment, this check is performed in the jest.config.setup.files.after.env.js file.
During development, it might be worthwhile to comment out contents of the file while there are weird failures.
- Jest snapshots test the default DOM structure and DOM attributes of a component
- Component API tests
- Jest matchers are the default set of test assertions
@testing-library/jest-domare extra test assertions for DOM elements and accessibility@testing-library/reactqueries are DOM tree traversal methods with accessibility prioritized@testing-library/domevents are DOM events to approximate user interactions on components
Integration tests use Cypress, and serve to give us confidence that our design system site is working properly and is not broken. It's not intended to test the individual components.
Run these in the browser with by first starting the development server:
yarn start
And then in another tab, either:
# To run in the browser
yarn cypress:open
# To run headlessly
yarn cypress:run
Linting rules are used to standardize patterns in the codebase. Run these with:
yarn lint