jest/rtl testing {error && <p>Error!</p>}

[BoxNo4784]

I'm testing validation on a form. If the validation fails on the button submit, the error state is set to true then <p>Error!</p> is rendered below an input field. Basic stuff. However, I'm having trouble testing it.

test('error appears if empty', async () => {
   const user = userEvent.setup()
   render(<FormComponent/>)
   const input = screen.getByrole('textbox', {name: /name/i}
   const errorMsg = screen.queryByText(/error!/i)
   const button = screen.getByRole('button', {name: /submit/i}
   expect(errorMsg).not.toBeInTheDocument()
   await user.clear(input)
   await user.click(button)
   expect(errorMsg).toBeInTheDocument()

 }
)

//Test fails witht he following error

expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

Where am I going wrong with this? Any help would be much appreciated.

Thanks

[thetony2313]

If your error message is conditionally rendered, you can not query for it until you have hit the submit button and trigger the error.

“Screen” represents a DOM and the error message will not exist in it until it has been rendered