Test Framework ‐ Jest React Testing Framework

The project follows the industry standards with Jest for component testing which is paired with React Testing Library (@testing-library/react) for nice UI selectors that work with React. The tests are run on the CI before merge, and it's a good idea to have new tests for any new functionality we add. We also use @testing-library/user-event for simulating realistic user events.

Examples

• NewEPubModal.test.js is a good example to look at if you're starting with test cases. It has an example of mocking, varying props, selectors and checking for UI components. Originally introduced in PR #802.
• InstructorList.test.js covers user-event based interactions based on keyboard typing and mouse clicks that refresh the screen

Helpful Links

• https://jestjs.io/docs/using-matchers - jest basics
• https://blog.logrocket.com/testing-react-apps-jest-react-testing-library/ - intro tutorial on jest + react
• https://stackoverflow.com/a/62765143 - where to keep test files
• https://testing-library.com/docs/queries/about/ - different types of queries within react testing library
• https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-get-variants-as-assertions - tips from the library creator
• https://testing-library.com/docs/dom-testing-library/api-accessibility - tests for accessibility features
• https://robertmarshall.dev/blog/react-component-props-passed-to-child-jest-unit-test/ - how to mock child components (only if needed, but sometimes it can get quite complicated to test child components)
• https://testing-library.com/docs/user-event/intro - simulating realistic user interactions
• https://jestjs.io/docs/asynchronous - async tests
• https://kentcdodds.com/blog/testing-implementation-details - Testing overall behavior and content over testing integration details (helped a lot by React Testing Library)