{"_id":"react-router-enzyme-context","_rev":"5-be9b3eb806a7978d3bbe8712e2beee24","name":"react-router-enzyme-context","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"react-router-enzyme-context","version":"1.0.0","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","main":"dist/react-router-enzyme-context.cjs.js","module":"dist/react-router-enzyme-context.esm.js","scripts":{"build":"rollup -c","dev":"rollup -c -w","lint":"eslint . --ext .js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"author":{"name":"Matthew Toledo"},"license":"MIT","bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","dependencies":{"history":"^4.7.2","prop-types":"^15.6.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","eslint":"^4.16.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","rollup":"^0.55.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2"},"gitHead":"27697000d65b30c36eee1ad709835c0ee7a32a46","_id":"react-router-enzyme-context@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.3","_npmUser":{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"},"dist":{"integrity":"sha512-uvTWvXNE3rloDbI6HWrRvs0iEio/J9ngd/Hhcl6bEtNpzCAVG2q0D35v1Gj47fkII9ygBQJJX6+mG+/FuxYGnA==","shasum":"9e52bd63041420958311fce2ac80db939bbbf79c","tarball":"https://registry.npmjs.org/react-router-enzyme-context/-/react-router-enzyme-context-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9L9u0ad2si/4w5aqr4taZ7VrwdwcCSS8OnCJ42eCjyQIhAJtUo3JhsnrReLm34S9xqF9Jw6vaqSQqMgDcgzgsi+bb"}]},"maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-enzyme-context-1.0.0.tgz_1516829122411_0.40415562433190644"}},"1.1.0":{"name":"react-router-enzyme-context","version":"1.1.0","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","main":"dist/react-router-enzyme-context.cjs.js","module":"dist/react-router-enzyme-context.esm.js","scripts":{"build":"rollup -c","dev":"rollup -c -w","lint":"eslint . --ext .js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"author":{"name":"Matthew Toledo"},"license":"MIT","bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","dependencies":{"history":"^4.7.2","prop-types":"^15.6.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","eslint":"^4.16.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","rollup":"^0.55.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2"},"gitHead":"22797af6a553af1a2a982d535ae569bcf17da923","_id":"react-router-enzyme-context@1.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.3","_npmUser":{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"},"dist":{"integrity":"sha512-ajBuyocSz/7I45RbSmGPuKWcfZXlYLN9bCMWl8wOwEQLf4tbAeikQ/c+Ho5Q3a45+f+XpLMaIeMTIzp1C7O8Nw==","shasum":"ae8bd933e5a5f16af11863d1bda85e034ad8922b","tarball":"https://registry.npmjs.org/react-router-enzyme-context/-/react-router-enzyme-context-1.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Gs5ZiRpIQMROZpt/t2MbFxoKiHg9+mKmPz9dwcJUQwIhAK89XhXHQr1nnC/nTCqt+MF68dUPto0rYoeMMJM63vZa"}]},"maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-enzyme-context-1.1.0.tgz_1517257875746_0.5777766520623118"}},"1.1.1":{"name":"react-router-enzyme-context","version":"1.1.1","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","main":"dist/react-router-enzyme-context.cjs.js","module":"dist/react-router-enzyme-context.esm.js","scripts":{"build":"rollup -c","dev":"rollup -c -w","lint":"eslint . --ext .js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"author":{"name":"Matthew Toledo"},"license":"MIT","bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","dependencies":{"history":"^4.7.2","prop-types":"^15.6.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","eslint":"^4.16.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","rollup":"^0.55.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2"},"gitHead":"5615dcdaf68fae79a8194e6887187c32901c9428","_id":"react-router-enzyme-context@1.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.3","_npmUser":{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"},"dist":{"integrity":"sha512-gZbI/T14L21vNSoeHDP5cXz5bBFUkEqOZnig6x3DVewSE5lqE7JTuIWUAYLpzvhG8DiXoirKVRELlMTsw+1qdQ==","shasum":"afad95555faf5632f1383a285f8f9c1841085432","tarball":"https://registry.npmjs.org/react-router-enzyme-context/-/react-router-enzyme-context-1.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/9ei9x7MqIhViiKr/FBY43HWdR3pKzJPlpOxRQTIg0AIgRizUiaCbAElgSccvobGd685Ed5VYNPLeLOkTxOcnSt8="}]},"maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-enzyme-context-1.1.1.tgz_1517259863635_0.5863050962798297"}},"1.1.3":{"name":"react-router-enzyme-context","version":"1.1.3","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","main":"dist/react-router-enzyme-context.cjs.js","module":"dist/react-router-enzyme-context.esm.js","scripts":{"prepublishOnly":"npm run build","build":"rollup -c","dev":"rollup -c -w","lint":"eslint . --ext .js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"author":{"name":"Matthew Toledo"},"license":"MIT","bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","dependencies":{"history":"^4.7.2","prop-types":"^15.6.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","eslint":"^4.16.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","rollup":"^0.55.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2"},"gitHead":"b1c1aaef5889a6c2d2aa986546ca295153c01650","_id":"react-router-enzyme-context@1.1.3","_npmVersion":"5.6.0","_nodeVersion":"8.9.3","_npmUser":{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"},"dist":{"integrity":"sha512-rozQcBcawy2jsJbSgtQiureL6QrSqMULWzD5EJeyJDnIaTfVZN47IuTMtC3qncqQTJ2hgKPdlkvK8JcCjIks3w==","shasum":"f3a5b439e77fac1e817e3a0cd8c4345253202d3c","tarball":"https://registry.npmjs.org/react-router-enzyme-context/-/react-router-enzyme-context-1.1.3.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIH8Z4IPlGcM4YJ2TenGdgo/xpMLh1kqfvDykLYYcB6AiAaTpChadN1h1QxLmT/+B2OwEz6oAYp/lk7p9gfiTDvlQ=="}]},"maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-enzyme-context-1.1.3.tgz_1517260540838_0.4959838285576552"}},"1.2.0":{"name":"react-router-enzyme-context","version":"1.2.0","description":"A helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().","main":"dist/react-router-enzyme-context.cjs.js","module":"dist/react-router-enzyme-context.esm.js","scripts":{"prepublishOnly":"npm run build","build":"rollup -c","dev":"rollup -c -w","lint":"eslint . --ext .js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"author":{"name":"Matthew Toledo"},"license":"MIT","bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","dependencies":{"history":"^4.7.2","prop-types":"^15.6.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-preset-env":"^1.6.1","eslint":"^4.16.0","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.5.1","rollup":"^0.55.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.6","rollup-plugin-node-resolve":"^3.0.2"},"gitHead":"d87b8f0eeada42fd25f15ce4b146a7b682965b02","_id":"react-router-enzyme-context@1.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.3","_npmUser":{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"},"dist":{"integrity":"sha512-z6+PQ6sdOHsRk9u4gSfsbeEuWZeogffrmgHo4dFXX5t/K8mUFftZBJQ+imzL3f3T6rkIIp+J7I0CeREYgcqe9A==","shasum":"7aa11c80e23278fa31f8a29845f7b37760d99350","tarball":"https://registry.npmjs.org/react-router-enzyme-context/-/react-router-enzyme-context-1.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4l0ChX0LZQwSVLhdNHIHHnYIeNBOJ5Ue3DVRl4+yz1AiB3uz4LqDUomQp3buMhvkqoCwfD1veKsjyDEkkLXY8ZTQ=="}]},"maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-router-enzyme-context-1.2.0.tgz_1517493795926_0.17027930147014558"}}},"readme":"# react-router-enzyme-context\nA helper for mocking react router v4 context and childContextTypes when testing components with Enzyme mount() and shallow().\n\nThis package uses React-Router's history module to mock the history.  Specifically, we use their memoryHistory module which was designed for use in testing environments.\n\nIt creates a context option and a contextChildTypes option that can be used by Enzyme's mount() and shallow() API's to ensure that all descendants of the component being tested have the correct react-router context.\n\n#### Install\n\n`npm install --save-dev react-router-enzyme-context`\n\n#### Quick Usage Example\n\n```javascript\n  const options = new ReactRouterEnzymeContext();\n  const wrapper = mount(\n    <ClickMe destination=\"/somehwere/someplace\" />,\n    options.get()\n  );\n});\n```\n\nOr...\n\n```javascript\nconst options = new ReactRouterEnzymeContext();\nconst wrapper = mount(\n  <ClickMe destination=\"/somehwere/someplace\" />,\n  {\n    context: options.getContext(),\n    childContextTypes: options.getChildContextTypes(),\n  }\n);\n```\n\n\n\n\n\n## Problem\nLet's say you are performing a unit test on a component that uses react-router v4's Link component. When you click on the link, a react-router executes a route, and the component increments a counter that is stored in it's state.\n\nHere is our simple example of a \"dumb component\" that would be placed within a \"container component\" that, in turn, is part of a react router route.\n\n```javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport scss from './MyExample.scss';\n\nexport default class ClickMe extends React.Component {\n  static propTypes = {\n    destination: PropTypes.string.isRequired,\n  }\n\n  constructor() {\n    super();\n    this.state = {\n      count: 0,\n    };\n\n    this.onClick = this.onClick.bind(this);\n  }\n\n  onClick() {\n    this.setState({\n      count: this.state.count += 1,\n    });\n  }\n\n  render () {\n    return (\n      <div className={scss.linkWrapper}>\n        <Link\n          className={scss.link}\n          to={this.props.destination}\n          onClick={this.onClick}\n        >\n          Clicked\n          <span className={scss.count}>{this.state.count}<span> Times!<span>\n        </Link>\n      </div>\n    )\n  }\n}\n```\n\nHere is an integration test using jest and enzyme to see if the counter increments.\n\n```javascript\nimport React from 'react';\nimport { mount, configure } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\n\nimport ClickMe from './ClickMe';\n\nconfigure({ adapter: new Adapter() });\n\ndescribe('<ClickMe />', () => {\n  it('should increment when clicked', () => {\n    const wrapper = mount(<ClickMe destination=\"/somehwere/someplace\" />);\n    wrapper.find('.link').simulate('click');\n    expect(wrapper.state('count')).toBe(1);\n  });  \n})\n```\n\nThe test above will crash because Enzyme will complain that the Link component must be a descendant of a Router compnent. The react-router library uses React's [**context**](https://reactjs.org/docs/context.html) feature to pass data between other react-router components.  Many React component libraries use context to communicate.\n\n```\n● <Click Me /> › should increment when clicked\n\n   Invariant Violation: You should not use <Link> outside a <Router>\n```\n\nYou can go through the trouble of wrapping your `<ClickMe>` component inside of a `<Router>`. However, enzyme can only find the state of the root component.\n\n```javascript\n<Router>  // <--- I am now the root\n  <ClickMe> // <--- Enzyme can't test my state or props because I'm not the root!\n</Router>\n```\n\n## Solution\nEnzyme lets you specify the context directly when you call mount or shallow.  Both [**mount**](http://airbnb.io/enzyme/docs/api/mount.html#mountnode-options--reactwrapper) and [**shallow**](http://airbnb.io/enzyme/docs/api/shallow.html#shallownode-options--shallowwrapper) have a second optional argument where you can supply context and other things.\n\nHere is an excerpt from the Enzyme documentation:\n\n---\n\n### mount(node[, options]) => ReactWrapper\n\n#### Arguments\n\n1. node (ReactElement): The node to render\n2. options (Object [optional]):\n3. options.context: (Object [optional]): Context to be passed into the 4. component\n5. options.attachTo: (DOMElement [optional]): DOM Element to attach the component to.\n6. options.childContextTypes: (Object [optional]): Merged contextTypes for all children of the wrapper.\n\n#### Returns\n- ReactWrapper: The wrapper instance around the rendered output.\n\n---\nWhen you supply the context in this manner, your `<ClickMe />` component is still the root!  So you can test state and props.  \n\nHere is an example using our react-router-enzyme-context module.\n\n```javascript\nimport React from 'react';\nimport { mount, configure } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport ReactRouterEnzymeContext from 'react-router-enzyme-context';\n\nimport ClickMe from './ClickMe';\n\nconfigure({ adapter: new Adapter() });\n\ndescribe('<ClickMe />', () => {\n  it('should increment when clicked', () => {\n    const options = new ReactRouterEnzymeContext();\n    const wrapper = mount(\n      <ClickMe destination=\"/somehwere/someplace\" />,\n      options.get()\n    );\n    wrapper.find('.link').simulate('click');\n    expect(wrapper.state('count')).toBe(1);\n  });  \n})\n```\n\n\n### Simulating props passed via withRouter() HOC\n\nIf the component you are testing is directly wrapped by react-router's withRouter() higher order component, you may want to insert the history and location props into your component.  \n\nCurrently, match is not supported.  You'll have to insert those manually.\n\n```javascript\n  import React from 'react';\n  import { withRouter } from 'react-router';\n\n  export default withRouter((props) => {\n    const location = { props };\n    return (\n      <div>\n        <h1>My Location:</h1>\n        <p>{location.pathName}</p>\n      </div>\n    )\n  });\n```\n\n```javascript\nimport React from 'react';\nimport { mount, configure } from 'enzyme';\nimport Adapter from 'enzyme-adapter-react-16';\nimport ReactRouterEnzymeContext from 'react-router-enzyme-context';\n\nimport WhereAmI from './WhereAmI';\n\nconfigure({ adapter: new Adapter() });\n\ndescribe('<WhereAmiI />', () => {\n  it('should tell me my current location', () => {\n    const mockRouter = new ReactRouterEnzymeContext();\n    mockRouter.props().history.go('/new/location');\n    const wrapper = mount(\n      <WhereAmI {...mockRouter.props()} />\n    );\n    expect(wrapper.find('p').text()).toBe('/new/location');\n  });  \n})\n```\n","maintainers":[{"name":"mrbinky3000","email":"mrbinky3000@gmail.com"}],"time":{"modified":"2022-05-15T03:04:02.318Z","created":"2018-01-24T21:25:23.388Z","1.0.0":"2018-01-24T21:25:23.388Z","1.1.0":"2018-01-29T20:31:15.832Z","1.1.1":"2018-01-29T21:04:24.750Z","1.1.3":"2018-01-29T21:15:40.933Z","1.2.0":"2018-02-01T14:03:18.923Z"},"homepage":"https://github.com/express-labs/react-router-enzyme-context#readme","keywords":["react","router","mocking","mount","shallow","enzyme","context","childContextTypes"],"repository":{"type":"git","url":"git+https://github.com/express-labs/react-router-enzyme-context.git"},"author":{"name":"Matthew Toledo"},"bugs":{"url":"https://github.com/express-labs/react-router-enzyme-context/issues"},"license":"MIT","readmeFilename":"README.md"}