when using React.memo, adding defaultProps changes the component tree
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
### 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
;
});
Component.propTypes = {
type: PropTypes.oneOf(['block', 'inline'])
};
export default Component;
```
creates tree
```
```
```
// component2.js
import PropTypes from 'prop-types';
import React from 'react';
import Child from './child'
const Component = React.memo(function Lazy({type}) {
return
;
});
Component.defaultProps = {
type: 'block'
};
Component.propTypes = {
type: PropTypes.oneOf(['block', 'inline'])
};
export default Component;
```
creates tree
```
```
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();
const comp2 = mount()
console.log(comp.debug());
console.log(comp2.debug());
```
#### API
- [ ] shallow
- [x] 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
- [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 ( )
Contributor guide
Research direction
Reproduce the issue with component.js and component2.js using the mount example, then inspect the output from comp.debug() and comp2.debug(). Trace how enzyme-adapter-react-16 handles React.memo and defaultProps; done means the equivalent components produce consistent mounted trees, with a regression test for the reported behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100