MetaMask / MetaMask/metamask-design-system

React Native UI: Add Unit Testing to Component Template Using Testing Library in MetaMask Design System Monorepo

Open
#25 1 comment 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**

Add unit testing functionality to the component template in the MetaMask design system monorepo. This will involve setting up tests using the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to ensure that all UI components are covered by unit tests during development.

### **Technical Details**

- Integrate [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) into the component template within the MetaMask design system monorepo.
- Create example unit tests for the existing component template as a reference for future component development.
- Update the component template to automatically include unit tests for new components.
- Ensure that unit tests are included in the CI pipeline for continuous testing and coverage.
- Provide documentation or examples on writing unit tests for components in the design system.

### **Acceptance Criteria**

- React Testing Library is successfully integrated into the component template.
- New components created using the template automatically include a basic unit test.
- Unit tests should run automatically as part of the CI process, blocking code with failing tests from being merged. - Already does goo to check
### **References**

- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)

Contributor guide

Open the contributing guide

Research direction

Locate the component template and the existing CI configuration, then review how components and tests are currently generated and run. Add the requested React Testing Library examples and template coverage, ensure new components include a basic test, and verify that CI runs the tests and blocks failures; the issue notes that CI may already support this, so confirm that first.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
ci-cd, design, frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.