Блог

Я пытаюсь написать модульный тест, используя библиотеку тестирования 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();
  });
});
  

для рендеринга необходимо получить функциюhttps://testing-library.com/docs/example-react-intl/#a-complete-example

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

или вы можете попробовать также

 const { getByText } = render(FormCreate);
  

Проблема в том, что вы издевались над react-redux:

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

Удалите это, и оно должно работать