Check the render method Jest mock error on SharedElement

[marklanham]

I’ve been trying to mock my React Native component using Jest, but each time I try to run the test I get the following error in Terminal, and it points at the SharedElement component:

Check the render method of 'MyComponent'

I added this to my jest.setup.js file:

jest.mock('react-navigation-shared-element', () => ({
  createSharedElementStackNavigator: jest.fn(),
}));

jest.mock('react-native-shared-element', () => () => ({}));

I’m using the following config:

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.9.8",
    "react-native-fast-image": "^8.6.1",
    "react-native-gesture-handler": "^2.7.1",
    "react-native-reanimated": "^2.14.4",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.1",
    "react-native-shared-element": "^0.8.8",
    "react-native": "^0.71.3",
    "react-navigation-shared-element": "^3.1.3",
    "react": "18.2.0",
},
"devDependencies": {
    "@testing-library/jest-native": "^5.4.2",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/react-native": "^11.5.2",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.4.0",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.11",
    "@types/react-native": "^0.70.4",
    "@types/react-test-renderer": "^18.0.0",
    "jest": "^29.4.3",
    "jest-environment-jsdom": "^29.4.3",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^29.0.5",
    "typescript": "^4.9.4"
}

Any ideas what the issue is or do you have any pointers/examples on mocking the SharedElement component?

[marklanham]

UPDATE: Managed to fix this by adding the following code to my component Jest test:

jest.mock('react-navigation-shared-element', () => ({
  createSharedElementStackNavigator: jest.fn(),
  SharedElement: ({ children }: SharedElementProps) => <>{children}</>,
}));