tailwind

example: tailwind

Component testing when using Tailwind CSS, example created following the blog post Using Tailwind CSS With React and Tailwind's own documentation.

Usage

1. Make sure the root project has been built .

# in the root of the project
npm install
npm run build

2. Run npm install in this folder to symlink the cypress-react-unit-test dependency.

# in this folder
npm install

3. Start Cypress

npm run cy:open
# or just run headless tests
npm test

Run tests

You can execute npm run build:css to let Tailwind generate src/styles/main.generated.css or run Cypress, since this step is set as a pre-test step inside package.json.

npm run cy:open
# or just run headless tests
npm test

Tests

• src/App.cy-spec.js tests component src/App.js that uses Tailwind style bundle src/styles/main.generated.css

• src/playground.cy-spec.js imports the CSS directly and shows off different available classes, allowing you to experiment with them from the test

Note: each test uses cy.screenshot at the end to save an image to cypress/screenshots folder.

See also

When working with styles, we recommend visual testing using one of 3rd party visual plugins. See a few visual testing examples in this repository.