{"id":23605935,"url":"https://github.com/filipoliko/shallow-react-snapshot","last_synced_at":"2025-10-28T23:45:06.119Z","repository":{"id":268895972,"uuid":"901441276","full_name":"Filipoliko/shallow-react-snapshot","owner":"Filipoliko","description":"Turn deeply nested HTML snapshots into enzyme-like shallow HTML structure","archived":false,"fork":false,"pushed_at":"2025-02-10T16:15:20.000Z","size":770,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T17:21:32.571Z","etag":null,"topics":["jest","pretty-print","react","shallow","snapshot"],"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/Filipoliko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2024-12-10T16:59:59.000Z","updated_at":"2025-01-30T14:06:19.000Z","dependencies_parsed_at":"2024-12-19T15:33:35.724Z","dependency_job_id":"02e89c1f-7fa8-4e8e-ba79-025f999a198f","html_url":"https://github.com/Filipoliko/shallow-react-snapshot","commit_stats":null,"previous_names":["filipoliko/shallow-react-snapshot"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Filipoliko%2Fshallow-react-snapshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Filipoliko%2Fshallow-react-snapshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Filipoliko%2Fshallow-react-snapshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Filipoliko%2Fshallow-react-snapshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Filipoliko","download_url":"https://codeload.github.com/Filipoliko/shallow-react-snapshot/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239458919,"owners_count":19642100,"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":["jest","pretty-print","react","shallow","snapshot"],"created_at":"2024-12-27T13:13:59.249Z","updated_at":"2025-10-28T23:45:01.088Z","avatar_url":"https://github.com/Filipoliko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shallow React Snapshot\n\n[![CI](https://github.com/Filipoliko/shallow-react-snapshot/actions/workflows/test.yml/badge.svg)](https://github.com/Filipoliko/shallow-react-snapshot/actions/workflows/test.yml)\n[![NPM Version](https://img.shields.io/npm/v/shallow-react-snapshot)](https://www.npmjs.com/package/shallow-react-snapshot)\n\n\nAre you tired of the deep HTML structures in your React Testing Library snapshot tests? Do you want to see only the shallow structure of your components, just like with Enzyme shallow rendering? Shallow React Snapshot is here to help!\n\n**What does this library do?**\n\nIt takes an already rendered HTML element and returns jest-friendly shallow JSON structure, which you can use in your snapshot tests. It helps you validate just the currently tested component and does not display the whole tree of nested components.\n\n**What does this library NOT do?**\n\nIt does **NOT** render your components. It does **NOT** mock deeply nested React components. It does **NOT** replace React Testing Library, but it works well with it.\n\n## Installation\n\nRun following command to install Shallow React Snapshot.\n\n```bash\nnpm install --save-dev shallow-react-snapshot\n```\n\nThis library is tested with jest, JSDOM and React Testing Library, but it is not limited to these tools.\n\nThis library officially supports React 16 and newer.\n\n## Usage\n\n```typescript\nfunction shallow(rootElement: Element | null, RootReactComponent: ReactComponent | string): ReactTestChild | null\n```\n\n- `rootElement` - The root element of the rendered component. Typically `container` from `render` function of React Testing Library.\n- `RootReactComponent` - Most likely the component you are testing. It can be a React component or its name as a string.\n- Returns snapshot friendly shallow structure of the component.\n\n**Example**\n\n```javascript\nimport { shallow } from \"shallow-react-snapshot\";\nimport { render } from \"@testing-library/react\";\n\nfunction MyComponent() {\n  return (\n    \u003cMyNestedComponent data-testid=\"nested\"\u003e\n      \u003cspan\u003eText\u003c/span\u003e\n    \u003c/MyNestedComponent\u003e\n  );\n}\n\nfunction MyNestedComponent({ children, ...props }) {\n  return \u003cdiv {...props}\u003e{children || null}\u003c/div\u003e;\n}\n\ntest(\"Render MyComponent\", () =\u003e {\n  const { container } = render(\u003cMyComponent /\u003e);\n\n\n  // Typical use-case\n  expect(shallow(container, MyComponent)).toMatchSnapshot();\n  // You can also use the string representation of the component to get the same result\n  expect(shallow(container, \"MyComponent\")).toMatchSnapshot();\n\n  // Result:\n  // \u003cMyNestedComponent\n  //   data-testid=\"nested\"\n  // \u003e\n  //   \u003cspan\u003e\n  //     Text\n  //   \u003c/span\u003e\n  // \u003c/MyNestedComponent\u003e\n});\n```\n\n### HOC Components\n\nWhen you are testing components with higher-order components (HOC), you might run into some issues. The snapshot of the rendered component will contain the HOC component, which is probably not what you want to test. You want to test the original component without the HOC. With Enzyme shallow, this would not be possible, but with Shallow React Snapshot, you can easily achieve this.\n\n```javascript\nfunction withHOC(Component) {\n  return function HOC(props) {\n    return \u003cComponent {...props} /\u003e;\n  };\n}\n\ntest(\"Render MyComponentWithHOC\", () =\u003e {\n  const MyComponentWithHOC = withHOC(MyComponent);\n  const { container } = render(\u003cMyComponentWithHOC /\u003e);\n\n  // This might not be what you want to test\n  expect(shallow(container, MyComponentWithHOC)).toMatchSnapshot(); // Wrong!\n  // Result:\n  // \u003cMyComponent /\u003e\n\n  // You probably want to check the insides of the original component without HOC\n  // You can either pass the original component into shallow\n  expect(shallow(container, MyComponent)).toMatchSnapshot();\n  // Or you can use the string representation of the component if you don't have the reference to the original component\n  expect(shallow(container, \"MyComponent\")).toMatchSnapshot();\n\n  // Result:\n  // \u003cMyNestedComponent\n  //   data-testid=\"nested\"\n  // \u003e\n  //   \u003cspan\u003e\n  //     Text\n  //   \u003c/span\u003e\n  // \u003c/MyNestedComponent\u003e\n});\n```\n\n## Contributing\n\nIf you want to contribute to this project, please read the [CONTRIBUTING.md](CONTRIBUTING.md) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipoliko%2Fshallow-react-snapshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipoliko%2Fshallow-react-snapshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipoliko%2Fshallow-react-snapshot/lists"}