mardi 9 février 2021

How can I pass a value to a component that doesn't have props in order to test it?

I am testing a component that doesn't have props but it expects to be fulfilled with data coming from context.

Let's say this is my component:

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>
}

This is the only test I have so far:

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()
  })
})

There, I am testing the component on its initial state which renders a couple of empty containers since they don't have any data yet. The data is present here on the line const { arrayOfObjects } = useFn(). The arrayOfObjects is just hardcoded data, not dynamic.

What am I missing?

Aucun commentaire:

Enregistrer un commentaire