{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/951","repository_url":"https://api.github.com/repos/airbnb/enzyme","labels_url":"https://api.github.com/repos/airbnb/enzyme/issues/951/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/enzyme/issues/951/comments","events_url":"https://api.github.com/repos/airbnb/enzyme/issues/951/events","html_url":"https://github.com/airbnb/enzyme/issues/951","id":230025054,"number":951,"title":"Cannot find custom component using selector with property value","user":{"login":"andriichernenko","id":4421971,"avatar_url":"https://avatars3.githubusercontent.com/u/4421971?v=3","gravatar_id":"","url":"https://api.github.com/users/andriichernenko","html_url":"https://github.com/andriichernenko","followers_url":"https://api.github.com/users/andriichernenko/followers","following_url":"https://api.github.com/users/andriichernenko/following{/other_user}","gists_url":"https://api.github.com/users/andriichernenko/gists{/gist_id}","starred_url":"https://api.github.com/users/andriichernenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andriichernenko/subscriptions","organizations_url":"https://api.github.com/users/andriichernenko/orgs","repos_url":"https://api.github.com/users/andriichernenko/repos","events_url":"https://api.github.com/users/andriichernenko/events{/privacy}","received_events_url":"https://api.github.com/users/andriichernenko/received_events","type":"User","site_admin":false},"labels":[{"id":284995846,"url":"https://api.github.com/repos/airbnb/enzyme/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-05-19T16:26:32Z","updated_at":"2017-05-23T11:52:26Z","closed_at":"2017-05-22T18:42:18Z","body":"I have a custom text input component in my React Native app which wraps `TextInput`:\r\n```jsx\r\nexport class FnTextInput extends Component {\r\n\tstatic propTypes = {\r\n\t\t...TextInput.propTypes\r\n\t};\r\n\r\n\tstatic defaultProps = {\r\n\t\tstyle: {}\r\n\t};\r\n\r\n\tprops: {\r\n\t\tstyle?: any,\r\n\t};\r\n\r\n\ttextInput: TextInput;\r\n\r\n\tfocus() {\r\n\t\tthis.textInput.focus();\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<TextInput\r\n\t\t\t\t{...this.props}\r\n\t\t\t\tid=\"textInput\"\r\n\t\t\t\tref={e => (this.textInput = e)}\r\n\t\t\t\tstyle={[styles.textInput, this.props.style]}\r\n\t\t\t\tselectionColor={colors.fortnoxGreen}\r\n\t\t\t\tplaceholderTextColor={colors.secondaryText}\r\n\t\t\t\tautoCapitalize=\"none\"\r\n\t\t\t\tautoCorrect={false}\r\n\t\t\t\tclearButtonMode=\"while-editing\"\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n}\r\n```\r\n\r\nI have 2 such text inputs in my login view:\r\n```jsx\r\n<...>\r\n\t<FnTextInput\r\n\t\tid=\"usernameInput\"\r\n\t\tplaceholder={strings.t('login.usernamePlaceholder')}\r\n\t/>\r\n\r\n\t<FnTextInput\r\n\t\tid=\"passwordInput\"\r\n\t\tplaceholder={strings.t('login.passwordPlaceholder')}\r\n\t/>\r\n</...>\r\n```\r\n\r\nI `mount()` login view in tests and try to find the text fields by their ID:\r\n```js\r\nconst loginView = mount(<LoginView />);\r\nconst usernameInput = loginView.find('FnTextInput[id=\"usernameInput\"]');\r\n```\r\nUnfortunately, this lookup fails, `usernameInput` is empty. \r\nHowever, the following lookups work as expected:\r\n```js\r\nconst textInputs = loginView.find('FnTextInput');\r\nconst usernameInput = loginView.find('TextInput[id=\"textInput\"]');\r\n```\r\n\r\nI use [react-native-mock-render](https://github.com/Root-App/react-native-mock-render) to enable deep rendering, if it matters. My React Native version is 0.42.3."},"comment":{"url":"https://api.github.com/repos/airbnb/enzyme/issues/comments/303374552","html_url":"https://github.com/airbnb/enzyme/issues/951#issuecomment-303374552","issue_url":"https://api.github.com/repos/airbnb/enzyme/issues/951","id":303374552,"user":{"login":"andriichernenko","id":4421971,"avatar_url":"https://avatars3.githubusercontent.com/u/4421971?v=3","gravatar_id":"","url":"https://api.github.com/users/andriichernenko","html_url":"https://github.com/andriichernenko","followers_url":"https://api.github.com/users/andriichernenko/followers","following_url":"https://api.github.com/users/andriichernenko/following{/other_user}","gists_url":"https://api.github.com/users/andriichernenko/gists{/gist_id}","starred_url":"https://api.github.com/users/andriichernenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andriichernenko/subscriptions","organizations_url":"https://api.github.com/users/andriichernenko/orgs","repos_url":"https://api.github.com/users/andriichernenko/repos","events_url":"https://api.github.com/users/andriichernenko/events{/privacy}","received_events_url":"https://api.github.com/users/andriichernenko/received_events","type":"User","site_admin":false},"created_at":"2017-05-23T11:52:26Z","updated_at":"2017-05-23T11:52:26Z","body":"Yeah, the tests work now, but I am afraid the issue has not been resolved (or maybe I don't quite understand how lookup is supposed to work?). \r\nLookup by `id` still does not find the wrapper component (`FnTextInput`), finding the wrapped `TextInput` instead (since `{...this.props}` gives it the same `id`).\r\n\r\nHere are the lookup results I get:\r\n\r\n`loginView.find('[id=\"usernameInput\"]').debug();`\r\n```jsx\r\n<TextInput id=\"usernameInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\" />\r\n```\r\n`const allFnTextInputs = loginView.find(FnTextInput).debug();`\r\n```jsx\r\n<FnTextInput id=\"usernameInput\" style={{...}}>\r\n  <TextInput id=\"usernameInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\">\r\n    <TextInput id=\"usernameInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\" />\r\n  </TextInput>\r\n</FnTextInput>\r\n\r\n<FnTextInput id=\"passwordInput\" style={{...}}>\r\n   <TextInput id=\"passwordInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\">\r\n      <TextInput id=\"passwordInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\" />\r\n   </TextInput>\r\n</FnTextInput>\r\n```\r\n\r\n`const usernameInput = allFnTextInputs.find('[id=\"usernameInput\"]').debug();`\r\n```jsx\r\n<TextInput id=\"usernameInput\" style={{...}} selectionColor=\"#00aa00\" placeholderTextColor=\"#000000\" autoCapitalize=\"none\" autoCorrect={false} clearButtonMode=\"while-editing\" />\r\n```"}}
{"actor":{"display_login":"andriichernenko"}}