{"id":19788775,"url":"https://github.com/hbarcelos/better-redux-tests","last_synced_at":"2025-08-24T14:04:46.450Z","repository":{"id":42936915,"uuid":"223679820","full_name":"hbarcelos/better-redux-tests","owner":"hbarcelos","description":"Source code for my article \"A better approach for testing your Redux code\"","archived":false,"fork":false,"pushed_at":"2023-01-05T01:36:44.000Z","size":394,"stargazers_count":11,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T06:34:29.380Z","etag":null,"topics":["isolation","mocks","redux-tests","selectors","slice"],"latest_commit_sha":null,"homepage":"https://blog.henriquebarcelos.dev/a-better-approach-for-testing-your-redux-code-ck3dnpqnu00uro4s178b8aw3e","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hbarcelos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-24T02:05:39.000Z","updated_at":"2024-01-10T14:48:18.000Z","dependencies_parsed_at":"2023-02-03T04:15:27.027Z","dependency_job_id":null,"html_url":"https://github.com/hbarcelos/better-redux-tests","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/hbarcelos%2Fbetter-redux-tests","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbarcelos%2Fbetter-redux-tests/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbarcelos%2Fbetter-redux-tests/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hbarcelos%2Fbetter-redux-tests/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hbarcelos","download_url":"https://codeload.github.com/hbarcelos/better-redux-tests/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251802739,"owners_count":21646267,"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":["isolation","mocks","redux-tests","selectors","slice"],"created_at":"2024-11-12T06:28:46.151Z","updated_at":"2025-05-01T00:31:28.451Z","avatar_url":"https://github.com/hbarcelos.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Better Redux Tests\n\nThis repository contains my take on how to test Redux applications.\n\nIt contains the source code related to this article in my blog:  \n[A better approach for testing your Redux code](https://blog.henriquebarcelos.dev/a-better-approach-for-testing-your-redux-code-ck3dnpqnu00uro4s178b8aw3e)\n\n## TL;DR\n\nA few thoughts about how to approach Redux testing:\n\n### Vanilla Redux\n\n- The smallest standalone unit in Redux is the entire state slice. Unit tests should interact with it as a whole.\n- There is no point in testing reducers, action creators and selectors in isolation. As they are tightly coupled with each other, isolation gives us little to no value.\n- Tests should interact with your Redux slice same way your application will.\n    - Always use action creators to dispatch actions.\n    - Always use selectors to read from the state when performing assertions. \n    - By doing that, you will be able to catch errors in both your action creators and selectors, without having to write tests targeting them in isolation.\n- Avoid assertions like `toEqual`/`toDeepEqual` against the state object, as they create a coupling between your tests and the state structure.\n    - Moving state around is quite common in Redux applications. By avoiding this kind of coupling you save yourself from a maintenance nightmare.\n- Using selectors gives you the granularity you need to run simple assertions.\n    - If a given piece of state is not touched after an action is dispatched, you don't need to reference it in your test.\n- Selectors and action creators should be boring, so they won't require testing.\n    - If you need something more elaborate, see if [`reselect`](https://github.com/reduxjs/reselect) can help you with your selectors and if [`redux-act`](https://github.com/pauldijou/redux-act) or [`@reduxjs/toolkit`](https://redux-toolkit.js.org/) can ease the pain when creating actions before adding complexity by yourself.\n- Your slice is somewhat equivalent to a pure function, which means you don't need any mocking facilities in order to test it.\n\n### Redux + `redux-thunk`\n\n- Dispatching thunks doesn't have any direct effect. Only after the thunk is called is when we will have the side-effects we need to make our application work.\n- Here you can use stubs, spies and sometimes mocks (but [don't abuse mocks](https://medium.com/javascript-scene/mocking-is-a-code-smell-944a70c90a6a)).\n- Because of the way thunks are structured, the only way to test them is by testing their implementation details.\n    - The downside to this is that your tests are more coupled with your code, so it will be harder to maintain.\n- The strategy when testing thunks is to setup the store, dispatch the thunk and then asserting whether it dispatched the actions you expected in the order you expected or not.\n\n## Using This Repo\n\n### Structure\n\nHere's how this repo is structured:\n\n```\nsrc\n├── api\n│   └── index.js\n└── modules\n    ├── auth\n    │   ├── authSlice.js\n    │   └── authSlice.test.js\n    └── documents\n        ├── documentsSlice.js\n        └── documentsSlice.test.js\n```\n\nThe `auth` module is very simple, making it easier to familiarize yourself with the ideas discussed here.\n\nThe `documents` module looks more like a \"real world\" application, which makes it a little trickier to test, but the same ideas apply.\n\n### Running the Tests\n\nFirst, don't forget to install the dependencies:\n\n```bash\nyarn install\n```\n\nThen run:\n\n```\nyarn test --verbose\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbarcelos%2Fbetter-redux-tests","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhbarcelos%2Fbetter-redux-tests","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhbarcelos%2Fbetter-redux-tests/lists"}