reactjs - 在 React 测试库中测试依赖于 Stateful Context Providers 链的 React 组件

Question

我知道这一点，但这不是我的情况。

例子：

<AuthProvider>
  <SessionProvider>
    <AnotherProvider>
      <OneMoreProvider>
        <MyComponent />

所有这些提供程序实际上都是具有状态和效果的常规 React 组件，它们通过 GraphQL 获取一些数据并将这些数据作为“值”道具传递给 MyContext.Provider 在返回语句中。

这迫使我为所有这些提供程序中使用的模块创建大量模拟，只是为了在测试环境中呈现我自己的组件。

关于可以做些什么来避免创建这么多模拟的任何想法？

Answer 1

您可以使用自定义渲染函数创建一个辅助测试库，该函数使用上下文包装您的组件，然后从那里导出所有反应测试库方法

- test/lib.jsx

import React from 'react';
import { render as reactRender } from '@testing-library/react';
export * from '@testing-library/react';

export const render = (MyComponent, options) => {
    return reactRender(
        <AuthProvider>
            <SessionProvider>
                <AnotherProvider>
                    <OneMoreProvider>
                        {MyComponent}
                    </OneMoreProvider>
                </AnotherProvider>
            </SessionProvider>
        </AuthProvider>,
        options
    )
}

然后使用这个助手库来导入测试函数而不是@testing-library/react直接使用

import { render } from 'test/lib'
import MyComponent from './MyComponent';

test("My component", () => {
    const { getByTestId, ... } = render(<MyComponent>);
    ...
});