{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/jest/issues/1557","repository_url":"https://api.github.com/repos/facebook/jest","labels_url":"https://api.github.com/repos/facebook/jest/issues/1557/labels{/name}","comments_url":"https://api.github.com/repos/facebook/jest/issues/1557/comments","events_url":"https://api.github.com/repos/facebook/jest/issues/1557/events","html_url":"https://github.com/facebook/jest/issues/1557","id":174500994,"node_id":"MDU6SXNzdWUxNzQ1MDA5OTQ=","number":1557,"title":"How to mock just the React components from a module exporting many things","user":{"login":"stipsan","id":81981,"node_id":"MDQ6VXNlcjgxOTgx","avatar_url":"https://avatars2.githubusercontent.com/u/81981?v=4","gravatar_id":"","url":"https://api.github.com/users/stipsan","html_url":"https://github.com/stipsan","followers_url":"https://api.github.com/users/stipsan/followers","following_url":"https://api.github.com/users/stipsan/following{/other_user}","gists_url":"https://api.github.com/users/stipsan/gists{/gist_id}","starred_url":"https://api.github.com/users/stipsan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stipsan/subscriptions","organizations_url":"https://api.github.com/users/stipsan/orgs","repos_url":"https://api.github.com/users/stipsan/repos","events_url":"https://api.github.com/users/stipsan/events{/privacy}","received_events_url":"https://api.github.com/users/stipsan/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-09-01T11:34:02Z","updated_at":"2018-09-21T12:46:34Z","closed_at":"2016-09-15T02:28:03Z","author_association":"CONTRIBUTOR","body":"**Do you want to request a _feature_ or report a _bug_?**\nNeither: _documentation_\n\n**What is the current behavior?**\nMocking a module that exports just a react component is well documented (and quite pleasant):\n\n``` js\n// ./Link.jsx\nimport Icon from './Icon'\n\nconst Link = ({children, href, icon}) => <a href={href}><Icon type={icon} />{children}</a>\n\nexport default Link\n```\n\n``` js\n// ./__tests__/Link-test.jsx\nimport renderer from 'react-test-renderer'\nimport Link from '../Link'\n\njest.mock('../Icon', () => 'Icon')\n\ndescribe('Link', () => {\n  it('should render correctly', () => {\n    const component = renderer.create(\n      <Link href=\"http://facebook.com/\" icon=\"facebook\">\n        Facebook\n      </Link>\n    )\n    expect(component.toJSON()).toMatchSnapshot()\n  })\n})\n```\n\n**What is the expected behavior?**\nThat it's just as easy to mock components when you're using a library like redux-form (which exports multiple react components, and HOCs and more).\nSomething like this (examples simplified for brevity):\n\n``` js\n// ./Form.jsx\nimport { Field, reduxForm } from 'redux-form/immutable'\n\nconst Form = props => (\n  <form {...props}>\n    <Field component=\"input\" name=\"title\" />\n    <Field component=\"textarea\" name=\"description\" />\n  </form>\n)\n\nexport default reduxForm({\n  form: 'foo',\n})(Form)\n```\n\n``` js\n// ./__tests__/Form-test.jsx\nimport renderer from 'react-test-renderer'\nimport Form from '../Form'\n\njest.mock('redux-form/immutable', () => ({\n  Field: () => 'Field',\n  reduxForm: () => (component) => component, // just pass through component without decorating it\n}))\n\ndescribe('Form', () => {\n  it('should render correctly', () => {\n    const component = renderer.create(\n      <Form />\n    )\n    expect(component.toJSON()).toMatchSnapshot()\n  })\n})\n```\n\nAttempting to do the above will give the following error:\n\n```\nconsole.error node_modules/fbjs/lib/warning.js:36\n      Warning: Field(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.\n```\n\nAs a workaround I'm creating new modules that do nothing but export one component at a time and mock that, but there must be a better way:\n\n``` js\n// ./Field.jsx\nexport { Field as default } from 'redux-form/immutable'\n```\n\n``` js\n// ./Form.jsx\nimport Field from './Field'\nimport { reduxForm } from 'redux-form/immutable'\n\nconst Form = props => (\n  <form {...props}>\n    <Field component=\"input\" name=\"title\" />\n    <Field component=\"textarea\" name=\"description\" />\n  </form>\n)\n\nexport default reduxForm({\n  form: 'foo',\n})(Form)\n```\n\n``` js\n// ./__tests__/Form-test.jsx\nimport renderer from 'react-test-renderer'\nimport Form from '../Form'\n\njest.mock('./Field', () => 'Field')\n\ndescribe('Form', () => {\n  it('should render correctly', () => {\n    const component = renderer.create(\n      <Form />\n    )\n    expect(component.toJSON()).toMatchSnapshot()\n  })\n})\n```\n\n**Run Jest again with `--debug` and provide the full configuration it prints. Please mention your node and npm version and operating system.**\njest: v15.0.2\nosx: v10.11.6\nnode: v6.5.0\n"},"comment":{"url":"https://api.github.com/repos/facebook/jest/issues/comments/423518929","html_url":"https://github.com/facebook/jest/issues/1557#issuecomment-423518929","issue_url":"https://api.github.com/repos/facebook/jest/issues/1557","id":423518929,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMzUxODkyOQ==","user":{"login":"nicolasrouanne","id":12157019,"node_id":"MDQ6VXNlcjEyMTU3MDE5","avatar_url":"https://avatars2.githubusercontent.com/u/12157019?v=4","gravatar_id":"","url":"https://api.github.com/users/nicolasrouanne","html_url":"https://github.com/nicolasrouanne","followers_url":"https://api.github.com/users/nicolasrouanne/followers","following_url":"https://api.github.com/users/nicolasrouanne/following{/other_user}","gists_url":"https://api.github.com/users/nicolasrouanne/gists{/gist_id}","starred_url":"https://api.github.com/users/nicolasrouanne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicolasrouanne/subscriptions","organizations_url":"https://api.github.com/users/nicolasrouanne/orgs","repos_url":"https://api.github.com/users/nicolasrouanne/repos","events_url":"https://api.github.com/users/nicolasrouanne/events{/privacy}","received_events_url":"https://api.github.com/users/nicolasrouanne/received_events","type":"User","site_admin":false},"created_at":"2018-09-21T12:46:34Z","updated_at":"2018-09-21T12:46:34Z","author_association":"NONE","body":"If the object you are trying to mock only has a [`getter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get), @SpadarShut's [solution](https://github.com/facebook/jest/issues/1557#issuecomment-297763118) won't work, I would get an error:\r\n```js\r\n// the following line triggers an error\r\nmoduleToMock.propToMock = (props) => {/* do whatever you need here */ } ;\r\n\r\n>TypeError: Cannot set property RefinementList of [object Object] which has only a getter\r\n```\r\n\r\nThe only solution that works is @cpojer's [answer](https://github.com/facebook/jest/issues/1557#issuecomment-244060424) which I rewrote here slightly differently because I only wanted to **mock one _named export_ of my module and keep the other exports un-mocked**.\r\n\r\n```js\r\njest.mock(\"SomeModule\", () => {\r\n  const RealModule = require.requireActual(\"somemodule\");\r\n  const MyModule = {\r\n    ...RealModule,\r\n    SomeComponentToMock: jest.fn(() => null)\r\n  };\r\n  return MyModule;\r\n});\r\n```"}}
{"actor":{"display_login":"nicolasrouanne"}}