Unit test for component in react - reactjs

Question

hi i am new to react testing and i am using react testing library and jest.please help me in writing test case for below code.
import React from 'react'
import {
Loader,
SectionTitle,
ErrorLabel,
} from 'LookingGlass/common/components'
import LookingGlassPanelResultSection from 'LookingGlass/app/components/LookingGlassResultSection'
import constants from 'LookingGlass/constants'
import getErrorMessage from 'LookingGlass/app/utils/getErrorMessage'
import styles from './_.index.module.scss'
export default function LookingGlassPanelResults(props) {
const { queryResult, isTimedOut, error, isServerDown, isLoading } = props
if (isLoading)
return (
<Loader
content={constants.Loader.loaderContent}
active
inline="centered"
size="large"
/>
)
if (isServerDown) {
return <ErrorLabel text={constants.error.message.error_404} />
}
if (isTimedOut) {
return <ErrorLabel text={constants.requestsTimeout.msg} />
}
if (error) {
return <ErrorLabel text={getErrorMessage(error)} />
}
if (!queryResult) return null
return (
<div>
<hr className={styles.seperateLine} />
<SectionTitle text={constants.QueryPanelResult.resultPanel} />
<LookingGlassPanelResultSection queryResult={queryResult} />
</div>
)
}
ErrorLabel is different component where icon is used and text is displayed. How to write test where we use component inside component ?
this is my test case:-
const renderComponent = (props) =>
render(<LookingGlassPanelResults {...props} />)
test('Verify that isServerDown parameter works', () => {
const component = renderComponent({ isServerDown: true })
const { getByText } = within(component)
expect(
getByText('Service unavailable. Please try later'),
).toBeInTheDocument()
})
Error:-`
TypeError: Expected container to be an Element, a Document or a DocumentFragment but got Object.
20 | const { getByText } = within(component)
21 | expect(
> 22 | getByText('Service unavailable. Please try later'),
| ^
23 | ).toBeInTheDocument()
24 | })`

Answer 1

here first we need to get ErrorLabel by test-id and then check expectations
test('Verify that isServerDown parameter works', () => {
const component = renderComponent({ isServerDown: true })
const { getByTestId } = component
expect(getByTestId('ErrorLabel')).toHaveTextContent(
'Service unavailable. Please try later',
)
})