Skip to content

Commit

Permalink
[enzyme-adapter-react-16] [fix] ensure the correct displayName for `m…
Browse files Browse the repository at this point in the history
…emo` components.

Expected results verified with the React Dev Tools.
  • Loading branch information
ljharb committed May 25, 2019
1 parent 3ab8035 commit acc6528
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 10 deletions.
5 changes: 4 additions & 1 deletion packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
Original file line number Diff line number Diff line change
Expand Up @@ -803,7 +803,10 @@ class ReactSixteenAdapter extends EnzymeAdapter {
switch ($$typeofType) {
case ContextConsumer || NaN: return 'ContextConsumer';
case ContextProvider || NaN: return 'ContextProvider';
case Memo || NaN: return displayNameOfNode(type);
case Memo || NaN: {
const nodeName = displayNameOfNode(node);
return typeof nodeName === 'string' ? nodeName : `Memo(${displayNameOfNode(type)})`;
}
case ForwardRef || NaN: {
if (type.displayName) {
return type.displayName;
Expand Down
4 changes: 2 additions & 2 deletions packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -685,7 +685,7 @@ describeWithDOM('mount', () => {
const Foo = memo(InnerFoo);

const wrapper = mount(<Foo foo="qux" />);
expect(wrapper.debug()).to.equal(`<InnerFoo foo="qux">
expect(wrapper.debug()).to.equal(`<Memo(InnerFoo) foo="qux">
<div>
<InnerComp>
<div>
Expand All @@ -701,7 +701,7 @@ describeWithDOM('mount', () => {
qux
</div>
</div>
</InnerFoo>`);
</Memo(InnerFoo)>`);
expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(1);
expect(wrapper.find('.qoo').text()).to.equal('qux');
Expand Down
2 changes: 1 addition & 1 deletion packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -1664,7 +1664,7 @@ describe('shallow', () => {

it('works with memoizing', () => {
const wrapper = shallow(<RendersAppMemoized />);
expect(wrapper.debug()).to.equal('<App />');
expect(wrapper.debug()).to.equal('<AppMemoized />');
expect(wrapper.dive().debug()).to.equal(`<div>
Guest
</div>`);
Expand Down
37 changes: 37 additions & 0 deletions packages/enzyme-test-suite/test/shared/methods/debug.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,43 @@ export default function describeDebug({
});

describeIf(is('>= 16.6'), 'React.memo', () => {
describe('display names', () => {
function SFC() { return null; }
function SFCwithDisplayName() { return null; }
SFCwithDisplayName.displayName = 'SFC!';

const SFCMemo = memo && memo(SFC);
const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName);

const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), {
displayName: 'SFCMemoWithDisplayName!',
});
const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), {
displayName: 'SFCMemoWitDoubleDisplayName!',
});

it('displays the expected display names', () => {
const wrapper = Wrap((
<div>
<SFC />
<SFCwithDisplayName />
<SFCMemo />
<SFCwithDisplayNameMemo />
<SFCMemoWithDisplayName />
<SFCMemoWitDoubleDisplayName />
</div>
));
expect(wrapper.debug()).to.equal(`<div>
<SFC />
<SFC! />
<Memo(SFC) />
<Memo(SFC!) />
<SFCMemoWithDisplayName! />
<SFCMemoWitDoubleDisplayName! />
</div>`);
});
});

describe('defaultProps', () => {
function Add({ a, b, c }) {
return <div>{String(a)}|{String(b)}|{String(c)}</div>;
Expand Down
13 changes: 7 additions & 6 deletions packages/enzyme-test-suite/test/shared/methods/find.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -876,15 +876,15 @@ export default function describeFind({
const expectedDebug = isShallow
? `<div>
<InnerComp message="Hello" />
<InnerComp message="find me?" />
<Memo(InnerComp) message="find me?" />
<div className="bar">
bar
</div>
<div className="qoo">
qux
</div>
</div>`
: `<InnerFoo foo="qux">
: `<Memo(InnerFoo) foo="qux">
<div>
<InnerComp message="Hello">
<div>
Expand All @@ -893,23 +893,24 @@ export default function describeFind({
</span>
</div>
</InnerComp>
<InnerComp message="find me?">
<Memo(InnerComp) message="find me?">
<div>
<span>
find me?
</span>
</div>
</InnerComp>
</Memo(InnerComp)>
<div className="bar">
bar
</div>
<div className="qoo">
qux
</div>
</div>
</InnerFoo>`;
</Memo(InnerFoo)>`;
expect(wrapper.debug()).to.equal(expectedDebug);
expect(wrapper.find('InnerComp')).to.have.lengthOf(2);
expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
expect(wrapper.find('Memo(InnerComp)')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(1);
expect(wrapper.find('.qoo').text()).to.equal('qux');
expect(wrapper.find(InnerMemo)).to.have.lengthOf(1);
Expand Down

0 comments on commit acc6528

Please sign in to comment.