{"id":21686792,"url":"https://github.com/jgosmann/frontend-testing","last_synced_at":"2026-04-20T05:34:36.930Z","repository":{"id":141193945,"uuid":"448092665","full_name":"jgosmann/frontend-testing","owner":"jgosmann","description":"An example how to test a front end from front to end.","archived":false,"fork":false,"pushed_at":"2022-01-28T17:17:08.000Z","size":2186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-09T04:05:22.520Z","etag":null,"topics":["chromatic","cypress","example","jest","react","react-testing-library","storybook","testing"],"latest_commit_sha":null,"homepage":"https://jgosmann.github.io/frontend-testing/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgosmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-01-14T20:02:18.000Z","updated_at":"2022-01-28T17:19:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"dc657ac3-f620-449e-b4cd-fd68e7ce9869","html_url":"https://github.com/jgosmann/frontend-testing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jgosmann/frontend-testing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgosmann%2Ffrontend-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgosmann%2Ffrontend-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgosmann%2Ffrontend-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgosmann%2Ffrontend-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgosmann","download_url":"https://codeload.github.com/jgosmann/frontend-testing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgosmann%2Ffrontend-testing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["chromatic","cypress","example","jest","react","react-testing-library","storybook","testing"],"created_at":"2024-11-25T16:33:00.694Z","updated_at":"2026-04-20T05:34:36.904Z","avatar_url":"https://github.com/jgosmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front end testing example\n\nThis repository demonstrates how different parts of a React app can be tested.\nIt is based on [create-react-app],\nand implements a `Collapsible` box component.\nTo ease testing the pure view and logic parts are split\ninto a `CollapsibleView` and `CollapsibleController` component respectively.\n\n## Logic testing\n\nThe logic part is tested using \"classical\" unit testing\nwith the [Jest] test runner.\n\n## View component testing\n\nThe `CollapsibleView` component has a button that should invoke a callback.\nThis also uses a unit test with a mock.\n\nHowever,\nto test the visual appearance,\n[Storybook] and [Chromatic] are used.\nFor each relevant display state,\na story is defined in the Storybook.\nChromatic will screenshot the rendering of each story,\nand does a visual regression test on them.\nAny change needs to be accepted via the web UI.\nTesting the visual appearance has the advantage\nof being independent of the concrete implemantation.\nFor example,\nit does not matter\nwhether elements in the collapsed state are hidden\nwith `height: 0` or `max-height: 0`.\n\nYou can view\n[the repository's Chromatic page](https://chromatic.com/library?appId=61f3c3b7fdae5e003ab73c69\u0026branch=main)\nand [the repository's Storybook](https://main--61f3c3b7fdae5e003ab73c69.chromatic.com/).\n\nNot everything shows in the screenshot, though.\nFor example,\ntitle texts are not covered this way.\nTesting them with a unit test is cumbersome\nbecause each change requires an equivalent change in the unit test.\nThe [Storyshots] addon for storybook gives snapshot tests for the Storybook stories\nwithout additional work.\nThis allows to detect unwanted changes in the markup,\nbut also makes it quick to accept changes.\n\n## Integration\n\nThe integration of the controller and view is tested with Jest.\nIt is similar to the `CollabsibleController` test.\nFor simple components like `Collapsible` it might suffice\nto have just one of these tests.\n\nAnother Storybook story is provided for the integration\nof the `CollapsibleView` and `CollapsibleController`.\nAs visual testing is done already for the view `CollapsibleView`,\nChromatic has been disabled in this test.\nHowever,\none could use [Storybook interactions]\nto test the integrated component.\n\n## End to end\n\nAn end to end test is implement with [Cypress].\n\n# Commands\n\n- Start the app: `npm start`\n- Tests (Jest test runner): `npm test`\n- Storybook: `npm run storybook`\n- Chromatic: `npm run chromatic`\n- End to end tests (Cypress): `npx cypress open`\n\n# License\n\nfrontend-testing is open source software licensed as MIT.\n\nThe React logo (Meta Platforms, Inc.) is licensed under a Creative Commons Attribution 4.0 International license.\n\n[chromatic]: https://www.chromatic.com/\n[create-react-app]: https://create-react-app.dev/\n[cypress]: https://www.cypress.io/\n[jest]: https://jestjs.io/\n[storybook]: https://storybook.js.org/\n[storybook interactions]: https://storybook.js.org/docs/react/essentials/interactions\n[storyshots]: https://www.npmjs.com/package/@storybook/addon-storyshots\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgosmann%2Ffrontend-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgosmann%2Ffrontend-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgosmann%2Ffrontend-testing/lists"}