reactjs - 如何测试依赖于 useContext hook 的 React 组件？

Question

我有一个使用 useContext 的组件，然后它的输出取决于上下文中的值。一个简单的例子:

import React, { useContext } from 'react';

const MyComponent = () => {
  const name = useContext(NameContext);

  return <div>{name}</div>;
};

使用 React 和 jest 快照的浅层渲染器测试此组件时。如何更改 NameContext 的值？

Answer 1

一般来说，使用钩子(Hook)不会改变测试策略太多。这里更大的问题实际上不是钩子(Hook)，而是上下文的使用，这使事情变得有点复杂。

有很多方法可以实现此目的，但我发现唯一适用于 'react-test-renderer/shallow' 的方法是注入(inject)模拟钩子(Hook):

import ShallowRenderer from 'react-test-renderer/shallow';

let realUseContext;
let useContextMock;
// Setup mock
beforeEach(() => {
    realUseContext = React.useContext;
    useContextMock = React.useContext = jest.fn();
});
// Cleanup mock
afterEach(() => {
    React.useContext = realUseContext;
});

test("mock hook", () => {
    useContextMock.mockReturnValue("Test Value");
    const element = new ShallowRenderer().render(
        <MyComponent />
    );
    expect(element.props.children).toBe('Test Value');
});

不过，这有点脏，并且特定于实现，因此如果您能够在浅渲染器的使用上妥协，还有一些其他选项可用:

非浅渲染

如果您不进行浅层渲染，您可以将组件包装在上下文提供程序中以注入(inject)您想要的值:

import TestRenderer from 'react-test-renderer';

test("non-shallow render", () => {
    const element = new TestRenderer.create(
        <NameContext.Provider value="Provided Value">
            <MyComponent />
        </NameContext.Provider>
    );
    expect(element.root.findByType("div").children).toEqual(['Provided Value']);
});

(免责声明:这应该可以工作，但是当我测试它时，我遇到了一个错误，我认为这是我的设置中的问题)

使用 Enzyme 和 Dive 进行浅渲染

正如 @skyboyer 所评论的，Enzyme 的浅渲染器支持 .dive ，允许您深度渲染原本浅渲染组件的一部分:

import { shallow } from "./enzyme";

test("enzyme dive", () => {
    const TestComponent = () => (
        <NameContext.Provider value="Provided Value">
            <MyComponent />
        </NameContext.Provider>
    );
    const element = shallow(<TestComponent />);
    expect(element.find(MyComponent).dive().text()).toBe("Provided Value");
});

使用 ReactDOM

最后，Hooks FAQ有一个使用 ReactDOM 测试 hooks 的示例，它也有效。当然，使用 ReactDOM 意味着这也是深度渲染，而不是浅层渲染。

let container;
beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

test("with ReactDOM", () => {
    act(() => {
        ReactDOM.render((
            <NameContext.Provider value="Provided Value">
                <MyComponent />
            </NameContext.Provider>
        ), container);
    });

    expect(container.textContent).toBe("Provided Value");
});