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 />,{...}),{...});

据我了解，我不能只是从render中获取原始UI元素。我目前正在考虑其他选择。答案/想法非常感谢，谢谢。

Answer 1

您可以创建一个新方法以使用Router和Redux进行渲染：

WASM: App.OnInitializedAsync
WASM: ConfigurationManager.InitializeAsync
WASM: Index.OnInitializedAsync
WASM: Index.OnInitializedAsync config.Settings is null
WASM: ConfigurationManager.Setting has been set: ApiBaseUrl https://localhost:44316

如果您想更灵活一些，我会推荐一个小型图书馆来做：https://github.com/Gpx/render-composer。

从React中的两个测试库渲染助手中组成一个渲染助手

1 个答案: