{"id":16551530,"url":"https://github.com/kimfucious/rtl-kitchen-sink","last_synced_at":"2026-05-06T06:37:05.119Z","repository":{"id":121841460,"uuid":"292213217","full_name":"kimfucious/RTL-Kitchen-Sink","owner":"kimfucious","description":"React Testing Library Testing Examples","archived":false,"fork":false,"pushed_at":"2020-09-02T13:19:37.000Z","size":522,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T15:04:18.818Z","etag":null,"topics":["react","react-router","react-testing-library","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kimfucious.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":"2020-09-02T07:38:43.000Z","updated_at":"2020-09-02T13:19:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"712681a3-3b5c-491b-bd4f-b91478887f1c","html_url":"https://github.com/kimfucious/RTL-Kitchen-Sink","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kimfucious/RTL-Kitchen-Sink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimfucious%2FRTL-Kitchen-Sink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimfucious%2FRTL-Kitchen-Sink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimfucious%2FRTL-Kitchen-Sink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimfucious%2FRTL-Kitchen-Sink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kimfucious","download_url":"https://codeload.github.com/kimfucious/RTL-Kitchen-Sink/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kimfucious%2FRTL-Kitchen-Sink/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272829128,"owners_count":25000166,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"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":["react","react-router","react-testing-library","redux"],"created_at":"2024-10-11T19:37:39.705Z","updated_at":"2025-10-30T22:15:23.579Z","avatar_url":"https://github.com/kimfucious.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🐙 React Testing Library Kitchen Sink ![sink](./src/images/sink_32.png)\n\nThis repo serves to demonstrate how to test a React app with the following libraries:\n\n- Redux (with hooks)\n- React Router\n\nI've created a simple app here, but I'm trying to include many of the real-world scenarios that are used in production apps as simply as possible.\n\n## Why am I doing this?\n\nRTL doesn't work out of the box when using these libraries, so there's some work to be done to get the tests working.\n\nIf you're seeing errors/warnings like the below, you'll need to do a little work to get your tests running:\n\n```console\ncould not find react-redux context value; please ensure the component is wrapped in a \u003cProvider\u003e\n```\n\n```console\nTypeError: dispatch is not a function\n```\n\nMy hope is to learn the best way to test using RTL in these combined scenarios and hopefully help others who are trying to do so as well.\n\n## 🎁 Wrappers\n\nThe use of wrappers will get tests running and greatly reduces having to retype a lot of boilerplate testing code.\n\nIn order to get Redux to work there's [this](https://testing-library.com/docs/example-react-redux).\n\nAnd in order to get React Router to work there's [this](https://testing-library.com/docs/example-react-router).\n\nThese can be combined to get them both working together with RTL. The following code is from `utils/test-utils.js` located in the `src` dir of this repo.\n\n```js\nimport React from \"react\";\nimport { AppRouter } from \"../routers/AppRouter\";\nimport { Provider } from \"react-redux\";\nimport { render as rtlRender } from \"@testing-library/react\";\nimport configureStore from \"../store/configureStore\";\n\nconst render = (\n  ui,\n  {\n    initialState = { auth: { userId: \"\", user: { username: \"\" } } }, // your state will vary\n    store = configureStore(initialState),\n    ...renderOptions\n  } = {}\n) =\u003e {\n  const Wrapper = ({ children }) =\u003e {\n    return (\n      \u003cProvider store={store}\u003e\n        \u003cAppRouter\u003e{children}\u003c/AppRouter\u003e\n      \u003c/Provider\u003e\n    );\n  };\n  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });\n};\n\nexport * from \"@testing-library/react\";\n\nexport { render };\n```\n\n### Redux\n\nOne thing this allows you to do is to set Redux state for any given test. For example:\n\n```js\ntest(\"renders App when userId in state is present\", () =\u003e {\n  const stateGeorge = {\n    auth: { userId: \"1234567890\" },\n    user: { username: \"george\" }\n  };\n\n  const { getByTestId } = render(\u003cApp /\u003e, { initialState: stateGeorge });\n  const appPage = getByTestId(\"app-page\");\n  expect(appPage).toBeInTheDocument();\n});\n```\n\nIn the above, state is passed as the second argument to the **wrapped** render function.\n\n### React Router\n\nAnother thing this allows you to do is test Navigation. For example:\n\n```js\ntest(\"renders Another page\", () =\u003e {\n  const stateGeorge = {\n    auth: { userId: \"1234567890\" },\n    user: { username: \"george\" }\n  };\n\n  const { getByText, getByTestId } = render(\u003cApp /\u003e, {\n    initialState: stateGeorge\n  });\n  fireEvent.click(getByText(/another page/i));\n  expect(getByTestId(\"another-page\")).toBeInTheDocument();\n});\n```\n\nIn the above, the initial Redux state is set. And then, we fire a click event on a React Router `Link` element (in `\u003c/NavBar\u003e`), which allows us to test if naviation is working properly.\n\nAs this app is using `protected routes`, state will determine which page is ultimately rendered, depending on the presense of `auth: {userId}`.\n\n## Notes\n\n- RTL needs to be at a min of v.10.x to use `waitFor`: `\"@testing-library/react\": \"^10.4.9\"`\n- `package.json` needs `\"test\": \"react-scripts test --env=jsdom-fourteen\"` to address [this issue](https://github.com/testing-library/react-testing-library/issues/662)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimfucious%2Frtl-kitchen-sink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkimfucious%2Frtl-kitchen-sink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkimfucious%2Frtl-kitchen-sink/lists"}