useContextフックに依存するreactコンポーネントをテストするには？

質問

あるコンポーネントで useContext を使用し、その出力はコンテキストの値に依存します。簡単な例です。

import React, { useContext } from 'react';

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

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

reactとjestのスナップショットから浅いレンダラでこのコンポーネントをテストするとき。の値を変更するにはどうしたらよいでしょうか？ NameContext ?

どのように解決するのですか？

一般的に、フックを使ってもテスト戦略はあまり変わらないはずです。 ここでのより大きな問題は、実際にはフックではなく、物事を少し複雑にしているコンテキストの使用なのです。

これを動作させる方法はいくつもありますが、私が見つけた唯一のアプローチは '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']);
});

(免責事項：この は が動作するはずなのですが、テストするとエラーになるので、私の設定の問題だと思います)

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を使用する

最後に フック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");
});