`toHaveProp` not working on Button

[mdjastrzebski]

• react-native or expo: react-native (ver. 4.8.0)
• @testing-library/react-native version: 5.0.3
• jest-preset: react-native
• react-native version: 0.62.2
• node version: v12.16.3

Relevant code or config:

import React from 'react';
import {View, Text, Button} from 'react-native';
import {render} from '@testing-library/react-native';
import '@testing-library/jest-native/extend-expect';

test('toHaveProp works correctly', () => {
  const {queryByTestId} = render(
    <View>
      <Text allowFontScaling={false} testID="text">
        text
      </Text>
      <Button disabled testID="button" title="ok" />
    </View>,
  );

  expect(queryByTestId('button')).toHaveProp('accessibilityStates', [
    'disabled',
  ]);
  expect(queryByTestId('button')).toHaveProp('accessible');
  expect(queryByTestId('button')).not.toHaveProp('disabled');
  expect(queryByTestId('button')).not.toHaveProp('title', 'ok');
});

What you did:

Running toHaveProp sample code for jest-native website.

What happened:

Test fails with following error:

 FAIL  __tests__/jestNative.test.tsx
  ● toHaveProp works correctly

    expect(element).toHaveProp("accessibilityStates", ["disabled"]) // element.getAttribute("accessibilityStates") === ["disabled"]

    Expected the element to have prop:
      accessibilityStates=["disabled"]
    Received:
      null

      14 |   );
      15 | 
    > 16 |   expect(queryByTestId('button')).toHaveProp('accessibilityStates', [
         |                                   ^
      17 |     'disabled',
      18 |   ]);
      19 |   expect(queryByTestId('button')).toHaveProp('accessible');

      at Object.<anonymous> (__tests__/jestNative.test.tsx:16:35)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.456s, estimated 5s

Reproduction:

I've setup a repro repository on github: https://github.com/mdjastrzebski/repro-jest-native-to-have-prop

Basically it's fresh React Native CLI projects, with current version of @testing-library/react-native and @testing-library/jest-native. I have also seen the same problem when using react-native-testing-library instead of @testing-library/react-native.

Problem description:

toHaveProp does not seem to recognize some props on the Button elements. Sample code from jest-native docs fails.

Additional question: why is disabled and title from sample docs supposed to not be recognized by toHaveProp? Is it some issue related to Button or toHaveProp?

Suggested solution:

Fix 'toHaveProp' to work correctly on docs sample code OR fix the docs.
Document and explain non-trival behavior when checking Button props.

Can you help us fix this issue by submitting a pull request?

Not really, as I do not know what should be the expected behavior.

[JanithaR]

Also not working on Picker from @react-native-community/picker

picker props = {
testID: 'picker',
style: [ { height: 216 }, undefined ],
items: [
{ value: 'USD', label: 'USD', textColor: undefined },
{ value: 'LKR', label: 'LKR', textColor: undefined }
],
selectedIndex: 0,
onChange: [Function],
children: undefined
}

it('should change the selected index when changed', () => {
            const { getByTestId } = setup();
            const picker = getByTestId(testIds.picker);

            console.log('picker props = ', picker.props);

            expect(picker).toHaveProp('selectedIndex', 0);

            fireEvent(picker, 'onValueChange', 'LKR');

            expect(picker).toHaveProp('selectedIndex', 3);
        });

The tests always pass regardless of what I'm passing as the prop value.

[brunohkbx]

I'll try to spare some time to help you guys. Do you have any suggestions in mind to fix that? If so, feel free to open a PR.

[thymikee]

@mdjastrzebski anything changing from RNTL side provided this PR you recently contributed? callstack/react-native-testing-library#460

[mdjastrzebski]

I'll try to reproduce it with TL/RN v7.

[yonatan-altaraz]

i'm experiencing this too.
using these versions:

"@testing-library/jest-native": "^3.3.0",
"@testing-library/react-native": "^7.0.2",
"react-test-renderer": "16.6.3"

i see there's a flag called isAllowed in this function (toHaveProp), if it's false, the value check is ignored and it passes if the prop exists.
it seems to be false if the element is not in a 'valid_elements' list (don't understand why it's necessary), the issue in my case is:
this is the row to determine the flag value:
var isAllowed = _utils.VALID_ELEMENTS.includes(element.type); -> to-have-prop.js : 27
but VALID_ELEMENTS is a list of strings (components names) and element.type is a component instance, with a property displayName that suits this list. if i change your code to:
var isAllowed = _utils.VALID_ELEMENTS.includes(element.type.displayName);, is works fine.

also maybe i miss something but i don't understand why there are components that aren't allowed to have their props checked for values? (what is the meaning of that flag?)

[yonatan-altaraz]

i now see it happens for me when i get the ReactTestInstance using getByText accessor,
and if i'm using getByTestId it returns a ReactTestInstance with a slightly different structure, with type property as string, and in this case toHaveProps works great.
maybe it's possible to add a check for the type of type property in the TestInstance?

[brunohkbx]

This one should be resolved by #36

[GoktuqCan]

Still having this issue with version 3.4.3 and TouchableOpacity.
expect(getByTestId('test_id_test')).toHaveProp('disabled')

[shoonne]

Anyone having a solution to this? A test just randomly start failing which uses toHaveProp