{"id":20932896,"url":"https://github.com/jferrl/react-testing-strategies","last_synced_at":"2025-07-11T20:34:21.077Z","repository":{"id":54964178,"uuid":"327388673","full_name":"jferrl/react-testing-strategies","owner":"jferrl","description":"A project where we are going to put into practice different strategies to test our React project.","archived":false,"fork":false,"pushed_at":"2021-11-23T16:17:43.000Z","size":915,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T02:24:40.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/jferrl.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}},"created_at":"2021-01-06T17:51:44.000Z","updated_at":"2021-11-23T16:17:46.000Z","dependencies_parsed_at":"2022-08-14T07:31:24.597Z","dependency_job_id":null,"html_url":"https://github.com/jferrl/react-testing-strategies","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jferrl/react-testing-strategies","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrl%2Freact-testing-strategies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrl%2Freact-testing-strategies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrl%2Freact-testing-strategies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrl%2Freact-testing-strategies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jferrl","download_url":"https://codeload.github.com/jferrl/react-testing-strategies/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrl%2Freact-testing-strategies/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264893536,"owners_count":23679506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-18T21:53:42.326Z","updated_at":"2025-07-11T20:34:21.039Z","avatar_url":"https://github.com/jferrl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Testing Strategies\n\n![react-testing-strategies CI](https://github.com/jferrl/react-testing-strategies/workflows/react-testing-strategies%20CI/badge.svg)\n[![codecov](https://codecov.io/gh/jferrl/react-testing-strategies/branch/master/graph/badge.svg?token=NNKwNluuyS)](https://codecov.io/gh/jferrl/react-testing-strategies)\n\n## About The Proyect\n\nThis project has the intention of being a practical guide on how to make an effective testing in a React.js application, covering the testing of the different casuistics from the unit point of view to E2E.\n\n### Built With\n\n* [React](https://reactjs.org/)\n* [Redux](https://react-redux.js.org/)\n* [Jest](https://jestjs.io/)\n* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n* [Cypress](https://www.cypress.io/)\n* [Storybook](https://storybook.js.org/)\n* [Chromatic](https://www.chromatic.com/)\n* [Bootstrap](https://getbootstrap.com)\n\n## Getting Started\n\nif you want to use this project as a playground, you just have to pull locally and start playing.\n\n### Installation\n\n1. Clone the repo\n\n    ```sh\n    git clone https://github.com/jferrl/react-testing-strategies.git\n    ```\n\n2. Install NPM packages\n\n    ```sh\n    npm install\n    ```\n\n3. Run\n\n    ```sh\n    npm run start\n    ```\n\n## How to test a React.js app\n\n### Test Pyramid\n\nRelated Posts:\n\n* [Martin Fowler - TestPyramid](https://martinfowler.com/bliki/TestPyramid.html)\n* [Kent C. Dodds - Static vs Unit vs Integration vs E2E Testing for Frontend Apps](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests)\n* [Kent C. Dodds - Write tests. Not too many. Mostly integration](https://kentcdodds.com/blog/write-tests)\n* [Kent C. Dodds - Common Testing Mistakes](https://kentcdodds.com/blog/common-testing-mistakes)\n* [Mike Wacker - Just Say No to More End-to-End Tests](https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html)\n\n![TestPyramid](https://res.cloudinary.com/kentcdodds-com/image/upload/f_auto,q_auto,dpr_2.0/v1625033466/kentcdodds.com/content/blog/unit-vs-integration-vs-e2e-tests/testing-trophy.png)\n\n### Static testing\n\nCatch typos and type errors as you write/transpile the code.\n\n* Use of TypeScript ([TypeScript](https://www.typescriptlang.org/))\n  \n* Linter (TSLint, ESLint) (pd: TSLint is going to be deprecated, but I like it a lot and I don't want to stop using it :sob:)\n  \n* Configure your proyect with a good set of linting rules [Linting rules](https://github.com/jferrl/react-testing-strategies/blob/master/tslint.json)\n\n#### Create React + TypeScript proyect\n\n[Create React App - Adding TypeScript](https://create-react-app.dev/docs/adding-typescript/)\n\n```sh\n    npx create-react-app my-app --template typescript\n```\n\nor\n\n```sh\n    yarn create react-app my-app --template typescript\n```\n\n### Unit + Integration testing\n\n* Unit: Verify that individual, isolated parts work as expected.\n* Integration: Verify that several units work together in harmony.\n\nMost used testing libraries:\n\n* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n* [Enzyme](https://enzymejs.github.io/enzyme/)\n\n*Projects created with Create React App have out of the box support for React Testing Library*.\n\n\u003e The line between integration and unit tests is a bit fuzzy.\n\u003e You can do to write more integration tests if you stop mocking so much stuff.\n\u003e When you mock something you’re removing all confidence in the integration between what you’re testing and what’s being mocked. (Shallow rendering)\n\u003e Kent C. Dodds \u003chttps://kentcdodds.com/blog/write-tests\u003e\n\nA component can be tested in different ways:\n\n* **Structure**: We test how the component is composed, in this case, verify that the component renders as expected\n* **Behavior**: For example, if a component is clickable, we must test that if one action (click, hover, etc) has been triggered, the associated reaction has been called (call a function, render other component, etc ).\n* **Snapshot**: A snapshot of a component verifies that with the same component input parameters, the dom that is generated when rendering is always the same. In this case, we make sure that what a browser shows will always be the same. Snapshot tests compare the rendered markup of every story against known baselines. This catches markup changes that cause rendering errors and warnings.\n* **Visual**: The look and feel of the component is as expected/defined by UX department\n\n#### Shallow rendering vs full rendering\n\n\u003e The more your tests resemble the way your software is used, the more confidence they can give you.\n\u003e\n\u003e Kent C. Dodds - \u003chttps://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests\u003e\n\nRelated Posts:\n\n* [Kent C. Dodds - Why I Never Use Shallow Rendering](https://kentcdodds.com/blog/why-i-never-use-shallow-rendering)\n* [Kent C. Dodds - Testing Implementation Details](https://kentcdodds.com/blog/testing-implementation-details)\n\n*Why developers use shallow rendering ?*\n\n1) For calling methods in React components\n   * This is a great reason to use shallow rendering, but it's a bad practice for testing react application.\n2) It seems like a waste to render all of the children of each component under test, for every test.\n3) For actual unit testing. Testing composed components introduces new dependencies that might trigger an error while the unit itself might still work as intended.\n\n*Why is testing implementation details bad?*\n\n1) Can break when you refactor application code. False negatives\n2) May not fail when you break application code. False positives\n\n#### Page Object Pattern\n\nA page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML.\nThe basic rule of thumb for a page object is that it should allow a software client to do anything and see anything that a human can.\nPage objects are commonly used for testing, but should not make assertions themselves. Their responsibility is to provide access to the state of the underlying page. It's up to test clients to carry out the assertion logic.\n\n![PageObject](https://martinfowler.com/bliki/images/pageObject/pageObject.png)\n\n* [Martin Fowler - PageObject](https://martinfowler.com/bliki/PageObject.html)\n\n### Visual regresion testing (Storybook + Chromatic)\n\nStorybook is a development tool that helps you build components in isolation and record their states as stories. Stories make it easy to explore a component in all its permutations no matter how complex. They also serve as excellent visual test cases.\n\nOn the other hand, Chromatic is a cloud service for Storybook that aims to bring significant improvements to UI development and testing workflow.\n\n* Shared Storybook instance for teams\n* Documentation\n* Visual regression testing\n* CI support\n\n[Storybook and Chromatic tutorial](https://www.chromatic.com/docs/storybook)\n\n### E2E testing\n\n[Cypress docs](https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements)\n[Cypress example recipes](https://github.com/cypress-io/cypress-example-recipes)\n\n## Available Scripts\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\\\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n## Contributing\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n## Contact\n\nYour Name - [@jferrl](https://twitter.com/jferrl) - jorgeferrerolinacero@gmail.com\n\nProject Link: [https://github.com/jferrl/react-testing-strategies](https://github.com/jferrl/react-testing-strategies)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrl%2Freact-testing-strategies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjferrl%2Freact-testing-strategies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrl%2Freact-testing-strategies/lists"}