search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.96k stars 2.01k forks source link

Cannot read property 'child' of undefined enzyme-adapter-react-16 and react 17.0.2 #2563

Closed linzhaoqiang closed 2 years ago

linzhaoqiang commented 2 years ago

Thanks for reporting an issue to us! We're glad you are using and invested in Enzyme. Before submitting, please read over our commonly reported issues to prevent duplicates!

All common issues

Notoriously common issues

If you haven't found any duplicated issues, please report it with your environment!

Current behavior

import React from 'react';
import {injectIntl, IntlProvider} from 'react-intl'

import { mount, shallow } from 'enzyme';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
const defaultLocale = 'en'
const locale = defaultLocale

function mountWithIntl(node) {
  return mount(node, {
    wrappingComponent: IntlProvider,
    wrappingComponentProps: {
      locale,
      defaultLocale,
      messages: {},
    },
  })
}

function shallowWithIntl(node) {
  return shallow(node, {
    wrappingComponent: IntlProvider,
    wrappingComponentProps: {
      locale,
      defaultLocale,
      messages: {},
    },
  })
}

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

class Func extends React.Component {
  render() {
    return <div>{int.formatMessage({id:'xxx'})}</div>
  }
}

const Component = injectIntl(Func);

describe('Name of the group', () => {
  it('should ', () => {
    const component = mountWithIntl(<Component/>);
    expect(component.find('div').length).toBe(1);
    console.log(component);
  });
});

returns

 FAIL  src/__tests__/App.test.js
  Name of the group
    × should  (52ms)

  ● Name of the group › should 

    TypeError: Cannot read property 'child' of undefined

       9 | 
      10 | function mountWithIntl(node) {
    > 11 |   return mount(node, {
         |          ^
      12 |     wrappingComponent: IntlProvider,
      13 |     wrappingComponentProps: {
      14 |       locale,

      at child (node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:15:35)
      at getFiber (node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:76:15)
      at ReactSixteenAdapter.createMountRenderer (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:466:19)    
      at ReactSixteenAdapter.createMountRenderer [as createRenderer] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:846:51)
      at new createRenderer (node_modules/enzyme/src/ReactWrapper.js:113:32)
      at mount (node_modules/enzyme/src/mount.js:10:10)
      at mountWithIntl (src/__tests__/App.test.js:11:10)
      at Object.mountWithIntl (src/__tests__/App.test.js:46:23)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        5.808s, estimated 6s
Ran all test suites matching /d:\\learning\\echarts\\my-app\\src\\__tests__\\App.test.js/i with tests matching "Name of the group".

Expected behavior

Tests pass

Your environment

API

Version

library version
enzyme 3.11.0
react 17.0.2
react-dom 17.0.2

Adapter

ljharb commented 2 years ago

You're using react 17, and enzyme does not support react > 16 at this time. What happens with React 16?

linzhaoqiang commented 2 years ago

React 16 is OK. When can we update the enzyme-adapter-react-17?

ljharb commented 2 years ago

That’s tracked in #2429.

Closing.