Cannot read properties of undefined (reading '__reactFiber$at8hgqvimol') when calling simulate on @emotion/styled component

[leroydev]

When I have the following example component:

import styled from '@emotion/styled';

const InnerButton = (props: any) => {
  return <button {...props}>Inner Button</button>;
}

export const Button = styled(InnerButton)(() => {
  return {
    background: 'blue'
  };
});

export default function Home() {
  return (
    <Button onClick={() => alert('Hello, Emotion!')}>Hello, Emotion!</Button>
  );
}

With @emotion/styled 11.11.5, when I test with this unit test:

import { mount } from 'enzyme';
import Home, { Button } from './index';

describe('button', () => {
  it('should alert "Hello, Emotion!" when clicked', () => {
    const button = mount(
      <Home />
    );
    const alertSpy = jest.spyOn(window, 'alert').mockImplementation();
    button.find(Button).simulate('click');

    expect(alertSpy).toHaveBeenCalledWith('Hello, Emotion!');
  });
});

I get the following error:

TypeError: Cannot read properties of undefined (reading '__reactFiber$paxx60fbezr')
    at getInstanceFromNode (C:\code\enzyme-adapter-react-emotion-issue\node_modules\react-dom\cjs\react-dom.development.js:11599:18)
    at C:\code\enzyme-adapter-react-emotion-issue\node_modules\react-dom\cjs\react-dom-test-utils.development.js:1686:22
    at C:\code\enzyme-adapter-react-emotion-issue\node_modules\@cfaester\enzyme-adapter-react-18\dist\ReactEighteenAdapter.js:425:21
    at act (C:\code\enzyme-adapter-react-emotion-issue\node_modules\react\cjs\react.development.js:2512:16)
    at Object.simulateEvent (C:\code\enzyme-adapter-react-emotion-issue\node_modules\@cfaester\enzyme-adapter-react-18\dist\ReactEighteenAdapter.js:424:23)
    at ReactWrapper.call (C:\code\enzyme-adapter-react-emotion-issue\node_modules\enzyme\src\ReactWrapper.js:666:22)
    at ReactWrapper.single (C:\code\enzyme-adapter-react-emotion-issue\node_modules\enzyme\src\ReactWrapper.js:1170:21)
    at ReactWrapper.simulate (C:\code\enzyme-adapter-react-emotion-issue\node_modules\enzyme\src\ReactWrapper.js:665:17)
    at Object.<anonymous> (C:\code\enzyme-adapter-react-emotion-issue\src\pages\index.test.tsx:12:25)
    at Promise.then.completed (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\utils.js:231:10)
    at _callCircusTest (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async _runTest (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\run.js:252:3)
    at async _runTestsForDescribeBlock (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\run.js:126:9)
    at async _runTestsForDescribeBlock (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\run.js:121:9)
    at async run (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\run.js:71:3)
    at async runAndTransformResultsToJestFormat (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapterInit.js:122:21)
    at async jestAdapter (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapter.js:79:19)
    at async runTestInternal (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-runner\build\runTest.js:367:16)
    at async runTest (C:\code\enzyme-adapter-react-emotion-issue\node_modules\jest-runner\build\runTest.js:444:34)

This seems like the same problem as was in the react-17 adapter: https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/45 I think I have a fix for this though, I'll create a PR