enzymejs/enzyme

when using React.memo, adding defaultProps changes the component tree

Open

Aperta il 12 nov 2020

Vedi su GitHub
 (6 commenti) (0 reazioni) (0 assegnatari)JavaScript (19.979 star) (2016 fork)batch import
API: mountbughelp wanted

Descrizione

Current behavior

component and component2 are identical: component2 only adds defaultProps, but enzyme treats them differently

// component.js
import PropTypes from 'prop-types';
import React from 'react';
import Child from './child'

const Component = React.memo(function Lazy({type}) {
    return <Child>
        <div>
        </div>
    </Child>;
});

Component.propTypes = {
    type: PropTypes.oneOf(['block', 'inline'])
};

export default Component;

creates tree

    <Memo(Lazy)>
      <Child>
        <div>
          <div />
        </div>
      </Child>
    </Memo(Lazy)>

// component2.js
import PropTypes from 'prop-types';
import React from 'react';
import Child from './child'

const Component = React.memo(function Lazy({type}) {
    return <Child>
        <div>
        </div>
    </Child>;
});

Component.defaultProps = {
    type: 'block'
};

Component.propTypes = {
    type: PropTypes.oneOf(['block', 'inline'])
};

export default Component;

creates tree

    <Lazy type="block">
      <Child>
        <div>
          <div />
        </div>
      </Child>
    </Lazy>

code used to test them:

import React from 'react';
import { configure, mount } from 'enzyme';
import Component from './component';
import Component2 from './component2';
import Adapter from "enzyme-adapter-react-16";

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

const comp = mount(<Component />);
const comp2 = mount(<Component2 />)

console.log(comp.debug()); 
console.log(comp2.debug());

API

  • shallow
  • mount
  • render

enzyme version: 3.11.0

library version
enzyme 3.11.0
react 16.14.0
react-dom 16.14.0
react-test-renderer 16.14.0
adapter (below)

Adapter

  • 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 ( )

Guida contributor