Pesquisa de site

reactjs - Não é possível desestruturar a propriedade 'desks' de '(0 , _react.useContext)(...)' pois está indefinida


Eu tento simular DeskContext por ter mesas e checkIfUserPresent quando useContext é chamado. Mas eu tenho este erro:

Cannot destructure property 'desks' of '(0 , _react.useContext)(...)' as it is undefined
TypeError: Cannot destructure property 'desks' of '(0 , _react.useContext)(...)' as it is undefined.

É quando eu executo este teste:

it('It should have a reserved button because user is not present', () => {
render(<Desk desk={deskWithNoReservation} dateOfConsultation={dateInTheFuture()}/>)

        const buttonElement = screen.getByText('Réserver')
    
        expect(buttonElement).toBeInTheDocument()
    })

Aqui está o meu código:

...
jest.mock('../context/DeskContext', () => ({
DeskContext:{
   desks: [{
      deskNumber: 11,
      reservation: "mocked name"
   }],
   checkIfUserPresent: () => {
      return false
   },
}
}))

jest.mock('./ModalWindow', () => ({ ModalWindow: () => 'Réserver' }));

describe('Test for Desk component', () => {

    it('It should have a reserved button because user is not present', () => {
        render(<Desk desk={deskWithNoReservation} dateOfConsultation={dateInTheFuture()}/>)
    
        const buttonElement = screen.getByText("Réserver")
    
        expect(buttonElement).toBeInTheDocument()
    })

...

Na minha classe 'DeskComponent', esta é a linha (a primeira do componente) que causa o erro: "const {desks, checkIfUserPresent}=useContext(DeskContext)"

Aqui está a classe DeskContext:

import { createContext } from "react"

export const DeskContext = createContext({})

Você sabe o que fazer para definir mesas e checkIfUserSPResent para código adicional? Obrigado.

Definir mesas e verificarSeUsuarioSPPresente para passar no teste?

Resposta #1

Basta usar o provedor no render e não há necessidade de simular, está funcionando!

Resposta #2

Você precisa envolver o objeto desk com o provider no render, então o seu seria algo como

    render(<DeskProvider><Desk desk={deskWithNoReservation} dateOfConsultation={dateInTheFuture()}/><DeskProvider/>)