{"id":15590916,"url":"https://github.com/joshuakgoldberg/mock-react-redux","last_synced_at":"2025-06-13T23:38:23.212Z","repository":{"id":40285568,"uuid":"266477042","full_name":"JoshuaKGoldberg/mock-react-redux","owner":"JoshuaKGoldberg","description":"Mocks out Redux actions and selectors for clean React Jest tests.","archived":false,"fork":false,"pushed_at":"2025-04-11T08:15:41.000Z","size":364,"stargazers_count":20,"open_issues_count":16,"forks_count":6,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-11T10:35:50.765Z","etag":null,"topics":["hacktoberfest","react","react-redux","redux","testing","unit-tests","usedispatch","useselector"],"latest_commit_sha":null,"homepage":"","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/JoshuaKGoldberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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-05-24T05:36:38.000Z","updated_at":"2025-04-01T21:25:11.000Z","dependencies_parsed_at":"2023-10-01T03:30:12.357Z","dependency_job_id":"524e854e-4959-4586-8a0b-5a837243572d","html_url":"https://github.com/JoshuaKGoldberg/mock-react-redux","commit_stats":{"total_commits":75,"total_committers":8,"mean_commits":9.375,"dds":0.3466666666666667,"last_synced_commit":"8048b5c8f3c7bbaaf875387022588e95f46050de"},"previous_names":["codecademy/mock-redux"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshuaKGoldberg%2Fmock-react-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshuaKGoldberg%2Fmock-react-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshuaKGoldberg%2Fmock-react-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshuaKGoldberg%2Fmock-react-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshuaKGoldberg","download_url":"https://codeload.github.com/JoshuaKGoldberg/mock-react-redux/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782261,"owners_count":21160717,"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":["hacktoberfest","react","react-redux","redux","testing","unit-tests","usedispatch","useselector"],"created_at":"2024-10-02T23:33:34.593Z","updated_at":"2025-04-13T21:11:17.135Z","avatar_url":"https://github.com/JoshuaKGoldberg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎭 mock-react-redux\n\n[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)\n![TypeScript: Strict](https://img.shields.io/badge/typescript-strict-brightgreen.svg)\n[![NPM version](https://badge.fury.io/js/mock-react-redux.svg)](http://badge.fury.io/js/mock-react-redux)\n\nMocks out Redux actions and selectors for clean React Jest tests.\n\nTired of setting up, updating, and debugging through complex _Redux_ states in your _React_ tests?\nUse this package if you'd like your React component tests to not take dependencies on your full Redux store.\n\n\u003e See [FAQs](./docs/FAQs.md) for more backing information. 📚\n\n## Usage\n\n```js\nimport { mockReactRedux } from \"mock-react-redux\";\n```\n\n`mock-react-redux` stubs out [`connect`](https://react-redux.js.org/api/connect) and the [two common Redux hooks](https://react-redux.js.org/api/hooks) used with React components.\nCall `mockReactRedux()` before your render/mount logic in each test.\n\n### Mocking State\n\n```tsx\nmockReactRedux().state({\n  title: \"Hooray!\",\n});\n```\n\nSets a root state to be passed to your component's selectors.\n\n```tsx\nit(\"displays the title when there is a title\", () =\u003e {\n  mockReactRedux().state({\n    title: \"Hooray!\",\n  });\n\n  // state =\u003e state.title\n  const view = render(\u003cRendersTitle /\u003e);\n\n  view.getByText(\"Hooray!\");\n});\n```\n\nSee [Selectors](./docs/Selectors.md) for more documentation or [Heading](./docs/examples/Heading.test.tsx) for a code example.\n\n### Mocking Selectors\n\n```tsx\nmockReactRedux()\n  .give(valueSelector, \"Hooray!\")\n  .giveMock(fancySelector, jest.fn().mockReturnValueOnce(\"Just the once.\"));\n```\n\nProvide results to the [`useSelector`](https://react-redux.js.org/api/hooks#useselector) function for individual selectors passed to it.\nThese work similarly to Jest mocks: `.give` takes in the return value that will always be passed to the selector.\n\n```tsx\nit(\"displays the title when there is a title\", () =\u003e {\n  mockReactRedux().give(selectTitle, \"Hooray!\");\n\n  // state =\u003e state.title\n  const view = render(\u003cRendersTitle /\u003e);\n\n  view.getByText(\"Hooray!\");\n});\n```\n\nIf you'd like more control over the return values, you can use `.giveMock` to provide a [Jest mock](https://jestjs.io/docs/en/mock-functions.html).\n\nSee [Selectors](./docs/Selectors.md) for more documentation or [Heading](./docs/examples/Heading.test.tsx) for a code example.\n\n### Dispatch Spies\n\n```tsx\nconst { dispatch } = mockReactRedux();\n```\n\nThe `dispatch` function returned by [`useDispatch`](https://react-redux.js.org/api/hooks#usedispatch) will be replaced by a `jest.fn()` spy.\nYou can then assert against it as with any Jest mock in your tests:\n\n```tsx\nit(\"dispatches the pageLoaded action when rendered\", () =\u003e {\n  const { dispatch } = mockReactRedux();\n\n  // dispatch(pageLoaded())\n  render(\u003cDispatchesPageLoaded /\u003e);\n\n  expect(dispatch).toHaveBeenCalledWith(pageLoaded());\n});\n```\n\nSee [Dispatches](./docs/Dispatches.md) for more documentation or [Clicker](./docs/examples/Clicker.test.tsx) for a code example.\n\n## Gotchas\n\n- The first `mock-react-redux` import _must_ come before the first `react-redux` import in your test files.\n- `.give` and `.giveMock` will only apply when selectors are passed directly to `useSelector` (e.g. `useSelector(selectValue)`).\n  - See [FAQs](./docs/FAQs.md#help-my-give-selectors-arent-getting-mocked) for more tips and tricks.\n- Thunks often create new functions per dispatch that make `toBeCalledWith`-style checks difficult. See [the Thunks docs](./docs/Thunks.md) for details.\n\n### Hybrid Usage\n\nYou don't have to use `mock-react-redux` in _every_ test file in your repository.\nOnly the test files that import `mock-react-redux` will have `react-redux` stubbed out.\n\n### TypeScript Usage\n\n`mock-react-redux` is written in TypeScript and generally type safe.\n\n- `mockReactRedux()` has an optional `\u003cState\u003e` type which sets the type of the root state passed to `.state`.\n- `.give` return values must match the return types of their selectors.\n- `.giveMock` mocks must match the return types of their selectors.\n\n_Heck yes._ 🤘\n\n## Development\n\nRequires:\n\n- [Node.js](https://nodejs.org) \u003e12\n- [Yarn](https://yarnpkg.com/en)\n\nAfter [forking the repo from GitHub](https://help.github.com/articles/fork-a-repo):\n\n```\ngit clone https://github.com/\u003cyour-name-here\u003e/mock-react-redux\ncd mock-react-redux\nyarn\n```\n\n### Contribution Guidelines\n\nWe'd love to have you contribute!\nCheck the [issue tracker](https://github.com/Codecademy/mock-react-redux/issues) for issues labeled [`accepting prs`](https://github.com/Codecademy/mock-react-redux/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+label%3A%22accepting+prs%22) to find bug fixes and feature requests the community can work on.\nIf this is your first time working with this code, the [`good first issue`](https://github.com/Codecademy/mock-react-redux/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22+) label indicates good introductory issues.\n\nPlease note that this project is released with a [Contributor Covenant](https://www.contributor-covenant.org).\nBy participating in this project you agree to abide by its terms.\nSee [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuakgoldberg%2Fmock-react-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuakgoldberg%2Fmock-react-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuakgoldberg%2Fmock-react-redux/lists"}