Блог

Я тестирую компонент, у которого нет реквизитов, но он ожидает выполнения с данными, поступающими из контекста.

Допустим, это мой компонент:

 export const MyComponent: FC = () => {
  const { arrayOfObjects } = useFn()

  return arrayOfObjects.length ? arrayOfObjects.map((q: VariableConfig, i: number) => (
    <SelectedQuestionTile
      {...{
        key: i   1,
        question: q,
        questionIdx: i,
      }}
    />
  )) : <p>No Data</p>
}
 

Это единственный тест, который у меня пока есть:

 import React from 'react'
import { render, screen } from '@testing-library/react'
import { MyComponent } from './MyComponent'

describe('MyComponent', () => {
  test('It renders with empty containers', () => {
    render(<MyComponent />)
    expect(screen.getByText("No Data")).toBeInTheDocument()
  })
})
 

Там я тестирую компонент в его начальном состоянии, которое отображает пару пустых контейнеров, поскольку в них еще нет никаких данных. Данные присутствуют здесь , на линии const { arrayOfObjects } = useFn() . Это arrayOfObjects просто жестко закодированные данные, а не динамические.

Что я упускаю из виду?

Протестируйте его, обернув его в фактический поставщик контекста.

 render(
  <MyContext.Provider value={{ arryOfObjects }}>
    <MyComponent />
  <MyContext.Provider>
)