Having an issue while up and running unit test with react redux testing library

Viewed 482

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();
  });
});
2 Answers

The problem is that you have mocked react-redux:

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

Remove this and it should work

Related