ForwardRef component error: jest react native

Question

I am trying to write test case for my Post Detail screen and while running it I am getting error saying :

error occurred in the <ForwardRef> component:

My test class:

import React from "react";
import { NewPostScreenTemplate } from "../screens/NewPost/template";
import renderer from "react-test-renderer";
import {
  tenantInfo,
  imageLayout1,
  imageLayout2,
  imageLayout3,
  communityCategories,
} from "../mocks/NewPostScreenMock";
import { Provider } from "react-redux";
import { createStore } from "redux";

jest.useFakeTimers();

describe("Community New Post Screen", () => {
  const mockReducer = () => ({
    customerInfo: { tenantsInfo: tenantInfo },
    community: {
      communityCategory: communityCategories,
      selectedFiles: [],
      shouldShowImageCountWarningBox: false,
      shouldShowImageSizeWarningBox: false,
    },
  });
  const mockStore = createStore(mockReducer);
  const childRef = jest.spyOn(React, "useRef").mockReturnValueOnce({ current: null });
  test("Simple new post screen", () => {
    const communityNewPost = renderer
      .create(
        <Provider store={mockStore}>
          <NewPostScreenTemplate
            ref={childRef}
            tenantInfo={tenantInfo}
            handleOnPublish={jest.fn}
            communityCategories={communityCategories}
            onBackPress={jest.fn}
            selectedImageFile={[]}
            showCameraPicker={jest.fn}
            showGalleryPicker={jest.fn}
            shouldShowImageSizeWarningBox={false}
            shouldShowImageCountWarningBox={false}
          />
        </Provider>
      )
      .toJSON();

    expect(communityNewPost).toMatchSnapshot();
  });

Please guide me how can i write test for this component. what mistake i am doing while writing test case.

I even tried with this below code :

jest.mock("../screens/NewPost/template", () => {
  const { forwardRef } = jest.requireActual("react");
  return {
    __esModule: true,
    default: forwardRef((props, ref) => <div ref={ref} />),
  };
});

But this throws an error saying :

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.

Thanks

Goode

Answer 1

Here is What I have done to resolve this problem:

Just add this function :

jest.mock("react", () => {
  const originReact = jest.requireActual("react");
  const mUseRef = jest.fn();
  return {
    ...originReact,
    useRef: mUseRef,
  };
});

Goode

Answer 2

I had the same problem and the error get solved when I replaced jest.resetAllMocks with jest.clearAllMocks(). Looks like when we are using reset all mocks it replacing the mock with undefined.

Herby