{"id":16901452,"url":"https://github.com/testing-library/preact-hooks-testing-library","last_synced_at":"2025-05-09T01:45:47.957Z","repository":{"id":44532783,"uuid":"271271784","full_name":"testing-library/preact-hooks-testing-library","owner":"testing-library","description":"Simple and complete Preact hooks testing utilities that encourage good testing practices.","archived":false,"fork":false,"pushed_at":"2022-02-09T16:25:21.000Z","size":135,"stargazers_count":57,"open_issues_count":9,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-29T15:22:07.895Z","etag":null,"topics":[],"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/testing-library.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":"2020-06-10T12:32:41.000Z","updated_at":"2025-04-08T10:05:58.000Z","dependencies_parsed_at":"2022-09-12T14:12:36.997Z","dependency_job_id":null,"html_url":"https://github.com/testing-library/preact-hooks-testing-library","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/testing-library%2Fpreact-hooks-testing-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Fpreact-hooks-testing-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Fpreact-hooks-testing-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testing-library%2Fpreact-hooks-testing-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testing-library","download_url":"https://codeload.github.com/testing-library/preact-hooks-testing-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253044013,"owners_count":21845452,"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-13T17:59:47.337Z","updated_at":"2025-05-09T01:45:47.929Z","avatar_url":"https://github.com/testing-library.png","language":"TypeScript","readme":"# preact-hooks-testing-library\n\n[![Discord](https://img.shields.io/discord/723559267868737556.svg?color=7389D8\u0026labelColor=6A7EC2\u0026logo=discord\u0026logoColor=ffffff\u0026style=flat-square)](https://discord.gg/testing-library)\n\npreact port of the the [@testing-library/react-hooks](https://github.com/testing-library/react-hooks-testing-library) library.\n\n## Why not `@testing-library/react-hooks`?\n\nCurrently, due to the use of `react-test-renderer`, the react hooks testing library most likely will never be compatible with preact.\n\n## Why not another library?\n\nAt the time of writing, a library did not exist to test preact hooks. \n\n## When to use this library\n\n1. You're writing a library with one or more custom hooks that are not directly tied to a component\n2. You have a complex hook that is difficult to test through component interactions\n\n## When not to use this library\n\n1. Your hook is defined alongside a component and is only used there\n2. Your hook is easy to test by just testing the components using it\n\n## Installation\n\nInstall with your favorite package manager\n\n```\nyarn add -D @testing-library/preact-hooks\nOR\nnpm install --save-dev @testing-library/preact-hooks\n```\n\n## Example #1: Basic\n---\n\n### `useCounter.ts`\n\n```typescript\nimport { useState, useCallback } from 'preact/hooks';\n\nconst useCounter = () =\u003e {\n    const [count, setCount] = useState(0);\n\n    const increment = useCallback(() =\u003e setCount(c =\u003e c + 1));\n\n    return {\n        count,\n        increment\n    }\n}\n\nexport default useCounter;\n```\n\n### `useCounter.test.ts`\n\n```typescript\nimport { renderHook, act } from '@testing-library/preact-hooks';\nimport useCounter from './useCounter';\n\ntest('should increment counter', () =\u003e {\n  const { result } = renderHook(() =\u003e useCounter());\n\n  act(() =\u003e {\n    result.current.increment();\n  });\n\n  expect(result.current.count).toBe(1);\n});\n\n```\n\n## Example #2: Wrapped Components\n\nSometimes, hooks may need access to values or functionality outside of itself that are provided by a context provider or some other HOC.\n\n```typescript jsx\nimport { createContext } from 'preact'\nimport { useState, useCallback, useContext } from 'preact/hooks'\n\nconst CounterStepContext = createContext(1)\nexport const CounterStepProvider = ({ step, children }) =\u003e (\n  \u003cCounterStepContext.Provider value={step}\u003e{children}\u003c/CounterStepContext.Provider\u003e\n)\nexport function useCounter(initialValue = 0) {\n  const [count, setCount] = useState(initialValue)\n  const step = useContext(CounterStepContext)\n  const increment = useCallback(() =\u003e setCount((x) =\u003e x + step), [step])\n  const reset = useCallback(() =\u003e setCount(initialValue), [initialValue])\n  return { count, increment, reset }\n}\n\n```\n\nIn our test, we simply use CoounterStepProvider as the wrapper when rendering the hook:\n\n```typescript\nimport { renderHook, act } from '@testing-library/preact-hooks'\nimport { CounterStepProvider, useCounter } from './counter'\n\ntest('should use custom step when incrementing', () =\u003e {\n  const wrapper = ({ children }) =\u003e \u003cCounterStepProvider step={2}\u003e{children}\u003c/CounterStepProvider\u003e\n  const { result } = renderHook(() =\u003e useCounter(), { wrapper })\n  act(() =\u003e {\n    result.current.increment()\n  })\n  expect(result.current.count).toBe(2)\n})\n```\n\n### TODO\n\n- [ ] remove `@ts-nocheck` flag from tests\n- [ ] fix disabled auto clean up tests\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Fpreact-hooks-testing-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftesting-library%2Fpreact-hooks-testing-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftesting-library%2Fpreact-hooks-testing-library/lists"}