This project uses the fork feature in Github for anyone outside of the core maintainers.
We use NVM to manage node versions. Our node version is in the ./nvmrc file. We also assume you have access to our private org on NPM.
Run the following commands to get your local development environment set up.
- Make sure you're using the specified npm version
nvm use- Install all dependencies off of the package-lock.json. (Use
npm iif you're introducing new dependencies. Please note that all dev-dependencies need to be listed on the root package.json as well as the package specific package.json)
npm ci- Builds all the things
npm run build- We use Storybook to develop locally along with Next.js.
npm run storybook- Don't forget to add your component to the kitchen-sink page. You can run
npm run docsite:devto develop and test with the kitchen-sink page. You can only access this page directly viahttp://localhost:3000/kitchen-sink. This page allows us to quickly check that all the components render as expected.
We use Testing Library and/or Storybook's new Interaction feature for Unit & Interaction Testing
This command runs the Jest.
npm run testThis command runs the Storybook Test runner
npm run test-storybookGood resources on testing:
- https://kentcdodds.com/blog/testing-implementation-details
- https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
Avoid writing "render" or "display" tests. Leverage our "Tests" stories in Storybook for this. Those UI tests will be tested in Chromatic.
Create a new component use the following command. It will stub out all the required files using plop-templates.
npm run new-component NewComponentNameYou can create an experimental release for testing by following the release doc