{"id":17677759,"url":"https://github.com/adamslack/react-ui-testing-workshop","last_synced_at":"2026-01-08T16:06:20.128Z","repository":{"id":122723263,"uuid":"322279950","full_name":"AdamSlack/react-ui-testing-workshop","owner":"AdamSlack","description":"A Collection of examples and discussion points on testing React UI at various levels.","archived":false,"fork":false,"pushed_at":"2021-01-19T13:25:21.000Z","size":668,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-05T20:06:09.239Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/AdamSlack.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":"2020-12-17T11:53:48.000Z","updated_at":"2021-02-20T22:20:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"7e4b0483-d1ce-4ea7-8761-a7119099d76c","html_url":"https://github.com/AdamSlack/react-ui-testing-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamSlack%2Freact-ui-testing-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamSlack%2Freact-ui-testing-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamSlack%2Freact-ui-testing-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamSlack%2Freact-ui-testing-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdamSlack","download_url":"https://codeload.github.com/AdamSlack/react-ui-testing-workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246358251,"owners_count":20764366,"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-10-24T07:41:47.768Z","updated_at":"2026-01-08T16:06:20.075Z","avatar_url":"https://github.com/AdamSlack.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React UI Testing Workshop\nA Collection of examples and discussion points on testing React UI at various levels.\n\n## Examples\n\nThis repo provides a series of practical examples of UI components. You can view each component using story book as well. Each component comes with a set of tests as well as a `README` that attempts to convey the thoughts behind how you may want to approach writing the tests\n\n### Unit Testing a simple component: [InfoBox](https://github.com/AdamSlack/react-ui-testing-workshop/tree/main/sandbox/src/components/InfoBox)\n\nA Small component that renders 3 items in a list. Despite being so simple it sill has `42` tests!\n\n### Unit Testing short form: [UserLoginForm](https://github.com/AdamSlack/react-ui-testing-workshop/tree/main/sandbox/src/components/UserLoginForm)\n\nReally is just a more simple version of the [UserDetailsForm](https://github.com/AdamSlack/react-ui-testing-workshop/tree/main/sandbox/src/components/UserDetailsForm). There are two input fields tested here with minimal validation and a `submitHandler` prop.\n\n### Unit Testing a slightly longer form: [UserDetailsForm](https://github.com/AdamSlack/react-ui-testing-workshop/tree/main/sandbox/src/components/UserDetailsForm)\n\nThis short form handles user inputs for 4 different fields. It shows to use react-testing-lib to interact with a rendered component that has various field validation rules\n\n### Unit Testing a page composed of other components: [UserLoginPage](https://github.com/AdamSlack/react-ui-testing-workshop/tree/main/sandbox/src/components/UserLoginPage)\n\nA component that is built from the `UserLoginForm` and the `UserDetailsForm` components as well as utilising some 'services' to make http requests. It demonstrates some of the more practical aspects of mocking that you may wish to carry out.\n\n## How To Use\n\nA `README` acompanies each component and its tests. It is recommended that you have the relevant `README` to hand whilst going through a components implementation and tests. A story is provided for each component so you can interact with the component as well.\n\nThere is no 'web app' as such here, only a collection of components that you could hypothetically use in an application. As such, there is no real reason to `yarn start` this application. Instead you should use `storybook` and `jest` to explore the components and tests.\n\n### Tests\n\nYou can run the test suite using Yarn. Stryker is also configured to run mutation tests to validate your test coverage!\n\nThe following commands will let you run unit-tests without coverage, unit-tests with coverage, and mutation tests respectively \n```\nyarn test\nyarn test:coverage\nyarn test:mutate\n```\n\nTest outputs should be logged to the console.\n\n### Storybook\n\nYou can launch storybook using yarn\n\n```\nyarn storybook\n```\n\nby default you can access storybook by browsing to `localhost:6006`\n\n## WIP\n\nPotential Topics:\n- Common Mistakes with RTL (or really just exploring [this post](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library))\n- How to Mock in order to test components effectively\n- Using Page Objects (and \"component\" objects) to make simple test steps\n- Building React Components that are easier to test (i.e. ensuring elements you wish to test are accessible)\n- What to test and at what level\n- How to reduce Duplication in your tests\n- React Testing Lib 101\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamslack%2Freact-ui-testing-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamslack%2Freact-ui-testing-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamslack%2Freact-ui-testing-workshop/lists"}