Testing with @testing-library/react-native

[mtoninelli]

Current Behavior
Testing with @testing-library/react-native the CopilotText element is not found

Unable to find an element with testID: test-schedule-name
...
const CopilotText = walkthroughable(Text);
                                  ^

Input Code

import { walkthroughable, CopilotStep } from 'react-native-copilot';
...
const CopilotText = walkthroughable(Text);
...
<View>
  <CopilotStep order={2} name='name'>
    <CopilotText testID={'test-schedule-name'}>
      {this.props.scheduleName}
    </CopilotText>
  </CopilotStep>
</View>
...

The test

jest.mock('react-native-copilot', () => ({
    walkthroughable: WrappedComponent => ({ copilot, ...props }) => <WrappedComponent {...copilot} {...props} />,
}));

it('displays name', () => {
    const { getByTestId } = render(<MyComponent />);
    const scheduleName = getByTestId('test-schedule-name');
    ...
});

Expected behavior/code
Be able to select the CopilotText as the Text do

Environment

• react-native-copilot: [e.g. v2.4.6]
• react-native: 0.59.0
• react-native-svg: 9.11.1

Possible Solution
Another way of mocking the module (?)

[jakequade]

This works if you wrap the component in a copilot before using in the test:

import { render } from '@testing-library/react-native';
import React from 'react';
import { View, Text } from 'react-native';
import { walkthroughable, CopilotStep, copilot } from 'react-native-copilot';

const CopilotText = walkthroughable(Text);

function Thing() {
  return (
    <View>
      <CopilotStep order={2} name='name' text='hello there'>
        <CopilotText testID={'test-schedule-name'}>Some name</CopilotText>
      </CopilotStep>
    </View>
  );
}

export const WrappedThing = copilot({})(Thing);

it('should do the thing', () => {
  const { getByText } = render(<WrappedThing />);
  const text = getByText('Some name');
  expect(text).toBeTruthy();
});

[jakequade]

It also sees both the test ID and the text, so I think it's just an issue with how your test is set up.