How to update react testing library screen value when component is rendered based on condition?

Question

Since it is recommended to use screen rather than getById in react testing library, I'm changing all the instances of it to screen query selectors. However, there's a certain condition I'm not able to change.

const newComponent = render(
<AppContext.Provider value={newState}>
<App />
<AppContext.Provider>,
)

const id = queryByAttribute.bind(null,'id')
const result= getById(newComponent.container,'student-details')
expect(result.textContent).toBe('Suga')

I used the Testing playground and it suggested to use getByText, but if I do screen.getByText(/Suga/i), it fails because it considers the screen that rendered initially and not the new component to which I provide different state. How can I achieve this conversion?

Note: In the App.js file, the student-detail is a div with id and className.

I AM 6000 · Accepted Answer · 2022-01-10 15:38:47Z

1

const newComponent = render(
   <AppContext.Provider value={newState}>
      <App />
   <AppContext.Provider>,
)

expect(newComponent.getByText(/suga/i)).toBeInTheDocument

edited Jan 10, 2022 at 15:38

answered Jan 7, 2022 at 15:27

I AM 6000

213 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update react testing library screen value when component is rendered based on condition?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related