README.md

example: tailwind

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

Installation

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

npm install

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.