MetaMask / MetaMask/metamask-design-system
Set up React Testing Library Best Practices Documentation for React and React Native Component Libraries
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
This task is to create comprehensive documentation outlining best practices for using React Testing Library in both React and React Native component libraries within the `metamask-design-system` monorepo. The documentation will serve as a guide for writing effective, maintainable tests for components across both platforms, ensuring consistent testing practices and high test quality.
### **Technical Details**
- Document the setup and configuration of React Testing Library for both React and React Native projects in the monorepo.
- Provide examples for:
- Testing component rendering in both React and React Native.
- Handling user interactions (e.g., clicks, gestures, form inputs).
- Using queries such as `getBy`, `queryBy`, and `findBy` across both platforms.
- Writing accessible tests and ensuring accessibility compliance.
- Mocking APIs, events, and external dependencies.
- Detail best practices for organizing tests, structuring assertions, and maintaining readability and clarity across both libraries.
- Instructions on integrating React Testing Library with CI pipelines for both React and React Native.
- Address any differences or nuances in testing React Native components compared to React (e.g., mobile-specific interactions and components).
- Guidance on using additional testing tools like Jest and Mock Service Worker (MSW) for both React and React Native contexts.
### **Acceptance Criteria**
- A unified set of best practices for testing React and React Native components is documented.
- Clear instructions for setting up and using React Testing Library in both environments.
- Examples of common test scenarios (rendering, user interactions, etc.) for both React and React Native are provided.
- Guidelines on integrating React Testing Library with CI pipelines for both environments.
- Documentation is reviewed and approved by the engineering team.
### **References**
- [React Testing Library documentation](https://testing-library.com/docs/react-testing-library/intro/)
- [React Native Testing Library documentation](https://testing-library.com/docs/react-native-testing-library/intro/)
- [MetaMask coding guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md)
Contributor guide
Research direction
Begin by inspecting the monorepo’s existing React and React Native test setup, then compare the linked React Testing Library and React Native Testing Library references. Cover the listed rendering, interaction, query, accessibility, mocking, organization, and CI topics with examples for both platforms; completion requires engineering review and approval.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native
- Domain
- ci-cd, documentation, mobile-dev, testing
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100