Reactjs 使用TypeScript为Redux、路由器和动态模块设置React测试库

我有一个小应用程序，它使用

redux动态模块

作为存储，

react router

进行路由，所有组件都是带有钩子的功能组件，如

useState

，

useHistory

，

useLocation

，

useSelector

，

useDispatch

等

我想设置

react测试库来测试组件，如前所述，我需要设置一个自定义
render（）

这是我的
index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

我似乎遵循了提供的documnetation和示例，但在我的TSLint控制台的这一行
return rtlRender（ui，{wrapper:wrapper，…renderOptions}）中出现了这个错误（
wrapper
带下划线）

重载第1个，共2个，'（ui:ReactElement-ReactElement-Component）>| null）|（新建（道具：任意）=>Component）>，选项？：拾取|未定义）：RenderResult'，给出了以下错误。
类型“（{children}:WrapperProps）=>React.ReactElement React.ReactElement React.Component）>| null）|（新的（props:any）=>React.Component）>”不能分配给类型“ComponentClass | FunctionComponent | undefined”。
类型“（{children}:WrapperProps）=>React.ReactElement React.ReactElement React.Component）>| null）|（新的（props:any）=>React.Component）>”不能分配给类型“FunctionComponent”。
参数“\u0”和“props”的类型不兼容。
类型“{children？：ReactNode；}”不能分配给类型“WrapperProps”。
属性“children”的类型不兼容。
类型“ReactNode”不可分配给类型“ReactElement ReactElement Component）>| null）|（新（props:any）=>Component）>”。
类型“undefined”不可分配给类型“ReactElement ReactElement Component）>| null）|（新（props:any）=>Component）>”。
重载2/2’（ui:ReactElement ReactElement Component）>| null）|（新的（道具：any）=>Component）>，选项：RenderProptions:RenderResult’，给出了以下错误。
类型“（{children}:WrapperProps）=>React.ReactElement React.ReactElement React.Component）>| null）|（新的（props:any）=>React.Component）>”不能分配给类型“ComponentClass | FunctionComponent | undefined”。
类型“（{children}:WrapperProps）=>React.ReactElement React.ReactElement React.Component）>| null）|（新的（props:any）=>React.Component）>”不能分配给类型“FunctionComponent”```

设置此选项的正确方法是什么，以测试连接的组件？
您会遇到此错误，因为您的道具与包装器属性的预期道具不兼容。您可以通过添加React的功能组件类型来轻松修复此问题，其中包含
子项的定义：

import React, { ReactElement, ReactNode } from "react";
import { render as rtlRender, RenderOptions } from "@testing-library/react";
import { DynamicModuleLoader } from "redux-dynamic-modules";
import { Provider } from "react-redux";
import { reduxSearch } from "../redux/search";
import { store, history } from "../redux/store";
import { Router } from "react-router-dom";


const render = (ui: ReactElement, renderOptions?: RenderOptions) => {
  const Wrapper : React.FC = ({ children }) => {
    return (
      <Provider store={store}>
        <Router history={history}>
          <DynamicModuleLoader
            modules={[reduxSearch()]}
            createStore={() => store}
          >
            {children}
          </DynamicModuleLoader>
        </Router>
      </Provider>
    );
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

// re-export everything
export * from "@testing-library/react";

// override render method
export { render };


import React，{ReactElement，ReactNode}来自“React”；
从“@testing library/react”导入{render as rtlRender，RenderOptions}；
从“redux动态模块”导入{DynamicModuleLoader}；
从“react redux”导入{Provider}；
从“./redux/search”导入{reduxSearch}；
从“./redux/store”导入{store，history}；
从“react Router dom”导入{Router}；
常量渲染=（ui:ReactElement，渲染？：渲染）=>{
常量包装器：React.FC=（{children}）=>{
返回(
存储}
>
{儿童}
);
};
返回rtlRender（ui，{wrapper:wrapper，…renderOptions}）；
};
//转口一切
从“@测试库/react”导出*；
//覆盖渲染方法
导出{render}；
谢谢！现在我在测试中遇到了一个不同的错误：
TypeError:window.matchMedia不是一个函数
-在
rtlRender（）
-但这是一个不同的情况创建一个问题并链接到我，我也有一个解决方案：）谢谢，这对我来说是一个重复
import React, { ReactElement, ReactNode } from "react";
import { render as rtlRender, RenderOptions } from "@testing-library/react";
import { DynamicModuleLoader } from "redux-dynamic-modules";
import { Provider } from "react-redux";
import { reduxSearch } from "../redux/search";
import { store, history } from "../redux/store";
import { Router } from "react-router-dom";

export interface WrapperProps {
  children: ReactElement;
}

const render = (ui: ReactElement, renderOptions?: RenderOptions) => {
  const Wrapper = ({ children }: WrapperProps): ReactElement => {
    return (
      <Provider store={store}>
        <Router history={history}>
          <DynamicModuleLoader
            modules={[reduxSearch()]}
            createStore={() => store}
          >
            {children}
          </DynamicModuleLoader>
        </Router>
      </Provider>
    );
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

// re-export everything
export * from "@testing-library/react";

// override render method
export { render };
):

  Overload 1 of 2, '(ui: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options?: Pick<...> | undefined): RenderResult<...>', gave the following error.
    Type '({ children }: WrapperProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | undefined'.
      Type '({ children }: WrapperProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>' is not assignable to type 'FunctionComponent<{}>'.
        Types of parameters '__0' and 'props' are incompatible.
          Type '{ children?: ReactNode; }' is not assignable to type 'WrapperProps'.
            Types of property 'children' are incompatible.
              Type 'ReactNode' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
                Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
  Overload 2 of 2, '(ui: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>, options: RenderOptions<...>): RenderResult<...>', gave the following error.
    Type '({ children }: WrapperProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | undefined'.
      Type '({ children }: WrapperProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>' is not assignable to type 'FunctionComponent<{}>'.```

import React, { ReactElement, ReactNode } from "react";
import { render as rtlRender, RenderOptions } from "@testing-library/react";
import { DynamicModuleLoader } from "redux-dynamic-modules";
import { Provider } from "react-redux";
import { reduxSearch } from "../redux/search";
import { store, history } from "../redux/store";
import { Router } from "react-router-dom";


const render = (ui: ReactElement, renderOptions?: RenderOptions) => {
  const Wrapper : React.FC = ({ children }) => {
    return (
      <Provider store={store}>
        <Router history={history}>
          <DynamicModuleLoader
            modules={[reduxSearch()]}
            createStore={() => store}
          >
            {children}
          </DynamicModuleLoader>
        </Router>
      </Provider>
    );
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

// re-export everything
export * from "@testing-library/react";

// override render method
export { render };