{"id":21051439,"url":"https://github.com/aiherrera/reactnative-template-starter","last_synced_at":"2026-02-14T03:35:44.531Z","repository":{"id":180543222,"uuid":"665269488","full_name":"aiherrera/reactnative-template-starter","owner":"aiherrera","description":"Demo repository for teaching how to test in RN","archived":false,"fork":false,"pushed_at":"2024-10-12T10:17:48.000Z","size":375,"stargazers_count":0,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-01T01:54:45.059Z","etag":null,"topics":["jest","react-native","react-native-testing-library"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aiherrera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-11T20:33:00.000Z","updated_at":"2025-09-18T02:17:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8c83fe4-2bff-4db4-a118-186df1568f86","html_url":"https://github.com/aiherrera/reactnative-template-starter","commit_stats":null,"previous_names":["aiherrera/reactnative-template-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aiherrera/reactnative-template-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiherrera%2Freactnative-template-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiherrera%2Freactnative-template-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiherrera%2Freactnative-template-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiherrera%2Freactnative-template-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aiherrera","download_url":"https://codeload.github.com/aiherrera/reactnative-template-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aiherrera%2Freactnative-template-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29434150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T03:34:37.767Z","status":"ssl_error","status_checked_at":"2026-02-14T03:34:09.092Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","react-native","react-native-testing-library"],"created_at":"2024-11-19T15:56:55.454Z","updated_at":"2026-02-14T03:35:44.526Z","avatar_url":"https://github.com/aiherrera.png","language":"Java","readme":"This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).\n\n# 🆕 Last added components\n\n\u003c!-- COMPONENT_LIST --\u003e\n\n# Getting Started\n\n\u003e **Note**: This repository it's been created to show how to configure a testing environment for React Native using Jest and React Native Testing Library.\n\n## 📚 How to use this repository\n\n1. [Fork](https://github.com/aiherrera/reactnative-template-starter/fork) this repository\n2. Check the available components in the `Last added components` section above 👆\n3. Read the [Card Information](https://github.com/users/aiherrera/projects/10) from the project, to get an idea of the business rules (each component would have attached the link to it's own card)\n4. Develop your test cases for the component(s)\n5. Test cases for each component must be inside the `__tests__` folder following the same structure that is inside of `src/components`\n6. Create a `branch` for each test use case within the following format `github_username/component_name` ex: `aiherrera/button`, `aiherrera/link`, etc\n7. Raise a PR to the [develop](https://github.com/aiherrera/reactnative-template-starter/tree/develop) branch with your changes\n\n\n# Steps for setting the project\n\n## 🚀 Step 1: Launch the Metro Server\n\nFirst, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.\n\nTo start Metro, run the following command from the _root_ of your React Native project:\n\n```bash\n# using npm\nnpm start\n\n# OR using Yarn\nyarn start\n```\n\n## 📱 Step 2: Run your Application in a device or emulator\n\nLet Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:\n\n### For Android\n\n```bash\n# using npm\nnpm run android\n\n# OR using Yarn\nyarn android\n```\n\n### For iOS\n\n```bash\n# using npm\nnpm run ios\n\n# OR using Yarn\nyarn ios\n```\n\nIf everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.\n\nThis is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.\n\n## 🛠️ Step 3: Testing zone\n\nThese are the steps followed to configure the testing environment:\n\n### Install required libraries\n\n```bash\nyarn add --dev jest @testing-library/react-native @testing-library/jest-native\n```\n\n### Add types for Jest\n\n```bash\nyarn add --dev @types/jest\n```\n\n### Add the matchers to your jest.config.js file:\n\n```javascript\nmodule.exports = {\n  preset: 'react-native',\n  + setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],\n}\n```\n\n### Create a component button\n\n```javascript\n// src/components/button.tsx\nimport React, { FC } from 'react'\nimport { TouchableOpacity, Text } from 'react-native'\n\ninterface MyButtonProps {\n  text?: string;\n}\n\nconst MyButton: FC\u003cMyButtonProps\u003e = ({ text = 'Press Me' }) =\u003e {\n  return (\n    \u003cTouchableOpacity\u003e\n      \u003cText\u003e{text}\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n  )\n}\n\nexport default MyButton\n```\n\n### Create a test for the component button\n\n```javascript\n// __tests__/components/button.test.tsx\nimport 'react-native'\nimport React from 'react'\nimport { render } from '@testing-library/react-native'\nimport MyButton from '../../src/components/button'\n\ndescribe('\u003cMyButton /\u003e', () =\u003e {\n  it('should render the button text', () =\u003e {\n    const { getByText } = render(\u003cMyButton text=\"Press Me\" /\u003e)\n\n    const label = getByText('Press Me')\n    expect(label).toBeTruthy()\n  })\n})\n```\n\n### Configure scripts in package.json\n\n```json\n\"scripts\": {\n    \"test\": \"jest\",\n    \"test:watch\": \"jest --watch\",\n    \"test:coverage\": \"jest --coverage\"\n  },\n```\n\n## ✍️ Developer notes:\n\n- `test` will run all the tests once\n- `test:watch` will run all the tests and will watch for changes\n- `test:coverage` will run all the tests and will show the coverage\n\n💡 Remember that when using the `--watch` flag, you are provided with several options to interact within the test runner:\n\n![Alt text](./readme/runner-options.png)\n\n## 🤓 Learn More\n\nTo learn more about React Native, take a look at the following resources:\n\n- [React Native Website](https://reactnative.dev) - learn more about React Native.\n\n- [Jest](https://jestjs.io/) - learn more about Jest.\n\n- [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) - learn more about React Native Testing Library.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faiherrera%2Freactnative-template-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faiherrera%2Freactnative-template-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faiherrera%2Freactnative-template-starter/lists"}