mohebifar / mohebifar/react-native-copilot

Testing with @testing-library/react-native

Open
#211 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.4k
Forks
428
PR merge metrics
No merged PRs in 30d

Description

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 (?)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the shown @testing-library/react-native test and inspect the walkthroughable mock around CopilotText. Compare the rendered tree with the Text component and determine why testID is not exposed. Done means getByTestId('test-schedule-name') finds the CopilotText element under the documented test setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.