Working on writing a unit test for a large ponent. I've written one before for a smaller ponent, but this has several other custom ponents nested inside. I'm trying to select it so I can then figure out what to do with it, but I can't even get to that point right now.

MainComponent.tsx

This is a part of what's getting rendered by the ponent. PriceOverrideDateRange is another custom ponent, and I'm trying to target it with the testID

       <Counter
        />
              <MainComponentRange testID='range' />
        <Counter
        />

MainComponent.test.tsx

This is the part of the test I'm working on

  it('should be able to change the ranfe', () =>{



    //Mock out dependent function with jest
    //Nothing here right now...

    //Render with the props you want
    const { getByTestId } = render(        
          <MainComponent />

);

    //Locate screen ponents for test
    const range = getByTestId('range');


    //Perform user actions
    fireEvent.changeText(range, "01/22/2022");


    //Measure against expect cases
    expect(dateRange).toBe("1/22/2022");

  });

And this is the error message I'm getting:

  ● Main Component Test › should be able to change the range

    Unable to find an element with testID: dateRange

      143 |
      144 |     //Locate screen ponents for test
    > 145 |     const dateRange = getByTestId('range');
          |                       ^
      146 |
      147 |

Working on writing a unit test for a large ponent. I've written one before for a smaller ponent, but this has several other custom ponents nested inside. I'm trying to select it so I can then figure out what to do with it, but I can't even get to that point right now.

MainComponent.tsx

This is a part of what's getting rendered by the ponent. PriceOverrideDateRange is another custom ponent, and I'm trying to target it with the testID

       <Counter
        />
              <MainComponentRange testID='range' />
        <Counter
        />

MainComponent.test.tsx

This is the part of the test I'm working on

  it('should be able to change the ranfe', () =>{



    //Mock out dependent function with jest
    //Nothing here right now...

    //Render with the props you want
    const { getByTestId } = render(        
          <MainComponent />

);

    //Locate screen ponents for test
    const range = getByTestId('range');


    //Perform user actions
    fireEvent.changeText(range, "01/22/2022");


    //Measure against expect cases
    expect(dateRange).toBe("1/22/2022");

  });

And this is the error message I'm getting:

  ● Main Component Test › should be able to change the range

    Unable to find an element with testID: dateRange

      143 |
      144 |     //Locate screen ponents for test
    > 145 |     const dateRange = getByTestId('range');
          |                       ^
      146 |
      147 |

• javascript
• typescript
• react-native
• unit-testing
• jestjs

Share Improve this question Follow edited Jan 25, 2022 at 16:30 Slashy asked Jan 20, 2022 at 22:04 SlashySlashy 16111 silver badge1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need to pass the testID to the ponent as props and then add it the the view you are using I will add a simple example.

const App = () => {
  return <PriceOverrideDateRange testID="dateRange" />
}

const PriceOverrideDateRange = ({testID}) => {
  return <View testID="dateRange" ><Text>Hello</Text></View>
}