reactjs - redux 工具包使用 typescript 模拟商店

Question

我从 redux documentation 找到了这段代码

// 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

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

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