{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/jest/issues/2172","repository_url":"https://api.github.com/repos/facebook/jest","labels_url":"https://api.github.com/repos/facebook/jest/issues/2172/labels{/name}","comments_url":"https://api.github.com/repos/facebook/jest/issues/2172/comments","events_url":"https://api.github.com/repos/facebook/jest/issues/2172/events","html_url":"https://github.com/facebook/jest/issues/2172","id":191892209,"node_id":"MDU6SXNzdWUxOTE4OTIyMDk=","number":2172,"title":"Snapshot test for component with uuid","user":{"login":"reintroducing","id":259901,"node_id":"MDQ6VXNlcjI1OTkwMQ==","avatar_url":"https://avatars1.githubusercontent.com/u/259901?v=4","gravatar_id":"","url":"https://api.github.com/users/reintroducing","html_url":"https://github.com/reintroducing","followers_url":"https://api.github.com/users/reintroducing/followers","following_url":"https://api.github.com/users/reintroducing/following{/other_user}","gists_url":"https://api.github.com/users/reintroducing/gists{/gist_id}","starred_url":"https://api.github.com/users/reintroducing/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reintroducing/subscriptions","organizations_url":"https://api.github.com/users/reintroducing/orgs","repos_url":"https://api.github.com/users/reintroducing/repos","events_url":"https://api.github.com/users/reintroducing/events{/privacy}","received_events_url":"https://api.github.com/users/reintroducing/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-11-27T23:01:39Z","updated_at":"2018-09-17T17:36:51Z","closed_at":"2016-11-27T23:13:23Z","author_association":"NONE","body":"I have an interesting test issue. I've got custom components that use the uuid node package to generate unique IDs which I can map to labels for accessibility purposes. Here is a sample Checkbox component, for instance:\r\n```js\r\nimport React, {PropTypes} from 'react';\r\nimport classNames from 'classnames';\r\nimport {v4} from 'uuid';\r\nimport Label from './Label';\r\nimport Icon from './Icon';\r\n\r\nconst Checkbox = ({\r\n    label,\r\n    className,\r\n    name,\r\n    defaultChecked,\r\n    disabled,\r\n    toggle,\r\n    onChange\r\n}) => {\r\n    const classes = classNames(\r\n        'Checkbox',\r\n        {'Checkbox-toggle': toggle},\r\n        'FormElement',\r\n        'FormElement-optional',\r\n        className\r\n    );\r\n    const id = `Checkbox-${v4()}`;\r\n\r\n    return (\r\n        <div className={classes}>\r\n            <input\r\n                className=\"FormElement-item\"\r\n                id={id}\r\n                type=\"checkbox\"\r\n                name={name}\r\n                onChange={onChange}\r\n                defaultChecked={defaultChecked}\r\n                title={label}\r\n                aria-label={label}\r\n                disabled={disabled}\r\n            />\r\n            <Icon id=\"check\" />\r\n            <Label htmlFor={id}>{!toggle && label}</Label>\r\n        </div>\r\n    );\r\n};\r\n\r\nCheckbox.propTypes = {\r\n    className: PropTypes.string,\r\n    name: PropTypes.string,\r\n    label: PropTypes.string.isRequired,\r\n    defaultChecked: PropTypes.bool,\r\n    onChange: PropTypes.func,\r\n    disabled: PropTypes.bool,\r\n    toggle: PropTypes.bool\r\n};\r\n\r\nCheckbox.defaultProps = {\r\n    defaultChecked: false\r\n};\r\n\r\nexport default Checkbox;\r\n```\r\nThis works fantastic in my app and keeps accessibility happy. Now, I'm adding Jest snapshot testing to my setup and testing this component. The issue obviously happens when `v4()` runs because it creates a unique ID every single test run so the snapshots never match up.\r\n\r\nWhat is the suggested way to deal with this? I can't imagine I'm the only one in the world doing something like this but you never know :)\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/jest/issues/comments/422104850","html_url":"https://github.com/facebook/jest/issues/2172#issuecomment-422104850","issue_url":"https://api.github.com/repos/facebook/jest/issues/2172","id":422104850,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMjEwNDg1MA==","user":{"login":"renatoi","id":371207,"node_id":"MDQ6VXNlcjM3MTIwNw==","avatar_url":"https://avatars2.githubusercontent.com/u/371207?v=4","gravatar_id":"","url":"https://api.github.com/users/renatoi","html_url":"https://github.com/renatoi","followers_url":"https://api.github.com/users/renatoi/followers","following_url":"https://api.github.com/users/renatoi/following{/other_user}","gists_url":"https://api.github.com/users/renatoi/gists{/gist_id}","starred_url":"https://api.github.com/users/renatoi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/renatoi/subscriptions","organizations_url":"https://api.github.com/users/renatoi/orgs","repos_url":"https://api.github.com/users/renatoi/repos","events_url":"https://api.github.com/users/renatoi/events{/privacy}","received_events_url":"https://api.github.com/users/renatoi/received_events","type":"User","site_admin":false},"created_at":"2018-09-17T17:36:51Z","updated_at":"2018-09-17T17:36:51Z","author_association":"NONE","body":"Just for completeness sake, if you need different UUIDs but with deterministic values for testing, this is how you would do it:\r\n\r\n```js\r\njest.mock(\"uuid/v4\", () => {\r\n  let value = 0;\r\n  return () => value++;\r\n});\r\n```"}}
{"actor":{"display_login":"renatoi"}}