{"id":16427066,"url":"https://github.com/donavon/react-proxy-hook","last_synced_at":"2025-03-23T07:33:05.782Z","repository":{"id":44937910,"uuid":"166397323","full_name":"donavon/react-proxy-hook","owner":"donavon","description":" Helps you test a React Hook","archived":false,"fork":false,"pushed_at":"2024-02-02T15:30:35.000Z","size":245,"stargazers_count":5,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2024-10-12T08:11:18.824Z","etag":null,"topics":["hook","hooks","react","reactjs","testing","testing-tools"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/donavon.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}},"created_at":"2019-01-18T11:51:19.000Z","updated_at":"2021-07-02T07:46:11.000Z","dependencies_parsed_at":"2022-07-20T09:34:01.420Z","dependency_job_id":null,"html_url":"https://github.com/donavon/react-proxy-hook","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/donavon%2Freact-proxy-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-proxy-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-proxy-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Freact-proxy-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/react-proxy-hook/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221847073,"owners_count":16890959,"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":["hook","hooks","react","reactjs","testing","testing-tools"],"created_at":"2024-10-11T08:11:27.881Z","updated_at":"2024-10-28T15:13:10.905Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-proxy-hook\n\nHelps you test a React Hook\n\n[![npm version](https://badge.fury.io/js/react-proxy-hook.svg)](https://badge.fury.io/js/react-proxy-hook)\n\n## Requirement ⚠️\n\nTo use `react-proxy-hook`, you must use `react@16.8.0-alpha.1`. React Hooks is currently at\n**[RFC](https://github.com/reactjs/rfcs/pull/68)** stage.\n\n## Installation\n\n```bash\n$ npm i -D react-proxy-hook\n```\n\n## Usage\n\n`react-proxy-hook` is a wrapper around Kent C. Dodd's `react-testing-library`.\nIt was inspired by the `setup` function that Kent wrote in his\n[YouTube video](https://youtu.be/0e6WCQYg5tU).\nIt is presented here as a simple React Hooks function wrapper.\n\nHooks can not be tested as standalone functions as they will not work\nunless they are called from withing a rendered component.\n`react-proxy-hook` gets around this limitation by proxying an actual\ncomponent.\n\n\u003e Maybe should have been called a HOH (Higher Order Hook)?\n\nLook at how easy testing a Hook can be!\n\n## Method 1: `testHook`\n\nMethod 1 requires that you place the call to your cutom Hook inside of a callback function. You then destructure (or not) your data into a `let` that you previously defined.\n\n```js\nimport { testHook, cleanup } from 'react-proxy-hook';\nimport useCounter from '../use-counter';\n\nafterEach(cleanup);\n\ntest('useCounter', () =\u003e {\n  let count, increment;\n  testHook(() =\u003e ({ count, increment } = useCounter({ initialCount: 2 })));\n\n  expect(count).toBe(2);\n  increment();\n  expect(count).toBe(3);\n});\n```\n\nUsing Method 1 (suggested), there are no restrictions on destructuring.\n\nI've [made a PR](https://github.com/kentcdodds/react-testing-library/pull/274)\ninto `react-testing-library` for this, so hopefully this will be in merged soon.\n\nSee the test for Method 1 running live on CodeSandbox.\n\n[![Edit React Codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6lqxvx42mz?module=%2Fsrc%2F__tests__%2Fuse-counter.js)\n\n## Method 2: `proxyHook`\n\nYou test your Hook just like you would use it in an actual component.\nJust pass your actual hook to `proxyHook` and it will return\na proxied version of your hook.\n\n```js\nimport { proxyHook, cleanup } from 'react-proxy-hook';\nimport useCounter from '../use-counter';\n\nconst useCounterProxy = proxyHook(useCounter);\n\nafterEach(cleanup);\n\ntest('useCounter', () =\u003e {\n  const counterData = useCounterProxy();\n  counterData.increment();\n  expect(counterData.count).toBe(1);\n  counterData.decrement();\n  expect(counterData.count).toBe(0);\n});\n```\n\nSee the test for Method 2 running live on CodeSandbox.\n\n[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6lqxvx42mz)\n\n### Testing objects\n\nTo test with a returned object (ex: `{ foo: 'bar' }` ) use the dot notation.\n\n```js\nconst returnedVal = useFooProxy();\nexpect(returnedVal.foo).toBe('bar');\n```\n\n### Testing arrays\n\nTo test with a returned array (ex: `[0]` ) use bracket notation.\n\n```js\nconst returnedVal = useFooProxy();\nexpect(returnedVal[0]).toBe(0);\n```\n\n### Testing other types\n\nTo test with other returned types (i.e. string, numbers, `null`, `undefined`), use they key \"value\".\n\n```js\nconst returnedVal = useFooProxy();\nexpect(returnedVal.value).toBe('foo');\n```\n\n### Limitations\n\nYou must not deconstruct the returned value in your test.\nFor example, the following wo't work as `count` will still be `0`.\n\n```js\nconst { count, increment } = useCounterProxy(0);\nincrement();\nexpect(count).toBe(1);\n```\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n---\n\nObviously, none of this would not be possible without the tireless work of\nKent C. Dodds. Thank you! 🙏\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Freact-proxy-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Freact-proxy-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Freact-proxy-hook/lists"}