"TypeError: Cannot read properties of undefined (reading 'current')" in mount API

fengxinhhh commented 2 years ago

Current behavior

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

if (typeof window !== 'undefined') {
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(), // deprecated
      removeListener: jest.fn(), // deprecated
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    })),
  });
}
export default Enzyme;

import React from 'react';
import Button from '../../../src/Button/index';
import Enzyme from '../../setup';

describe(`button`, () => {
  it('button type set show correctly color', () => {
      const component = mount(<Button type="primary" />);
      expect(component.find('.concis-button .concis-button-primary').length).toBe(1);
   });
})

Returns

 button › button type set show correctly color

    TypeError: Cannot read properties of undefined (reading 'current')

      39 |   it('button type set show correctly color', () => {
      40 |     // 测试按钮type被赋值className
    > 41 |     const component = mount(<Button type="primary" />);
         |                       ^
      42 |     expect(component.find('.concis-button .concis-button-primary').length).toBe(1);
      43 |   });
      44 |

      at warnIfNotScopedWithMatchingAct (../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:23268:31)
      at updateContainer (../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:24332:7)
      at ../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (../../node_modules/.pnpm/react-dom@16.14.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at getFiber (../../node_modules/.pnpm/enzyme-adapter-react-16@1.15.6_i6jb26zkukcjdnnkhpb37sx774/node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:14:12)
      at detectFiberTags (../../node_modules/.pnpm/enzyme-adapter-react-16@1.15.6_i6jb26zkukcjdnnkhpb37sx774/node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:76:15)
      at ReactSixteenAdapter.createMountRenderer (../../node_modules/.pnpm/enzyme-adapter-react-16@1.15.6_i6jb26zkukcjdnnkhpb37sx774/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:466:19)
      at ReactSixteenAdapter.createRenderer (../../node_modules/.pnpm/enzyme-adapter-react-16@1.15.6_i6jb26zkukcjdnnkhpb37sx774/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:846:51)
      at new ReactWrapper (../../node_modules/.pnpm/enzyme@3.11.0/node_modules/enzyme/src/ReactWrapper.js:113:32)
      at mount (../../node_modules/.pnpm/enzyme@3.11.0/node_modules/enzyme/src/mount.js:10:10)
      at Object.<anonymous> (__tests__/unit/Button/button.test.tsx:41:23)

Your environment

macos

API

[ ] shallow
[x] mount
[ ] render

Version

library	version
enzyme	3.11.0
react	16.13.0
react-dom	16.13.0
react-test-renderer	n/a
adapter (below)	enzyme-adapter-react-16

Adapter

[x] enzyme-adapter-react-16
[ ] enzyme-adapter-react-16.3
[ ] enzyme-adapter-react-16.2
[ ] enzyme-adapter-react-16.1
[ ] enzyme-adapter-react-15
[ ] enzyme-adapter-react-15.4
[ ] enzyme-adapter-react-14
[ ] enzyme-adapter-react-13
[ ] enzyme-adapter-react-helper
[ ] others ( )

fengxinhhh commented 2 years ago

The shallow api in the same file can work correctly, but the mount api cant. It also can work correctly in github action env. include the mount and shallow api.

ljharb commented 2 years ago

The mount api requires a DOM.

fengxinhhh commented 2 years ago

Why is the dom not recognized, the Button component in the case works fine, I have no way of knowing why.

fengxinhhh commented 2 years ago

Will it be related to the version number? This happened after I configured eslint for my project.

ljharb commented 2 years ago

It shouldn't be related to eslint at all.

What I do see is that you're using "react-dom@16.14.0_react@18.2.0" which suggests you're using overrides to make react 18 work - enzyme does not yet support react > 16.

fengxinhhh commented 2 years ago

The problem is found, and it is found that react18 will be automatically installed when downloading enzyme, which leads to this problem. Thank you for your help.

ljharb commented 2 years ago

It shouldn't be automatically installed - only react 16 should be automatically installed since it's a peer dep of the react 16 adapter.

Since you're using pnpm, it may be a pnpm issue - i'd suggest trying with regular npm to see if that's the problem.

Answered, so closing.

enzymejs / enzyme