Rendered React Native elements lack `setNativeProps`

[AlanSl]

Not sure if this is a bug or a feature request, seems like a missing feature that causes tests to fail where functionality works in real life.

Describe the bug

Rendered React Native elements have a method setNativeProps that can be used to set native props.

jest-native also has a method .toHaveProp which can be used to test that a specific user-action-relevant native prop does apply as expected: and they have an example test where it is used to verify that passing disabled to Button applies as 'accessibilityStates', ['disabled']. These can be used to, for example, check that accessibility tools will behave the way users expect.

However, React Native elements rendered by Testing Library appear to be missing the setNativeProps method, meaning that functionality using it that works in real life will fail in Testing Library tests and can't be tested.

Some functionality using native props will be implementation details that shouldn't be tested for directly, but many will be confirmation of interaction-relevant cues that users would notice or seek out, such as accessibility states or an element's opacity.

Expected behavior

Elements should have a .setNativeProps method, and calling it should update the data that jest-native's .toHaveProp method accesses.

Steps to Reproduce

Using accessible because it's a simple example documented as a valid target for jest-native's .toHaveProp:

describe('native props', () => {
  it('works when set via props', () => {
    const { getByText } = render(<Text accessible>text</Text>)
    const button = getByText('text')
    expect(button).toHaveProp('accessible', true)
    // this works, so the capability is there
  })

  it("doesn't work via setNativeProps", () => {
    const { getByText } = render(
      <Text ref={(element) => element?.setNativeProps({ accessible: true })}>text</Text>
    )
    const button = getByText('text')
    expect(button).toHaveProp('accessible', true)
    // this fails - the callback ref is called with the element, setNativeProps is mocked
  })
})

Curiously, this doesn't throw an error setNativeProps is undefined, even though element.setNativeProps is actually undefined. There's no error, it just doesn't do anything. after updating to 9.1.0 I see that setNativeProps is a mocked function.

Versions

  npmPackages:
    react: 17.0.2 => 17.0.2 
    react-native: 0.64.3 => 0.64.3 

    react-test-renderer@16.14.0
    @testing-library/react-native@9.1.0

[mdjastrzebski]

As far as I understand setNativeProps is used to directly manipulate underlying platform (iOS/Android/other) views.

Therefore, this will not work with RNTL, as our component tree is created by React Test Renderer to render only the JS part of the component tree. There is no native views part unlike real React Native runtime env.

[AugustinLF]

I agree with @mdjastrzebski, that's a limitation of RNTL, we always stay on the JS side and don't cross into native land, so I don't think it's possible for us to fix that (there are other similar problems, like scroll events in lists). But I do think that we could document that somewhere, since it'll be confusing for users.

[mdjastrzebski]

@AugustinLF I've created #979 with FAQ doc answering question about testing native features using RNTL.

[mdjastrzebski]

Closing because of no recent activity.