Составьте один помощник рендеринга из двух помощников рендеринга библиотеки тестирования в React

Question

Приветствия. Быстрый вопрос по использованию @testing-library/react и созданию помощников рендеринга, аналогичных приведенным ниже.

const renderWithRouter = (
    ui,
    {
        route = '/',
        history = createMemoryHistory({ initialEntries: [route] })
    } = {}
) => {
    const Wrapper = ({ children }) => (
        <Router history={history}>{children}</Router>
    );

    return {
        ...render(ui, { wrapper: Wrapper }),
        history
    };
};

const renderWithRedux = (
    ui,
    {
        initialState = {},
        reducer = {},
        store = createStore(reducer, initialState)
    } = {}
) => {
    const Wrapper = ({ children }) => (
        <Provider store={store}>{children}</Provider>
    );

    return {
        ...render(ui, { wrapper: Wrapper }),
        store
    };
};

Как я могу изменить приведенные выше методы, чтобы они были компонуемыми, как показано ниже?

const render = renderWithRouter(renderWithRedux(<Component />,{...}),{...});

Насколько я понимаю, я не могу просто получить оригинальный элемент пользовательского интерфейса из рендера,В настоящее время я застрял в мысли о другой альтернативе. Ответы / идеи высоко ценятся и заранее благодарны.

Answer 1

Вы можете создать новый метод для рендеринга с помощью Router и Redux:

const renderWithRouterAndRedux = (
    ui,
    {
        route = '/',
        history = createMemoryHistory({ initialEntries: [route] }),
        initialState = {},
        reducer = {},
        store = createStore(reducer, initialState),
    } = {}
) => {
    const Wrapper = ({ children }) => (
        <Provider store={store}>
            <Router history={history}>{children}</Router>
        </Provider>
    );

    return {
        ...render(ui, { wrapper: Wrapper }),
        history,
        store,
    };
};

Если вы хотите быть более гибким, я предлагаю небольшую библиотеку, которая делает это: https://github.com/Gpx/render-composer.