{"id":23066708,"url":"https://github.com/peterboyer/mocktree","last_synced_at":"2025-04-03T09:13:20.213Z","repository":{"id":173364932,"uuid":"650640937","full_name":"peterboyer/mocktree","owner":"peterboyer","description":"Dependency-aware, type-safe response mocks for TypeScript.","archived":false,"fork":false,"pushed_at":"2023-11-11T22:23:47.000Z","size":34,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-11T02:39:26.187Z","etag":null,"topics":["testing","typescript"],"latest_commit_sha":null,"homepage":"https://npmjs.com/mocktree","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/peterboyer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-07T13:48:10.000Z","updated_at":"2024-11-09T00:25:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"b0d43584-533f-4bab-95bc-86ca0786d097","html_url":"https://github.com/peterboyer/mocktree","commit_stats":null,"previous_names":["peterboyer/mocktree"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterboyer%2Fmocktree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterboyer%2Fmocktree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterboyer%2Fmocktree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterboyer%2Fmocktree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterboyer","download_url":"https://codeload.github.com/peterboyer/mocktree/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246970323,"owners_count":20862509,"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":["testing","typescript"],"created_at":"2024-12-16T05:14:44.946Z","updated_at":"2025-04-03T09:13:20.191Z","avatar_url":"https://github.com/peterboyer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `mock(tree)`\n\nDependency-aware, type-safe response mocks for TypeScript.\n\n```ts\nimport { mt, mock } from \"mocktree\";\n\n* App ................................. (mt.component)\n|---* MyComponent ..................... (mt.component)\n    |---* useGetUsersQuery ............ (mt.query)\n    |---* InnerComponent .............. (mt.component)\n        |---* useGetCitiesQuery ....... (mt.query)\n        |---* useGetWeatherByCityQuery  (mt.query)\n\nmock(InnerComponent, {\n    GetCities: { data: { ... } },\n});\n^ Error: \"GetWeatherByCity\" is missing.\n\nmock(MyComponent, {\n    GetCities: { data: { ... } },\n    GetWeatherByCity: { data: { ... } },\n});\n^ Error: \"GetUsers\" is missing.\n\nmock(App, {\n    GetUsers: { data: { users: { id: 123 } } },\n                        ^ Error: not assignable to array { id: number }[].\n    GetCities: { error: \"...\" },\n    GetWeatherByCity: ({ cityId }) =\u003e ({ data: ... }),\n});\n```\n\n## Primitives\n\n### `mt.query`\n\nA framework-agnostic primitive that anotates an object or function with a\nnetwork query that it may emit and should be mocked when testing.\n\nInstead of using `mt.query` directly, consider using:\n\n- React Apollo: `mt.hook` from \"mocktree/apollo\"\n\n```ts\nimport { mt } from \"mocktree\";\n\nconst getUsersFn = () =\u003e fetch(/* ... */);\n\nexport const getUsers = mt.query\u003c\n\t\"GetUsers\",\n\tGetUsersQuery,\n\tGetUsersQueryVariables\n\u003e()(getUsersFn);\n```\n\n### `mt.component`\n\nA framework-agnostic primitive that anotates an object or function with any\n`mt.query` or `mt.component` dependencies that are used in it's implementation.\n\nThis makes it possible to recursively infer all network queries that a\ncomponent needs to mock based on its children and its' childrens' children etc.\n\n```ts\nimport { mt } from \"mocktree\";\n\nconst $ = {\n\tgetUsersFn,\n};\n\nconst MyComponent = mt.component\u003ctypeof $\u003e()(() =\u003e {\n\tconst onClick = async () =\u003e {\n\t\tconst { data } = await $.getUsersFn();\n\t\t/* ... */\n\t};\n\t/* ... */\n});\n```\n\n### `mock`\n\nTODO: Will probably have to be a framework-dependent untility:\n\n- Given a `mt.component`:\n  - map the queries to Mock Service Worker handlers;\n  - map the queries to a `mocks` object for Apollo's MockedProvider;\n  - etc...\n\n```ts\nimport { mock } from \"mocktree\";\nimport { MyComponent } from \"./my-component\";\n\nit(\"should show an empty state if no users\", () =\u003e {\n\tmock(MyComponent, {\n\t\tGetUsers: { data: { users: [] } },\n\t});\n\trender(MyComponent);\n\t/* ... */\n});\n\nit(\"should show an error and retry on click\", () =\u003e {\n\tmock(MyComponent, {\n\t\tGetUsers: { error: \"Internal Service Error\" },\n\t});\n\trender(MyComponent);\n\t/* ... */\n});\n```\n\nAnd if a new query dependency is added/updated/removed, all tests affected\nmocks will report type errors.\n\n```ts\nit(\"...\", () =\u003e {\n    // Incomplete mock.\n\tmock(MyComponent, {});\n                      ^ Error: \"GetUsers\" is missing.\n\trender(MyComponent);\n\t/* ... */\n})\n```\n\n## React Apollo\n\n## `mt.hook` (`\"mocktree/apollo\"`)\n\n```ts\nimport { mt } from \"mocktree/apollo\";\nimport { useGetUsersQuery } from \"./get-users.generated.ts\";\n\nconst $ = {\n\tuseGetUsersQuery: mt.hook\u003c\"GetUsers\"\u003e()(useGetUsersQuery),\n};\n\nconst MyComponent = mt.component\u003ctypeof $\u003e()(() =\u003e {\n\tconst { data } = $.useGetUsersQuery();\n\t/* ... */\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterboyer%2Fmocktree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterboyer%2Fmocktree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterboyer%2Fmocktree/lists"}