Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
leroydev opened this issue Apr 17, 2024 · 0 comments · May be fixed by #13

Comments

@leroydev
Copy link

leroydev commented Apr 17, 2024

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: wojtekmaj/enzyme-adapter-react-17#45
I think I have a fix for this though, I'll create a PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant