I am trying to write unit test using react testing library(https://testing-library.com/docs/example-react-redux).
//Error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
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
My custom render function
//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();
});
});