reactjs – 如何测试依赖于上下文和钩子的反应组件？

有很多方法可以使这项工作,但只有我发现使用’react-test-renderer / shallow’的方法是注入一个模拟钩子：

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

但这有点脏,特定于实现,所以如果你能够在浅层渲染器的使用上妥协,那么还有一些其他选择：

非浅渲染

如果您不是浅层渲染,则可以将组件包装在上下文提供程序中以注入所需的值：

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

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

用酶和潜水浅呈现

正如@skyboyer评论的那样,酶的浅层渲染器支持.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测试钩子的例子,它也适用.当然,使用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");
});