juvers / theme-ui-next

Next.js Front End starter pack

Based on next-theme-ui-example.

Featuring:

• TypeScript
• Next.js
• ThemeUI
• NProgress
• Jest
• Cypress
• react-testing-library

Testing

Jest is configured and ready to use with react-testing-library.

There is a custom rendering setup similar to what is found in the documentation. It wraps all tested components with ThemeUI's ThemeProvider.

The custom test renderer, and all react-testing-library exports are available without using relative imports:

import { render, fireEvent } from 'test-utils';

Make sure you import from 'test-utils' or your tests may crash if the theme is expected.

Emotion snapshots

Because ThemeUI uses emotion under the hood, @emotion/jest's snapshot serializer is included.

Refer to the emotion's testing documentation for more info.

End-to-End tests with Cypress

See the example test and Cypress's documentation to get started.

By default the tests are running in CI with GitHub actions.