I am testing a combobox on first render the initial value of the combobox is undefined. Then using query parameters and a useEffect the the component find the relevant option and sets the value state to it.

const Component = () => {

[value, setValue] = useState(undefined);

useEffect(() => {

setValue("hello")

}, [])


return(
<Combobox value={value}/>
)

}

it("should render with value as hello", () => {

const {getByText} = render(<Component/>)

const text = getByText("hello")

})

That test suite throws this error:

TestingLibraryElementError: Unable to find an element with the text: Photobug. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

When testing in react testing library. I cannot retrieve the expected text value this is because it shows what has been rendered on first render. Which would have been nothing because value is undefined.

I have tried a combination of async methods. Aync await pattern, await waitFor(() => ), findByText etc all to no avail.

I am testing a combobox on first render the initial value of the combobox is undefined. Then using query parameters and a useEffect the the component find the relevant option and sets the value state to it.

const Component = () => {

[value, setValue] = useState(undefined);

useEffect(() => {

setValue("hello")

}, [])


return(
<Combobox value={value}/>
)

}

it("should render with value as hello", () => {

const {getByText} = render(<Component/>)

const text = getByText("hello")

})

That test suite throws this error:

TestingLibraryElementError: Unable to find an element with the text: Photobug. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

When testing in react testing library. I cannot retrieve the expected text value this is because it shows what has been rendered on first render. Which would have been nothing because value is undefined.

I have tried a combination of async methods. Aync await pattern, await waitFor(() => ), findByText etc all to no avail.

• javascript
• reactjs
• react-hooks
• react-testing-library
• react-state

• 1. If the initial value of state is hello, just pass it as the initial value, the effect is useless. 2. What is Combobox? – Adam Jenkins Commented Feb 27, 2022 at 16:10
• The initial value isn’t hello. This was just to demonstrate the issue. I still need to set the state in the effect. I want to get around the issue with the testing library if you can advise. Thanks. – mycodegoesKABOOM Commented Feb 27, 2022 at 18:31
• Can't reproduce your issue. Please provide a minimal, complete, reproducible example – Lin Du Commented Feb 28, 2022 at 3:05

1 Answer 1

Looks like in your test you need to wait till your component is fully rendered. You can use waitFor method provided by react testing library.

I tried to reproduce your issue with an input box.

Component:

import { useState, useEffect } from "react";

export const Component = () => {

  const[value, setValue] = useState('');
  
  useEffect(() => {
  
  setValue("hello")
  
  }, [])
  
  
  return(
  <input value={value}/>
  )
  
  }

Test case :

it("should render with value as hello", async () => {
    const {getByRole} = render(<Component/>)
    await waitFor(() => expect(getByRole('textbox')).toHaveValue('hello'))
    })

In your case, you have to give role as combobox.

    await waitFor(() => expect(getByRole('combobox')).toHaveValue('hello'))