{"_id":"@storybook/react-stubber","_rev":"472893","name":"@storybook/react-stubber","description":"Simple but useful stubbing solution React","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"time":{"modified":"2021-08-05T08:25:39.000Z","created":"2017-11-15T16:42:33.907Z","1.0.1":"2017-11-15T16:42:33.907Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/storybooks/react-stubber.git"},"versions":{"1.0.1":{"name":"@storybook/react-stubber","version":"1.0.1","description":"Simple but useful stubbing solution React","repository":{"type":"git","url":"git+https://github.com/storybooks/react-stubber.git"},"license":"MIT","scripts":{"prepublish":". ./.scripts/prepublish.sh","lint":"eslint src","lintfix":"eslint src --fix","testonly":"mocha --require .scripts/mocha_runner src/**/tests/**/*.js","test":"npm run lint && npm run testonly","test-watch":"npm run testonly -- --watch --watch-extensions js","storybook":"start-storybook -p 9010","publish-storybook":"bash .scripts/publish_storybook.sh"},"devDependencies":{"react":"^15.0.0","react-dom":"^15.0.0","babel-core":"^6.5.0","babel-loader":"^6.2.4","babel-polyfill":"^6.5.0","babel-preset-es2015":"^6.5.0","babel-preset-react":"^6.5.0","babel-preset-stage-2":"^6.5.0","babel-plugin-transform-runtime":"^6.5.0","babel-cli":"^6.5.0","eslint":"^2.7.0","babel-eslint":"^6.0.2","eslint-config-airbnb":"^7.0.0","eslint-plugin-babel":"^3.2.0","eslint-plugin-react":"^4.3.0","mocha":"^2.4.5","chai":"^3.5.0","sinon":"^1.17.3","enzyme":"^2.2.0","react-addons-test-utils":"^15.0.0","jsdom":"^8.3.1","eslint-plugin-jsx-a11y":"^0.6.2","@kadira/storybook":"^1.35.2","style-loader":"^0.13.1","raw-loader":"^0.5.1","git-url-parse":"^6.0.1"},"peerDependencies":{"react":"^0.14.7 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"^6.5.0"},"main":"dist/index.js","engines":{"npm":">=3.0.0"},"gitHead":"6454853ae720a581e5c16c908530f11f6666bfde","bugs":{"url":"https://github.com/storybooks/react-stubber/issues"},"homepage":"https://github.com/storybooks/react-stubber#readme","_id":"@storybook/react-stubber@1.0.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"dist":{"shasum":"8c312c2658b9eeafce470e1c39e4193f0b5bf9b1","size":436581,"noattachment":false,"key":"/@storybook/react-stubber/-/@storybook/react-stubber-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@storybook/react-stubber/download/@storybook/react-stubber-1.0.1.tgz"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-stubber-1.0.1.tgz_1510764152300_0.4399558794684708"},"directories":{},"publish_time":1510764153907,"_hasShrinkwrap":false,"_cnpm_publish_time":1510764153907}},"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);\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![](docs/with-default-stub.png)\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![](docs/with-custom-stub.png)\n","_attachments":{},"homepage":"https://github.com/storybooks/react-stubber#readme","bugs":{"url":"https://github.com/storybooks/react-stubber/issues"},"license":"MIT"}