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

user2028 · Accepted Answer · 2022-10-06 15:06:10Z

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,
  };
});

answered Oct 6, 2022 at 15:06

user2028

1934 gold badges17 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiril Dobrev · Accepted Answer · 2024-04-15 11:56:07Z

0

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.

answered Apr 15, 2024 at 11:56

Kiril Dobrev

8691 gold badge9 silver badges13 bronze badges

Collectives™ on Stack Overflow

ForwardRef component error: jest react native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related