React/Jest：测试React上下文方法（结果：TypeError：SetScore不是函数）

Question

我正在使用React Context API创建游戏。

在我的一个组件（gamestatus）中，我从提供商那里汲取了一些方法：

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

在组件中，我调用了开始游戏按钮的这三种方法，这又将状态放回了提供者中。

然后， 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;

然后在下面的测试文件中我要测试，当单击“开始游戏”按钮时，启动了游戏（检查DOM已删除了按钮，现在正在显示游戏）。

但是我不确定如何将方法拉到测试文件时：

结果：typeError：setScore不是函数

我尝试仅复制：

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

但是我得到了一个无效的挂钩调用因为我无法在测试中使用React钩子。

有什么想法吗？还是更好的测试方法？谢谢

Gamestatus测试

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

Answer 1

我不确定这是否有帮助，但是由于您的第一种方法是在测试中使用钩子，因此您可以尝试使用库来渲染钩子。我不熟悉酶，但我使用 react hook hooks testing库为了使我的我在我的测试中挂钩。
您可以这样使用：

let testYourHook= renderHook(yourHook);

testyourhook值不是动态的，因此您必须每次获得值：

testYourHook.result.current