Estoy usando React Context API para crear un juego.

En uno de mis componentes (GameStatus), obtengo algunos métodos del proveedor:

 const context = React.useContext(MyContext); const { setGameStart, setGameEnd, setScore } = context;

Y en el componente, invoco estos tres métodos al hacer clic en el botón de inicio del juego, que a su vez restablece el estado en el proveedor.

Componente GameStatus

 import React from 'react'; import { MyContext } from './Provider'; const GameStatus = ({ gameStart, gameEnd, score, total, getPlayers }: { gameStart: boolean, gameEnd: boolean, getPlayers: () => void, score: number, total: number }) => { const context = React.useContext(MyContext); const { setGameStart, setGameEnd, setScore } = context; return ( <> {!gameStart && ( <button onClick={() => { getPlayers(); setScore(0); setGameStart(true); setGameEnd(false); }}> Start game </button> )} {gameEnd && ( <p>Game end - You scored {score} out {total}</p> )} </> ) } export default GameStatus;

Luego, en mi archivo de prueba a continuación, quiero probar que cuando se hace clic en el botón de inicio del juego, el juego se inicia (verifique que el DOM haya eliminado el botón y ahora muestre el juego).

Pero no estoy seguro de cómo incorporar los métodos en el archivo de prueba cuando obtengo:

Resultado: TypeError: setScore no es una función

Intenté simplemente copiar:

 const context = React.useContext(MyContext); const { setGameStart, setGameEnd, setScore } = context;

Pero luego recibo una llamada de gancho no válida porque no puedo usar ganchos React dentro de la prueba.

¿Algunas ideas? ¿O un mejor enfoque para probar esto? Gracias

Prueba de estado del juego

 import React from 'react'; import { shallow } from 'enzyme'; import { MyContext } from '../components/Provider'; import GameStatus from '../components/GameStatus'; test('should start the game', () => { const getPlayers = jest.fn(); const uut = shallow( <MyContext.Provider> <GameStatus getPlayers={getPlayers} /> </MyContext.Provider> ).dive().find('button'); uut.simulate('click'); console.log(uut.debug()); });