Cannot find custom component using selector with property value

I have a custom text input component in my React Native app which wraps TextInput:

export class FnTextInput extends Component {
	static propTypes = {
		...TextInput.propTypes
	};

	static defaultProps = {
		style: {}
	};

	props: {
		style?: any,
	};

	textInput: TextInput;

	focus() {
		this.textInput.focus();
	}

	render() {
		return (
			<TextInput
				{...this.props}
				id="textInput"
				ref={e => (this.textInput = e)}
				style={[styles.textInput, this.props.style]}
				selectionColor={colors.fortnoxGreen}
				placeholderTextColor={colors.secondaryText}
				autoCapitalize="none"
				autoCorrect={false}
				clearButtonMode="while-editing"
			/>
		);
	}
}

I have 2 such text inputs in my login view:

<...>
	<FnTextInput
		id="usernameInput"
		placeholder={strings.t('login.usernamePlaceholder')}
	/>

	<FnTextInput
		id="passwordInput"
		placeholder={strings.t('login.passwordPlaceholder')}
	/>
</...>

I mount() login view in tests and try to find the text fields by their ID:

const loginView = mount(<LoginView />);
const usernameInput = loginView.find('FnTextInput[id="usernameInput"]');

Unfortunately, this lookup fails, usernameInput is empty. However, the following lookups work as expected:

const textInputs = loginView.find('FnTextInput');
const usernameInput = loginView.find('TextInput[id="textInput"]');

I use react-native-mock-render to enable deep rendering, if it matters. My React Native version is 0.42.3.

[ljharb]

I’d recommend using findWhere, and implementing your find logic in JS, instead of as string selectors - both because enzyme is currently very limited in its string selector capability, but also because it’s more declarative than “magic strings”.

[samit4me]

Hi @andriichernenko, I’m not sure you can find your component using a string unless the component has a displayName set. So you can find using the actual component or you could use the id as it’s unique.

// using id only
loginView.find('[id="usernameInput"]');

// OR 
// using the component (it will require FnTextInput to be imported into your test)
loginView.find(FnTextInput).find('[id="usernameInput"]');

I’m not sure why the `TextInput[id=“textInput”]’ works (I’m not familiar with RN) but I can only assume it has a displayName set.

See this page for more info. I hope that helps!