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

发出了各种错误，包括以下内容：“无效的钩子调用。只能在函数组件的主体内部调用钩子。”

我将非常感谢您提供示例代码和简要说明。非常感谢大家！

Answer 1

所以一切都非常简单。值得注意的是，当使用酶库的浅层方法测试使用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);
    });
});

因此，我们模仿自定义代码的实现，并将此值传递给上下文对象。

使用Enzyme和useContext钩子的简单集成测试应该是什么样的？

1 个答案: