{"id":19451240,"url":"https://github.com/thekashey/react-remock","last_synced_at":"2025-06-13T02:41:23.141Z","repository":{"id":57343450,"uuid":"131305881","full_name":"theKashey/react-remock","owner":"theKashey","description":"Get any Component replaced. Anywhere. 🛠♻️","archived":false,"fork":false,"pushed_at":"2023-06-22T11:41:19.000Z","size":542,"stargazers_count":44,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-17T07:49:33.025Z","etag":null,"topics":["dependency-injection","mock","mocking","mocking-library","react","testing"],"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/theKashey.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":"2018-04-27T14:18:42.000Z","updated_at":"2024-07-06T14:27:39.000Z","dependencies_parsed_at":"2024-06-19T02:48:13.588Z","dependency_job_id":"d69e73b5-3325-4c1f-9803-190225ee1c10","html_url":"https://github.com/theKashey/react-remock","commit_stats":{"total_commits":55,"total_committers":3,"mean_commits":"18.333333333333332","dds":"0.10909090909090913","last_synced_commit":"95c61ae357844dd8efc35cf16d23754315252467"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/theKashey/react-remock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/react-remock/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Freact-remock/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259568152,"owners_count":22877858,"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":["dependency-injection","mock","mocking","mocking-library","react","testing"],"created_at":"2024-11-10T16:40:52.172Z","updated_at":"2025-06-13T02:41:23.109Z","avatar_url":"https://github.com/theKashey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"```text\n react-              /$$      /$$                     /$$      \n                    | $$$    /$$$                    | $$      \n  /$$$$$$   /$$$$$$ | $$$$  /$$$$  /$$$$$$   /$$$$$$$| $$   /$$\n /$$__  $$ /$$__  $$| $$ $$/$$ $$ /$$__  $$ /$$_____/| $$  /$$/\n| $$  \\__/| $$$$$$$$| $$  $$$| $$| $$  \\ $$| $$      | $$$$$$/ \n| $$      | $$_____/| $$\\  $ | $$| $$  | $$| $$      | $$_  $$ \n| $$      |  $$$$$$$| $$ \\/  | $$|  $$$$$$/|  $$$$$$$| $$ \\  $$\n|__/       \\_______/|__/     |__/ \\______/  \\_______/|__/  \\__/\n```\n\n[![Build Status](https://secure.travis-ci.org/theKashey/react-remock.svg)](http://travis-ci.org/theKashey/react-remock)\n[![Greenkeeper badge](https://badges.greenkeeper.io/theKashey/react-remock.svg)](https://greenkeeper.io/)\n[![npm](https://img.shields.io/npm/v/react-remock.svg)](https://www.npmjs.com/package/react-remock)\n[![downloads](https://badgen.net/npm/dm/react-remock)](https://www.npmtrends.com/react-remock)\n\nFYI: You can __mock any React Component__, rendered anywhere, and for the any reason.\n\n\u003e Requires external configuration to work with React18 / jsx-runtime \n\nThis is like __proxyquire__, or jest.mock. Not for node.js, but for React. Pure __React Dependency Injection__.\n\n- Every time you can NOT \"storybook\" something due to complexity. \n- Every time you can NOT \"enzyme\" something, cos something deeply inside is \"too smart\" (and you can't use shallow). \n- Every ^that^ time – mock the things you can NOT control.\n\nRemock is based on the same technique, as [React-Hot-Loader](https://github.com/gaearon/react-hot-loader) - intercepts React calls and do... whatever you want.\n\n# Use cases\nThis library was created for testing purposes only, while could be used to achive different tasks:\n - Using remock with __enzyme__ testing allows you to perform more _shallow_ mount testing.\n You can just mock out, complitely remove some (deep nested internal) Component which could make testing harder. For example - Redux Connect, always seeking proper Provider.\n \n - Using remock with __storybooks__ testing allows you to hide some parts of \"bigger\", stories, leaving a holes in the story plot.\n   - In case you are using BEM notation - it is really super easy to cat a hole, as long dimensions are propertly of a block, not element.\n   - Yet again, in case of redux - you can replace connect by another component, to make it easier to provide mocked data for the story.   \n\n - Remock created not only for testing, but (even more) for _hacking into_ components, and making pretty things.\n \n## Featured in\n- [(in)Finite War](https://dev.to/thekashey/infinite-war-995)\n- [Why I Always Use Shallow Rendering](https://hackernoon.com/why-i-always-use-shallow-rendering-a3a50da60942)\n\n# API\n\nPlay in codesandbox - https://codesandbox.io/s/xk7vp60o4\n\nAPI is simple - it gets `React.createElement` as an input and returns `React.createElement` as an output.\nAnd it will be called when real `React.createElement` has been called.\n\nIf you will not return anything - element willbe completely mocked. In other cases - you could specify what to return.\n```js\n import {remock} from 'react-remock';\n\n remock.mock('ComponentName'); // you can mock by name\n remock.mock(/Connect\\((.*)\\)/); // you can mock by RegExp\n \n remock.mock(ComponentClass); // you can mock by class\n \n remock.mock({ propName:42 }); // you can mock by component props\n \n remock.transparent(Component); // replaces Component by () =\u003e children. Makes it \"transparent\"\n \n remock.renderProp(Component, ...arguments); // \"unwraps\" renderProp component, by calling function-as-children with provided arguments \n \n remock.match((type, props, children) =\u003e true); // you can mock using user-defined function\n \n remock.mock(Component, (type, props, children) =\u003e ({type?, props?, children?})); // you can alter rendering\n \n // unmock any mock `like` this\n remock.unmock('ComponentName' | ComponentName);\n \n const unmock = remock.mock(ComponentClass);\n // remove mock this mock only\n unmock();\n \n // and dont forget to\n remock.clearMock();\n\n // \"scoped\" mocks for local cleanups \n remock.push();\n remock.mock('anything')\n remock.pop();\n\n \n \n // You can also use \"declarative\" React API. (only with mount!)\n // mocking has a global effect, `Remocking` would only automate cleanup\n mount(\n   \u003cdiv\u003e\n       \u003cRemocking component=\"Red\" /\u003e\n       \u003cRed /\u003e\n   \u003c/div\u003e\n );\n```\nPS: preact support it yet untested\n\n## Additional API\n```js\nimport {createElement, enable, disable} from 'react-remock';\n\ncreateElement() // is a \"real\" React.createElement;\n\ndisable() ;// you can always disable rewiremock as a whole\nenable(); // and enable it back\n```\n\n# React 18\nOut of the box Remock does not support React 18 to maintain backward compatibility.\nCurrently, you have to patch jsx-runtime at the user side\n```tsx\n// import jsx runtime\nimport jsxRuntime from \"react/jsx-runtime\";\nimport jsxRuntimeDev from \"react/jsx-dev-runtime\";\n\n// import patch helper\nimport {patchJsxRuntime} from 'react-remock';\n\n// apply the patch\npatchJsxRuntime(jsxRuntime);\npatchJsxRuntime(jsxRuntimeDev);\n```\nThis may be fixed in the future versions\n\n## Dev/Production\nThe best way - not to use remock, and not require it in production.\n\nIf that is undoable - use \"dev\" exports, which will return mocked API for production builds.\n```js\nimport {remock} from 'remock/dev';\n\n// you still can run all the commands\n// but remock core does not exists.\nremock.mock(...);\n```\n\n## More examples\n```js\n// change prop on Hello\nremock.mock(Hello, () =\u003e ({props:{name:\"Remock\"}}))\n\n// change h2 to h3, change style, change children\nremock.mock('h2', (type, props, children) =\u003e { \n  return ({\n  type: 'h4',\n  props: {\n    ...props,\n    style: {color:'#700'},   \n  },\n  children: `🧙️ ${children} 🛠`\n})})\n\n// wrap divs with a border\nremock.mock('div', (type, props) =\u003e ({\n  props: {\n    ...props,\n    style:{\n      ...props.style,\n      border:'1px solid #000'\n    },\n  }\n}));\n```\n\n# Why you may need it?\n- to empower shallow rendering [Why I Always Use Shallow Rendering](https://medium.com/@antonkorzunov/why-i-always-use-shallow-rendering-a3a50da60942)\n- to wrap your components with another components, you were able to do with jquery - see [examples for react-queue](https://github.com/theKashey/react-queue#examples)\n- color React-Dev-Tools, helping distinquish Stateful/SFC and RenderProps? [code-sandboxexample](https://codesandbox.io/s/x4p2zrvw4).\n\n# See also\nRemock is a little brother of [rewiremock](https://github.com/theKashey/rewiremock)\n \n# Licence\n MIT\n \n \n\nHappy mocking!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Freact-remock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthekashey%2Freact-remock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthekashey%2Freact-remock/lists"}