Как проверить реагирующий компонент, который зависит от ловушки useContext?

У меня есть компонент, который использует useContext а затем его вывод зависит от значения в контексте. Простой пример:

import React, { useContext } from 'react';

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

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

При тестировании этого компонента с мелким рендером из реактивных и шутливых снимков. Как я могу изменить значение NameContext?

Ответ 1

В общем, использование хуков не должно сильно менять стратегию тестирования. Большая проблема здесь на самом деле не крючок, а использование контекста, который немного усложняет ситуацию.

Есть несколько способов заставить это работать, но единственный подход, который я нашел, который работает с '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

Наконец, в FAQ по ReactDOM есть пример тестирования хуков с помощью 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");
});

Ответ 2

Я пытался использовать Enzyme + .dive, но при погружении он не распознает контекстные реквизиты, он получает стандартные. На самом деле, это известная проблема команды Enzyme. Тем временем я пришел к более простому решению, заключающемуся в создании пользовательского хука, просто возвращающего useContext с вашим контекстом, и насмешливого возврата этого пользовательского хука в тесте:

AppContext.js - создает контекст.

import React, { useContext } from 'react';

export const useAppContext = () => useContext(AppContext);

const defaultValues = { color: 'green' };
const AppContext = React.createContext(defaultValues);

export default AppContext;

App.js - Предоставление контекста

import React from 'react';
import AppContext from './AppContext';
import Hello from './Hello';

export default function App() {
  return (
    <AppContext.Provider value={{ color: 'red' }}>
      <Hello />
    </AppContext.Provider>
  );
}

Hello.js - использование контекста

import React from 'react';
import { useAppContext } from './AppContext';

const Hello = props => {
  const { color } = useAppContext();
  return <h1 style={{ color: color }}>Hello {color}!</h1>;
};

export default Hello;

Hello.test.js - Тестирование useContext с мелким ферментом

import React from 'react';
import { shallow } from 'enzyme';
import * as AppContext from './AppContext';

import Hello from './Hello';

describe('<Hello />', () => {
  test('it should mock the context', () => {
    const contextValues = { color: 'orange' };
    jest
      .spyOn(AppContext, 'useAppContext')
      .mockImplementation(() => contextValues);
    const wrapper = shallow(<Hello />);
    const h1 = wrapper.find('h1');

    expect(h1.text()).toBe('Hello orange!');
  });
});

Ознакомьтесь с полной статьей Medium из https://medium.com/7shifts-engineering-blog/testing-usecontext-react-hook-with-enzyme-shallow-da062140fc83

Ответ 3

Или, если вы тестируете свой компонент изолированно, не монтируя родительские компоненты, вы можете просто издеваться над useContext:

jest.mock('react', () => {
  const ActualReact = require.requireActual('react')
  return {
    ...ActualReact,
    useContext: () => ({ }), // what you want to return when useContext get fired goes here
  }
})