使用 Enzyme 和 useContext 掛鈎的簡單集成測試應該是什么樣子？

Question

幫助在 React 中為一個組件編寫一個簡單的集成測試（該組件使用 useContext 掛鈎）。 測試應該驗證按鈕被按下並且處理程序被調用（這是我的代碼： https://codesandbox.io/s/lingering-violet-n11hu ）。

驗證測試的組件代碼：

import React, {useContext} from "react";
import {StoreContext} from "../../reducer/context";
import moment from "moment";

import Delay from "../delay/delay";

let queue = Promise.resolve();

const Interface = () => {
    const {state, dispatch} = useContext(StoreContext);

    const handleLogSet = e => {
        const timeout = parseInt(e.target.getAttribute("data-delay"), 10);
        const timePress = moment().format("LTS");
        queue = queue.then(() => Delay(timeout, timePress)).then(res => dispatch({
            type: "SET_LOG", payload: "\n" + res
        }));
    };

    const handleReset = () => {
        dispatch({type: "RESET"});
    };
    return (
        <div className="block">
            <button className="btn" data-delay="1" onClick={handleLogSet}>Кнопка 1</button>
            <button className="btn" data-delay="2" onClick={handleLogSet}>Кнопка 2</button>
            <button className="btn" data-delay="3" onClick={handleLogSet}>Кнопка 3</button>
            <button className="btn" onClick={handleReset}>Reset</button>
            <textarea value={state.join("")} readOnly={true}/>
        </div>
    );
};

export default Interface;

嘗試了不同的測試選項，但沒有一個工作。 例如，我試過這樣：

import {configure, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Interface from "./interface";
import React, { useContext } from "react";
import { StoreContext } from "../../reducer/context";

configure({ adapter: new Adapter() });

const { state } = useContext(StoreContext);

it(`Click by button calls callback`, () => {
    const handleLogSet = jest.fn();

    const component = shallow(<Interface
        state={state}
    />);

    component.find(`.button`).simulate(`click`);
    expect(handleLogSet).toHaveBeenCalledTimes(1);
});

發出了各種錯誤，包括：“無效的鈎子調用。只能在 function 組件的主體內部調用鈎子”。

我將非常感謝一個工作代碼的例子和一個簡短的解釋。 非常感謝大家！

Answer 1

所以一切都很簡單。 值得注意的是，在使用 Enzyme 庫的 shallow 方法測試使用 useContext 的組件時，存在公認的困難。 到目前為止，還不能直接解決它們。

首先要做的是創建一個自定義鈎子。 你可以這樣做：

import React, {useContext} from 'react';

export const useAppContext = () => useContext(AppContext);
const AppContext = React.createContext();

export default AppContext;

這樣做是為了不在被測組件中直接使用 useContext。

e2e 測試本身看起來像這樣：

import React from "react";
import {configure, shallow} from "enzyme";
import * as AppContext from "../../reducer/context";
import Adapter from "enzyme-adapter-react-16";

import Interface from "./interface";

configure({adapter: new Adapter()});

it(`Click by Set and Reset buttons calls callback`, () => {
    const contextValues = {state: ["Mock state"]};
    const handleReset = jest.fn();
    const handleLogSet = jest.fn();

    jest
        .spyOn(AppContext, "useAppContext")
        .mockImplementation(() => contextValues);
    const wrapper = shallow(
        <Interface
            onReset={handleReset}
            onLogSet={handleLogSet}
        />
    );
    wrapper.find(`.block__btn--reset`).simulate(`click`);
    expect(handleReset).toHaveBeenCalledTimes(1);
    wrapper.find(`.block__btn--set`).forEach(item => {
        item.simulate(`click`);
        expect(handleReset).toHaveBeenCalledTimes(1);
    });
});

因此，我們模仿自定義代碼的實現並將這個值傳遞給上下文 object。