reduxtoolkit嘲弄存储与typescript

Question

我从redux文档中找到了这段代码

// test-utils.jsx
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import userReducer from '../userSlice'
function render(
ui,
{
preloadedState,
store = configureStore({ reducer: { user: userReducer }, preloadedState }),
...renderOptions
} = {}
) {
function Wrapper({ children }) {
return <Provider store={store}>{children}</Provider>
}
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}
// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

然而，我正在与一个TypeScript项目工作，我试图添加类型到这个代码片段，但我找不到正确的类型使用。我也无法从他们的文档中找到任何东西。

有人试过吗?

Answer 1

在React测试库的官方网站上有一个TypeScript的例子。

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
const userReducer = (state = { name: '' }) => {
return state;
};
function render(
ui,
{ preloadedState, store = configureStore({ reducer: { user: userReducer }, preloadedState }), ...renderOptions }
) {
const Wrapper: React.FC = ({ children }) => {
return <Provider store={store}>{children}</Provider>;
};
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}