Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TEST] Regression on CDU on setProps on shallow wrapped component #2027

Merged
merged 2 commits into from Mar 15, 2019
Merged

[TEST] Regression on CDU on setProps on shallow wrapped component #2027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80d9f71
[Tests] add (shallow-failing) tests for calling cDU when gDSFP is def…
peanutenthusiast Feb 26, 2019
275b0b3
[Fix] `shallow`: ensure that if gDSFP exists, cDU is called.
peanutenthusiast Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
123 changes: 121 additions & 2 deletions packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
View file
Open in desktop
Expand Up @@ -2502,8 +2502,8 @@ describeWithDOM('mount', () => {
]);
});

describe('setProps should not call componentDidUpdate twice', () => {
it('first test case', () => {
describe('setProps does not call componentDidUpdate twice', () => {
it('when setState is called in cWRP', () => {
class Dummy extends React.Component {
constructor(...args) {
super(...args);
Expand Down Expand Up @@ -6946,6 +6946,125 @@ describeWithDOM('mount', () => {
wrapper.instance().setDeepDifferentState();
expect(updateSpy).to.have.property('callCount', 1);
});

describeIf(is('>= 16.3'), 'setProps calls `componentDidUpdate` when `getDerivedStateFromProps` is defined', () => {
class DummyComp extends PureComponent {
constructor(...args) {
super(...args);
this.state = { state: -1 };
}

static getDerivedStateFromProps({ changeState, counter }) {
return changeState ? { state: counter * 10 } : null;
}

componentDidUpdate() {}

render() {
const { counter } = this.props;
const { state } = this.state;
return (
<p>
{counter}
{state}
</p>
);
}
}

const cDU = sinon.spy(DummyComp.prototype, 'componentDidUpdate');
const gDSFP = sinon.spy(DummyComp, 'getDerivedStateFromProps');

beforeEach(() => { // eslint-disable-line mocha/no-sibling-hooks
cDU.resetHistory();
gDSFP.resetHistory();
});

it('with no state changes, calls both methods with a sync and async setProps', () => {
const wrapper = mount(<DummyComp changeState={false} counter={0} />);

expect(cDU).to.have.property('callCount', 0);
expect(gDSFP).to.have.property('callCount', 1);
const [firstCall] = gDSFP.args;
expect(firstCall).to.eql([{
changeState: false,
counter: 0,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });

wrapper.setProps({ counter: 1 });

expect(cDU).to.have.property('callCount', 1);
expect(gDSFP).to.have.property('callCount', 2);
const [, secondCall] = gDSFP.args;
expect(secondCall).to.eql([{
changeState: false,
counter: 1,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });

return new Promise((resolve) => {
wrapper.setProps({ counter: 2 }, resolve);
}).then(() => {
expect(cDU).to.have.property('callCount', 2);
expect(gDSFP).to.have.property('callCount', 3);
const [, , thirdCall] = gDSFP.args;
expect(thirdCall).to.eql([{
changeState: false,
counter: 2,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });
});
});

it('with a state changes, calls both methods with a sync and async setProps', () => {
const wrapper = mount(<DummyComp changeState counter={0} />);

expect(gDSFP).to.have.property('callCount', 1);
const [firstCall] = gDSFP.args;
expect(firstCall).to.eql([{
changeState: true,
counter: 0,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: 0 });

wrapper.setProps({ counter: 1 });

expect(cDU).to.have.property('callCount', 1);
expect(gDSFP).to.have.property('callCount', 2);
const [, secondCall] = gDSFP.args;
expect(secondCall).to.eql([{
changeState: true,
counter: 1,
}, {
state: 0,
}]);
expect(wrapper.state()).to.eql({ state: 10 });

return new Promise((resolve) => {
wrapper.setProps({ counter: 2 }, resolve);
}).then(() => {
expect(cDU).to.have.property('callCount', 2);
expect(gDSFP).to.have.property('callCount', 3);
const [, , thirdCall] = gDSFP.args;
expect(thirdCall).to.eql([{
changeState: true,
counter: 2,
}, {
state: 10,
}]);
expect(wrapper.state()).to.eql({ state: 20 });
});
});
});
});

describe('Own PureComponent implementation', () => {
Expand Down
123 changes: 121 additions & 2 deletions packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
View file
Open in desktop
Expand Up @@ -2505,8 +2505,8 @@ describe('shallow', () => {
]);
});

describe('setProps should not call componentDidUpdate twice', () => {
it('first test case', () => {
describe('setProps does not call componentDidUpdate twice', () => {
it('when setState is called in cWRP', () => {
class Dummy extends React.Component {
constructor(...args) {
super(...args);
Expand Down Expand Up @@ -7235,6 +7235,125 @@ describe('shallow', () => {
wrapper.instance().setDeepDifferentState();
expect(updateSpy).to.have.property('callCount', 1);
});

describeIf(is('>= 16.3'), 'setProps calls `componentDidUpdate` when `getDerivedStateFromProps` is defined', () => {
class DummyComp extends PureComponent {
constructor(...args) {
super(...args);
this.state = { state: -1 };
}

static getDerivedStateFromProps({ changeState, counter }) {
return changeState ? { state: counter * 10 } : null;
}

componentDidUpdate() {}

render() {
const { counter } = this.props;
const { state } = this.state;
return (
<p>
{counter}
{state}
</p>
);
}
}

const cDU = sinon.spy(DummyComp.prototype, 'componentDidUpdate');
const gDSFP = sinon.spy(DummyComp, 'getDerivedStateFromProps');

beforeEach(() => { // eslint-disable-line mocha/no-sibling-hooks
cDU.resetHistory();
gDSFP.resetHistory();
});

it('with no state changes, calls both methods with a sync and async setProps', () => {
const wrapper = shallow(<DummyComp changeState={false} counter={0} />);

expect(gDSFP).to.have.property('callCount', 1);
const [firstCall] = gDSFP.args;
expect(firstCall).to.eql([{
changeState: false,
counter: 0,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });

wrapper.setProps({ counter: 1 });

expect(cDU).to.have.property('callCount', 1);
expect(gDSFP).to.have.property('callCount', 2);
const [, secondCall] = gDSFP.args;
expect(secondCall).to.eql([{
changeState: false,
counter: 1,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });

return new Promise((resolve) => {
wrapper.setProps({ counter: 2 }, resolve);
}).then(() => {
expect(cDU).to.have.property('callCount', 2);
expect(gDSFP).to.have.property('callCount', 3);
const [, , thirdCall] = gDSFP.args;
expect(thirdCall).to.eql([{
changeState: false,
counter: 2,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: -1 });
});
});

it('with a state changes, calls both methods with a sync and async setProps', () => {
const wrapper = shallow(<DummyComp changeState counter={0} />);

expect(cDU).to.have.property('callCount', 0);
expect(gDSFP).to.have.property('callCount', 1);
const [firstCall] = gDSFP.args;
expect(firstCall).to.eql([{
changeState: true,
counter: 0,
}, {
state: -1,
}]);
expect(wrapper.state()).to.eql({ state: 0 });

wrapper.setProps({ counter: 1 });

expect(cDU).to.have.property('callCount', 1);
expect(gDSFP).to.have.property('callCount', 2);
const [, secondCall] = gDSFP.args;
expect(secondCall).to.eql([{
changeState: true,
counter: 1,
}, {
state: 0,
}]);
expect(wrapper.state()).to.eql({ state: 10 });

return new Promise((resolve) => {
wrapper.setProps({ counter: 2 }, resolve);
}).then(() => {
expect(cDU).to.have.property('callCount', 2);
expect(gDSFP).to.have.property('callCount', 3);
const [, , thirdCall] = gDSFP.args;
expect(thirdCall).to.eql([{
changeState: true,
counter: 2,
}, {
state: 10,
}]);
expect(wrapper.state()).to.eql({ state: 20 });
});
});
});
});

describe('Own PureComponent implementation', () => {
Expand Down
7 changes: 6 additions & 1 deletion packages/enzyme/src/ShallowWrapper.js
View file
Open in desktop
Expand Up @@ -462,6 +462,7 @@ class ShallowWrapper {
// this case, state will be undefined, but props/context will exist.
const node = this[RENDERER].getNode();
const instance = node.instance || {};
const type = node.type || {};
const { state } = instance;
const prevProps = instance.props || this[UNRENDERED].props;
const prevContext = instance.context || this[OPTIONS].context;
Expand Down Expand Up @@ -522,7 +523,11 @@ class ShallowWrapper {
if (
lifecycles.componentDidUpdate
&& typeof instance.componentDidUpdate === 'function'
&& (!state || shallowEqual(state, this.instance().state))
&& (
!state
|| shallowEqual(state, this.instance().state)
|| typeof type.getDerivedStateFromProps === 'function'
)
) {
instance.componentDidUpdate(prevProps, state, snapshot);
}
Expand Down