{"_id":"@storybook/react-stubber","_rev":"45-167aa53479958663ce162d42661f8f92","name":"@storybook/react-stubber","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@storybook/react-stubber","version":"1.0.1","license":"MIT","_id":"@storybook/react-stubber@1.0.1","maintainers":[{"name":"danielduan","email":"dduan@yahoo.com"}],"homepage":"https://github.com/storybooks/react-stubber#readme","bugs":{"url":"https://github.com/storybooks/react-stubber/issues"},"dist":{"shasum":"8c312c2658b9eeafce470e1c39e4193f0b5bf9b1","tarball":"https://registry.npmjs.org/@storybook/react-stubber/-/react-stubber-1.0.1.tgz","integrity":"sha512-k+CHH+vA8bQfCmzBTtJsPkITFgD+C/w19KuByZ9WeEvNUFtnDaCqfP+Vp3/OR+3IAfAXYYOWolqPLxNPcEqEjw==","signatures":[{"sig":"MEUCIBV+Tzzvu00ERDqK/M+eq2aaDUIzg2nnQZII5QOc+uqFAiEAkG7GvmPbEwXdbaEL37DhIl1/plsUUcbahwk+H53savM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2cbUCRA9TVsSAnZWagAA+DIP/2bspVefWUD7ameAVHjj\nOyGTIIxOXFpLTOorItlG6liURMtXnSxRzaE/OxVJACyFRZ2aj8XwdGx9RMev\n8AkTKIXINOj104FyVRA5vDop49VfEj2Us+2FHHo9fzbVLekiGPTjNnmNiPPI\ngoqlUfS2w+4SHaepfZ1msKP8XwaIk7vgm+9/Tq6uAUQVN4k8XVXvSGi/TetD\nJps8jSkTHLLA3bbjxQUxMagB0UKYqsszDeju4uRZflgpfzbIhz/qQUp2lvJp\n7yIUGjfS9ivuc3sfdGdoRqYMRJiCvaJoDRvhgEkmXUHyKpTJIA+R7qpvbzXM\nterOKn86EcR1mTDT3Zg1mlPJdsrvK1IZ6BzOdSMg3krPRb45j7UYCFWZGD4n\n1fmPRHUa6iNd8+ld8M60swQRnnTmx8cKKyG0Ege8FuC4RJmDWWKBddeemca2\nvHsDvRLf03UFMRfA4/vphUiy9SUxi2df0W4RYQhD+u62T8n9KfYgeqI2f7Kq\nuRxzHVxSOZ1PAX4c7HawBcV2wRt0UwB+M1PoeEbgCeblg9T2aXz37LOAVT3e\nigcE8OdbQ2KzOULbO/53lOBUCkcT1JF9czfUPYm59eqjhCSpUlHI/eDl29Zh\nFDXKOe0L9edbHGQPUD5mSWJq+Yjug9yBIj4pvlYleMQaXmpL0h12HX1cGQky\nn+23\r\n=MgYe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","engines":{"npm":">=3.0.0"},"gitHead":"6454853ae720a581e5c16c908530f11f6666bfde","scripts":{"lint":"eslint src","test":"npm run lint && npm run testonly","lintfix":"eslint src --fix","testonly":"mocha --require .scripts/mocha_runner src/**/tests/**/*.js","storybook":"start-storybook -p 9010","prepublish":". ./.scripts/prepublish.sh","test-watch":"npm run testonly -- --watch --watch-extensions js","publish-storybook":"bash .scripts/publish_storybook.sh"},"_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"repository":{"url":"git+https://github.com/storybooks/react-stubber.git","type":"git"},"_npmVersion":"5.5.1","description":"Simple but useful stubbing solution React","directories":{},"_nodeVersion":"8.9.1","dependencies":{"babel-runtime":"^6.5.0"},"devDependencies":{"chai":"^3.5.0","jsdom":"^8.3.1","mocha":"^2.4.5","react":"^15.0.0","sinon":"^1.17.3","enzyme":"^2.2.0","eslint":"^2.7.0","babel-cli":"^6.5.0","react-dom":"^15.0.0","babel-core":"^6.5.0","raw-loader":"^0.5.1","babel-eslint":"^6.0.2","babel-loader":"^6.2.4","style-loader":"^0.13.1","git-url-parse":"^6.0.1","babel-polyfill":"^6.5.0","@kadira/storybook":"^1.35.2","babel-preset-react":"^6.5.0","babel-preset-es2015":"^6.5.0","eslint-plugin-babel":"^3.2.0","eslint-plugin-react":"^4.3.0","babel-preset-stage-2":"^6.5.0","eslint-config-airbnb":"^7.0.0","eslint-plugin-jsx-a11y":"^0.6.2","react-addons-test-utils":"^15.0.0","babel-plugin-transform-runtime":"^6.5.0"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-stubber-1.0.1.tgz_1510764152300_0.4399558794684708","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-11-15T16:42:33.907Z","modified":"2026-10-27T15:16:25.301Z","1.0.1":"2017-11-15T16:42:33.907Z"},"bugs":{"url":"https://github.com/storybooks/react-stubber/issues"},"license":"MIT","homepage":"https://github.com/storybooks/react-stubber#readme","repository":{"url":"git+https://github.com/storybooks/react-stubber.git","type":"git"},"description":"Simple but useful stubbing solution React","maintainers":[{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"shilman@gmail.com","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"varunvachhar@gmail.com","name":"winkervsbecks"},{"email":"kyle.gach@gmail.com","name":"kylegach"},{"email":"jeppe@reinhold.is","name":"jreinhold"},{"email":"kasperpeulen@gmail.com","name":"kasperpeulen"},{"email":"dev@valentinpalkovic.dev","name":"valentinpalkovic"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"storybookbot@gmail.com","name":"storybook-bot"},{"email":"vanessa.yh.yuen@gmail.com","name":"vanessayuenn"}],"readme":"# React Stubber\n\nA simple but useful stubbing solution for React. This will work with any container library whether it's Redux, [React Komposer](https://github.com/kadirahq/react-komposer) or with any React Component.\n\n---\n\nRead this article for an introduction: [Stubbing React Containers for Testing](https://voice.kadira.io/stubbing-react-containers-for-testing-11bcd537e586?source=latest)\n\n## Usage\n\nFirst of all, we need to wrap React classes we need to stub with the `mayBeStubbed` function. See:\n\n```js\nimport React from 'react';\n// compose if our container building library.\nimport compose from './compose';\nimport { mayBeStubbed } from 'react-stubber';\n\nexport const CommentList = () => (\n
\n\n
\n);\nCommentList.displayName = 'CommentList';\nexport const CommentListContainer = mayBeStubbed(compose(CommentList));\n```\n\nThen we can use the `CommentListContainer` anywhere we need.\n\nSo, let's use the above `CommentListContainer` inside another Component called `Post`.\n\n```js\nexport const Post = (post) => (\n
\n
{post.title}
\n
{post.text}
\n \n
Comments
\n \n
\n);\n```\n\nIn order to do isolated testing, first make sure we are in the **stubbing mode**.\n\nWe need to do this, before importing any React component. This is something you could do when doing the test setup or in the React Storybook config file.\n\n```js\nimport { setStubbingMode } from 'react-stubber';\nsetStubbingMode(true);\n```\n\nThen when we render Post we will get something like this:\n\n\n\nWe can also stub this component with a custom component we like. This is how we do that. You need to do this before using the `Post` component. \n(The test file or storybook story file is a good place for this).\n\n```js\nimport { stub } from 'react-stubber';\n\nstub(CommentListContainer3, (props) => (\n
Comments for postId: {props.postId}
\n));\n```\n\nThen once rendered it will looks like this.\n\n\n","readmeFilename":"README.md"}