[BUG] Enzyme mount() throws a "No `ref` found." error

Description

Testing mounted motion elements using enzyme mount() throws a ref error that pertains to forwardingRefs:

Error: Uncaught [Error: No 'ref' found. Ensure components created with motion.custom forward refs using 'React.forwardRef']

CodeSandbox: https://codesandbox.io/s/mounting-motion-elements-dz7oh

Steps to reproduce

Steps to reproduce the behavior:

1. Open codesandbox link.
2. Run the tests.
3. Check the console.
4. The test that mounts the motion component will throw an exeption, while the test that shallows works as expected.

Expected behavior Enzyme should be able to successfully mount the component without throwing an exception.

Additional Information In addition to the codesandbox I have also tested the issue using the following dependency versions in my own codebase using the following:

• “react”: “16.8.4”,
• “react-dom”: “16.8.4”,
• “react-test-renderer”: “16.8.4”,
• “framer-motion”: “1.16.15”,
• “mocha”: “5.2.0”,
• “chai”: “4.1.2”,
• “enzyme”: “3.10.0”,
• “enzyme-adapter-react-16”: “1.14.0”

[gc-dan]

I’m having the same issue when using react-test-renderer’s create() method directly:

CodeSandbox: https://codesandbox.io/s/mounting-motion-elements-n2elg

Any ideas?

[emiloberg]

@andrefox333 Just a super simple mock where motion.div becomes a simple div, etc.

// __mocks__/framer-motion.tsx
import React from 'react';

export const AnimatePresence = ({ children }: { children: JSX.Element }) => children;

export const motion = {
  div: ({ children, ...rest }: { children: JSX.Element }) => <div {...rest}>{children}</div>,
  img: (props: any) => <img {...props} />,
};

//something.test.tsx
jest.mock('framer-motion');

it(() => { ... })

I just mocked div and img, as those are the only two “elements” we’re currently using. If you’re using a lot of motion elements (e.g. motion.ul, motion.li, motion.whatever) then you could return a proxy with a generic get method that returns an object of the same type as requested, e.g. motion.ul > ul