MetaMask / MetaMask/metamask-design-system

Set up React Testing Library Best Practices Documentation for React and React Native Component Libraries

Open
#12 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.