npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-remock

v0.8.2

Published

Get any Component replaced. Anywhere. 🛠♻️

Downloads

138

Readme

 react-              /$$      /$$                     /$$      
                    | $$$    /$$$                    | $$      
  /$$$$$$   /$$$$$$ | $$$$  /$$$$  /$$$$$$   /$$$$$$$| $$   /$$
 /$$__  $$ /$$__  $$| $$ $$/$$ $$ /$$__  $$ /$$_____/| $$  /$$/
| $$  \__/| $$$$$$$$| $$  $$$| $$| $$  \ $$| $$      | $$$$$$/ 
| $$      | $$_____/| $$\  $ | $$| $$  | $$| $$      | $$_  $$ 
| $$      |  $$$$$$$| $$ \/  | $$|  $$$$$$/|  $$$$$$$| $$ \  $$
|__/       \_______/|__/     |__/ \______/  \_______/|__/  \__/

Build Status Greenkeeper badge npm downloads

FYI: You can mock any React Component, rendered anywhere, and for the any reason.

Requires external configuration to work with React18 / jsx-runtime

This is like proxyquire, or jest.mock. Not for node.js, but for React. Pure React Dependency Injection.

  • Every time you can NOT "storybook" something due to complexity.
  • Every time you can NOT "enzyme" something, cos something deeply inside is "too smart" (and you can't use shallow).
  • Every ^that^ time – mock the things you can NOT control.

Remock is based on the same technique, as React-Hot-Loader - intercepts React calls and do... whatever you want.

Use cases

This library was created for testing purposes only, while could be used to achive different tasks:

  • Using remock with enzyme testing allows you to perform more shallow mount testing. 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.

  • Using remock with storybooks testing allows you to hide some parts of "bigger", stories, leaving a holes in the story plot.

    • 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.
    • Yet again, in case of redux - you can replace connect by another component, to make it easier to provide mocked data for the story.
  • Remock created not only for testing, but (even more) for hacking into components, and making pretty things.

Featured in

API

Play in codesandbox - https://codesandbox.io/s/xk7vp60o4

API is simple - it gets React.createElement as an input and returns React.createElement as an output. And it will be called when real React.createElement has been called.

If you will not return anything - element willbe completely mocked. In other cases - you could specify what to return.

 import {remock} from 'react-remock';

 remock.mock('ComponentName'); // you can mock by name
 remock.mock(/Connect\((.*)\)/); // you can mock by RegExp
 
 remock.mock(ComponentClass); // you can mock by class
 
 remock.mock({ propName:42 }); // you can mock by component props
 
 remock.transparent(Component); // replaces Component by () => children. Makes it "transparent"
 
 remock.renderProp(Component, ...arguments); // "unwraps" renderProp component, by calling function-as-children with provided arguments 
 
 remock.match((type, props, children) => true); // you can mock using user-defined function
 
 remock.mock(Component, (type, props, children) => ({type?, props?, children?})); // you can alter rendering
 
 // unmock any mock `like` this
 remock.unmock('ComponentName' | ComponentName);
 
 const unmock = remock.mock(ComponentClass);
 // remove mock this mock only
 unmock();
 
 // and dont forget to
 remock.clearMock();

 // "scoped" mocks for local cleanups 
 remock.push();
 remock.mock('anything')
 remock.pop();

 
 
 // You can also use "declarative" React API. (only with mount!)
 // mocking has a global effect, `Remocking` would only automate cleanup
 mount(
   <div>
       <Remocking component="Red" />
       <Red />
   </div>
 );

PS: preact support it yet untested

Additional API

import {createElement, enable, disable} from 'react-remock';

createElement() // is a "real" React.createElement;

disable() ;// you can always disable rewiremock as a whole
enable(); // and enable it back

React 18

Out of the box Remock does not support React 18 to maintain backward compatibility. Currently, you have to patch jsx-runtime at the user side

// import jsx runtime
import jsxRuntime from "react/jsx-runtime";
import jsxRuntimeDev from "react/jsx-dev-runtime";

// import patch helper
import {patchJsxRuntime} from 'react-remock';

// apply the patch
patchJsxRuntime(jsxRuntime);
patchJsxRuntime(jsxRuntimeDev);

This may be fixed in the future versions

Dev/Production

The best way - not to use remock, and not require it in production.

If that is undoable - use "dev" exports, which will return mocked API for production builds.

import {remock} from 'remock/dev';

// you still can run all the commands
// but remock core does not exists.
remock.mock(...);

More examples

// change prop on Hello
remock.mock(Hello, () => ({props:{name:"Remock"}}))

// change h2 to h3, change style, change children
remock.mock('h2', (type, props, children) => { 
  return ({
  type: 'h4',
  props: {
    ...props,
    style: {color:'#700'},   
  },
  children: `🧙️ ${children} 🛠`
})})

// wrap divs with a border
remock.mock('div', (type, props) => ({
  props: {
    ...props,
    style:{
      ...props.style,
      border:'1px solid #000'
    },
  }
}));

Why you may need it?

See also

Remock is a little brother of rewiremock

Licence

MIT

Happy mocking!