mercredi 23 octobre 2019

Compose single render helper from two testing library render helpers in React

Cheers. Quick question on using @testing-library/react and creating render helpers similar to the below.

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

How can I change the methods above to be composable like the following?

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

As far as I understand I can't just get the original UI element from within render. I'm currently stuck in thinking of another alternative. Answers much appreciated and thanks in advance.

Aucun commentaire:

Enregistrer un commentaire