Skip to content

Latest commit

 

History

History
 
 

testing

README.md

Testing EUI components

All components should have, at minimum, unit tests for each prop. Please see the Jest unit test documentation for guidelines on testing best practices.

Cypress tests are optional and typically only written for more complex components, or where real-browser DOM and interactions are needed.

Future tooling plans for EUI tests

Enzyme to RTL migration

EUI is currently in the process of converting our Jest tests from Enzyme to React Testing Library, as Enzyme appears to have no intention of supporting React 17+.

Storybook

EUI currently does not yet use Storybook to generate either snapshots or visual QA testing. However, plans are in the works to convert our current props snapshot tests to Storybook.

Visual diffing

EUI currently does not use visual snapshots/screenshot regression testing or plans to implement visual diffing.

Code coverage

Code coverage is a tool intended to help devs quickly find lines/branches that still need to be covered and determine test cases to write. Currently, EUI does not yet use code coverage %s in CI for automated checks or reports.

Jest coverage reports

Jest code coverage reports can be generated by running yarn test-unit with the --coverage flag. Generated HTML reports are output to the reports/ folder.

To view the reports, you can either drag the reports/jest-coverage/index.html file into a browser window, or in a terminal, run open reports/jest-coverage/index.html from the EUI project root.

Cypress coverage reports

Cypress has been configured to automatically output Cypress code coverage to the reports/cypress-coverage folder. If you would prefer to turn this off locally, you can add the --env coverage=false flag when running your your cypress commands.

To view the reports, you can either drag the reports/cypress-coverage/index.html file into a browser window, or in a terminal, run open reports/cypress-coverage/index.html from the EUI project root.

Combined Jest & Cypress coverage reports

If you're working on a component that has both Cypress and Jest tests, we have a command that allows you to combine the results of both coverage reports.

  1. Setup: On the component(s) you're looking for final coverage #s for,
  • Ensure you have already run yarn test-unit --coverage to generate a Jest report
  • Ensure you have already run yarn test-cypress to generate a Cypress report
  1. Run yarn combine-test-coverage
  • This should automatically open a browser window with reports/combined-coverage/index.html