getByDisplayValue doesn't match TextInput when defaultValue is used

[jdpagley]

Describe the bug

getByDisplayValue doesn't find the TextInput when a defaultValue prop is used instead of value. It will match properly if I change defaultValue to just value

Expected behavior

getByDisplayValue should match a TextInput component if it uses defaultValue or value prop.

Steps to Reproduce

Try to use getByDisplayValue to match a TextInput with the value set via the defaultValue prop instead of value.

Screenshots

The top of the screenshot shows the output of the debug() call. You can see that the query below doesn't match when defaultValue is used.

// Test Case
describe('TextField', function() {

  beforeEach(() => {

    this.props = {
      fieldId: 'fieldId',
      label: 'This is a test label',
      value: 'hello world',
      onChange: jest.fn(),
      onFocus: jest.fn(),
      onBlur: jest.fn(),
      onLayout: jest.fn(),
    }

  });

 it('should display defaultValue when passed in', () => {
    const { getByDisplayValue, debug } = render(<TextField {...this.props}/>);
    debug();
    expect(getByDisplayValue('hello world'));
 });

})

//Render method of component
  render() {

    const {
      fieldId,
      label,
      value,
      placeholder,
      disabled,
      onChange,
      onBlur,
      onFocus,
      onLayout
    } = this.props;

    return (
      <FieldHOC label={label} onLayout={onLayout}>
        <TextInput 
          testID={`${fieldId}-text-field`}
          style={Styles.field}
          disabled={disabled} 
          defaultValue={value}
          placeholder={placeholder}
          onBlur={(e) => {
            this.setState({focused: false});
            if (onBlur) onBlur(fieldId, e)
          }}
          onFocus={(e) => {
            this.setState({focused: true});
            if (onFocus) onFocus(fieldId, e)
          }}
          onChangeText={(changes) => {
            this.setState({changes});
            if (onChange) onChange(fieldId, changes);
          }}
        />
      </FieldHOC>
    );
  }

Versions

[MattAgn]

I think it's due to the getTextInputNodeByDisplayValue method in the getByApi file that only compares the given text with the value prop:

const getTextInputNodeByDisplayValue = (node, value) => {
  try {
    const { TextInput } = require('react-native');
    return (
      filterNodeByType(node, TextInput) &&
      (typeof value === 'string'
        ? value === node.props.value
        : value.test(node.props.value))
    );
  } catch (error) {
    throw createLibraryNotSupportedError(error);
  }
};

A fix could be to add the comparison with the defaultValue in the return of getTextInputNodeByDisplayValue. I'd be glad to do the PR that fixes it

[thymikee]

@MattAgn yup, we should account for defaultValue as well. PR very welcome! 🙂

[mdjastrzebski]

Resolved by #656