DisplayValue Queries on Empty Text Fields #86
Description
Hello,
I am using React Native 0.61.5 with native-testing-library version 5.0.1 and Node 10.14. I recently upgraded my React Native project from 0.59 to 0.61. As a part of that upgrade, I also upgraded my Testing Library version from 4.0.7 to 5.0.1. It appears that the *DisplayValue queries cannot find text elements with empty values.
I believe the issue is the "if" block on Line 25 of this file (I have not confirmed yet, but I will spend some time on it):
https://github.com/testing-library/native-testing-library/blob/master/src/lib/matches.js
Relevant code or config:
Here is an example failing test.
import React from 'react';
import mount from 'core/test/support/mount'; // In my project, this is basically just the render function from native-testing-library
import { TextInput } from 'react-native';
function TextElement() {
return <TextInput value={''} />;
}
function mountComponent() {
return mount(
<TextElement />
);
}
it('finds the empty text element', () => {
const { getByDisplayValue } = mountComponent();
getByDisplayValue('');
});
For reference, here is the debug output:
<View
pointerEvents="box-none"
style={
Object {
"flex": 1,
}
}
>
<View
collapsable={true}
pointerEvents="box-none"
style={
Object {
"flex": 1,
}
}
>
<TextInput
allowFontScaling={true}
rejectResponderTermination={true}
underlineColorAndroid="transparent"
value=""
/>
</View>
</View>
I'll see if I can fix this locally. I'll try to submit a PR with a potential fix, but I am not sure why the code in matches.js was added between 4.0.7 and 5.0.1, and I don't want to introduce another potential bug. Any insight or guidance on how to test empty text fields would be great.