如何测试依赖于useContext钩子的react组件? [英] How to test a react component that is dependent on useContext hook?

问题描述

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

I have a component that uses useContext and then its output is dependent on the value in the context. A simple example:

import React, { useContext } from 'react';

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

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

使用来自react和jest快照的浅色渲染器测试此组件时.如何更改NameContext的值?

When testing this component with the shallow renderer from react and jest snapshots. How can I change the value of NameContext?

推荐答案

通常，使用钩子应该不会改变测试策略.实际上，这里更大的问题不是问题，而是上下文的使用，这使事情变得有些复杂.

In general, using hooks shouldn't change testing strategy much. The bigger issue here actually isn't the hook, but the use of context, which complicates things a bit.

有很多方法可以使这项工作，但是我发现与'react-test-renderer/shallow'一起工作的唯一方法是注入一个模拟钩子:

There's a number of ways to make this work, but only approach I've found that works with 'react-test-renderer/shallow' is to inject a mock 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');
});

这有点脏，而且是特定于实现的，因此，如果您能够在使用浅色渲染器时有所妥协，那么还有其他一些可用选项:

This is a bit dirty, though, and implementation-specific, so if you're able to compromise on the use of the shallow renderer, there's a few other options available:

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

If you're not shallow rendering, you can just wrap the component in a context provider to inject the value you want:

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

(免责声明:此应该有效，但是当我对其进行测试时，我遇到了一个错误，我认为这是我的设置中的一个问题)

(Disclaimer: this should work, but when I test it, I'm hitting an error which I think is an issue in my setup)

正如@skyboyer所评论的那样，酶的浅层渲染器支持.dive，使您可以深层渲染其他浅层渲染组件的一部分:

As @skyboyer commented, enzyme's shallow renderer supports .dive allowing you to deeply renderer a part of an otherwise shallow rendered component:

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

最后，钩子常见问题解答有一个使用ReactDOM测试钩子的示例，它也可以正常工作.自然，使用ReactDOM表示这也是深度渲染，而不是较浅.

Use ReactDOM

Finally, the Hooks FAQ has an example of testing hooks with ReactDOM, which works as well. Naturally, using ReactDOM means this is also a deep render, not shallow.

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

这篇关于如何测试依赖于useContext钩子的react组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！