Uses @percy/cypress to run visual tests for a demo of Material UI date pickers from https://material-ui.com/components/pickers/. Every pull request shows the visual diff (if any) and allows us to confirm that styles and layouts have not changed.
- Make sure the root project has been built .
# in the root of the project
npm install
npm run build
- Run
npm install
in this folder to symlink thecypress-react-unit-test
dependency.
# in this folder
npm install
- Start Cypress
npm run cy:open
# or just run headless tests
npm test
The project was set up using Percy documentation (see support and plugins files). The example spec src/DatePicker.cy-spec.js runs cy.percySnapshot
after confirming the DOM has updated.
mount(<MaterialUIPickers />)
// confirm the DOM has rendered the widget
cy.get('#date-picker-inline').should('have.value', '08/18/2014')
// then take visual snapshot
cy.percySnapshot('Datepicker initial')
cy.get('button[aria-label="change date"]').click()
// confirm the DOM has rendered the widget
cy.get('.MuiPickersBasePicker-container').should('be.visible')
// then take visual snapshot
cy.percySnapshot('Datepicker opened')
If a pull request introduces visual changes, they are caught and shown as a diff
Tip: you can use any visual testing plugin with component testing.