在使用react redux测试库启动和运行单元测试时出现问题

Question

我正在尝试使用react测试库编写单元测试(https://testing-library.com/docs/example-react-redux)。

//错误

元素类型无效：应为字符串(用于内置组件(或类/函数(用于复合组件(，但实际为：未定义。您可能忘记了从中定义的文件导出组件，或者您可能混淆了默认导入和命名导入。

Check the render method of `Wrapper`.
12 |     return <Provider store={createStore(reducer, {})}>{children}</Provider>;
13 |   };
> 14 |   return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
|          ^
15 | };
16 | 
17 | // re-export everything

我的自定义渲染功能

//test.utils.tsx
import React, { ReactElement } from "react";
import { render as rtlRender, RenderOptions } from "@testing-library/react";
import { Provider } from "react-redux";
import { reducer } from "state/reducer";
import { createStore } from "redux";

const store = createStore(reducer, {});
store.dispatch = jest.fn(store.dispatch);

const render = (ui: ReactElement, renderOptions?: RenderOptions) => {
const Wrapper: React.FC = ({ children }) => {
return <Provider store={createStore(reducer, {})}>{children}</Provider>;
};
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};

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

// override render method
export { render };

//FormCreate.test.tsx
import React from "react";
import { render, fireEvent, screen } from "./test.utils";
import "@testing-library/jest-dom/extend-expect";
import FormCreate from "./FormCreate";
jest.mock("react-redux", () => ({
useSelector: jest.fn().mockImplementation(selector => selector())
}));
describe("FormCreate", () => {
it("renders the correct text in the document", () => {
const { getByText } = render(
<FormCreate/>
);
expect(getByText("I'm TK")).toBeInTheDocument();
});
});

Answer 1

render需要接收一个函数https://testing-library.com/docs/example-react-intl/#a-完整的示例

const { getByText } = render(()=> <FormCreate/>);

或者你也可以试试

const { getByText } = render(FormCreate);

Answer 2

问题是您已经模拟了react redu:

jest.mock("react-redux", () => ({
useSelector: jest.fn().mockImplementation(selector => selector())
}));

删除这个，它应该工作