+ describe('context', () => {
+ it('can pass in context', () => {
+ const Bar = (props, context) => (
+
+ );
+ Bar.contextTypes = { name: PropTypes.string };
+ const Foo = () => (
+
);
- }
- }
- class TwoChildrenOneArrayed extends React.Component {
- render() {
- return (
-
-
- {[
]}
+ const context = { name: 'foo' };
+ const wrapper = shallow(
);
+ expect(wrapper.find(Bar).shallow({ context }).text()).to.equal('foo');
+ });
+
+ it('does not throw if context is passed in but contextTypes is missing', () => {
+ const Bar = (props, context) => (
+
{context.name}
+ );
+ const Foo = () => (
+
+
);
- }
- }
- const twoChildren = shallow(
);
- const twoChildrenOneArrayed = shallow(
);
- expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
- expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
- });
- });
+ const context = { name: 'foo' };
+ const wrapper = shallow(
);
+ expect(() => wrapper.find(Bar).shallow({ context })).to.not.throw();
+ });
- describe('.hostNodes()', () => {
- it('strips out any non-hostNode', () => {
- class Foo extends React.Component {
- render() {
- return
;
- }
- }
- const wrapper = shallow((
-
- ));
+ itIf(is('< 16'), 'is introspectable through context API', () => {
+ const Bar = (props, context) => (
+
{context.name}
+ );
+ Bar.contextTypes = { name: PropTypes.string };
+ const Foo = () => (
+
+
+ );
- const foos = wrapper.find('.foo');
- expect(foos).to.have.lengthOf(2);
+ const context = { name: 'foo' };
+ const wrapper = shallow(
).find(Bar).shallow({ context });
- const hostNodes = foos.hostNodes();
- expect(hostNodes).to.have.lengthOf(1);
+ expect(wrapper.context().name).to.equal(context.name);
+ expect(wrapper.context('name')).to.equal(context.name);
+ });
- expect(hostNodes.is('div')).to.equal(true);
- expect(hostNodes.hasClass('foo')).to.equal(true);
- });
- });
-
- describe('.find(selector)', () => {
- it('matches the root DOM element', () => {
- const wrapper = shallow(
hello
);
- expect(wrapper.find('#ttt')).to.have.lengthOf(1);
- expect(wrapper.find('.ttt')).to.have.lengthOf(1);
- });
-
- it('finds an element based on a class name', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('.foo').type()).to.equal('input');
- });
-
- it('finds an element that has dot in attribute', () => {
- const wrapper = shallow((
-
- ));
-
- const elements = wrapper.find('[data-baz="foo.bar"]');
- expect(elements).to.have.lengthOf(1);
- });
-
- it('finds an element that with class and attribute', () => {
- const wrapper = shallow((
-
- ));
-
- const elements = wrapper.find('.classBar[data-baz="bar"]');
- expect(elements).to.have.lengthOf(1);
- });
-
- it('finds an element that with multiple classes and one attribute', () => {
- const wrapper = shallow((
-
- ));
-
- const elements = wrapper.find('.classBar.classFoo[data-baz="bar"]');
- expect(elements).to.have.lengthOf(1);
- });
-
- it('finds an element that with class and class with hyphen', () => {
- const wrapper = shallow((
-
- ));
-
- const elements = wrapper.find('.classBar.class-Foo');
- expect(elements).to.have.lengthOf(1);
- });
-
- it('finds an element based on a tag name and class name', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('input.foo')).to.have.lengthOf(1);
- });
-
- it('finds an element based on a tag name and id', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('input#foo')).to.have.lengthOf(1);
- });
+ itIf(is('>= 16'), 'will throw when trying to inspect context', () => {
+ const Bar = (props, context) => (
+
{context.name}
+ );
+ Bar.contextTypes = { name: PropTypes.string };
+ const Foo = () => (
+
+
+ );
- it('finds an element based on a tag name, id, and class name', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('input#foo.bar')).to.have.lengthOf(1);
- });
+ const context = { name: 'foo' };
+ const wrapper = shallow(
).find(Bar).shallow({ context });
- it('finds an element based on a tag name', () => {
- const wrapper = shallow((
-
- Button
-
-
- ));
- expect(wrapper.find('input').props().className).to.equal('foo');
- expect(wrapper.find('button').props().className).to.equal('bar');
- expect(wrapper.find('textarea').props().className).to.equal('magic');
- expect(wrapper.find('select').props().className).to.equal('reality');
+ expect(() => wrapper.context()).to.throw(
+ Error,
+ 'ShallowWrapper::context() can only be called on wrapped nodes that have a non-null instance',
+ );
+ expect(() => wrapper.context('name')).to.throw(
+ Error,
+ 'ShallowWrapper::context() can only be called on wrapped nodes that have a non-null instance',
+ );
+ });
+ });
});
+ });
- it('finds a component based on a constructor', () => {
- class Foo extends React.Component {
- render() { return
; }
+ describe('.dive()', () => {
+ class RendersDOM extends React.Component {
+ render() {
+ return
;
}
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find(Foo).type()).to.equal(Foo);
- });
-
- wrap()
- .withOverride(() => getAdapter(), 'isValidElementType', () => () => false)
- .it('throws when an adapter’s `isValidElementType` lies', () => {
- class Foo extends React.Component {
- render() { return
; }
- }
- const wrapper = shallow((
+ }
+ class RendersNull extends React.Component {
+ render() {
+ return null;
+ }
+ }
+ class RendersMultiple extends React.Component {
+ render() {
+ return (
-
- ));
-
- expect(() => wrapper.find(Foo)).to.throw(
- TypeError,
- 'Enzyme::Selector expects a string, object, or valid element type (Component Constructor)',
);
- });
-
- it('finds a component based on a component display name', () => {
- class Foo extends React.Component {
- render() { return
; }
}
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('Foo').type()).to.equal(Foo);
- });
-
- it('finds multiple elements based on a class name', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('.foo')).to.have.lengthOf(2);
- });
+ }
+ class RendersZero extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ class WrapsRendersDOM extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ WrapsRendersDOM.contextTypes = { foo: PropTypes.string };
+ class DoubleWrapsRendersDOM extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ class ContextWrapsRendersDOM extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ ContextWrapsRendersDOM.contextTypes = { foo: PropTypes.string };
- it('finds multiple elements based on a tag name', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('input')).to.have.lengthOf(2);
- expect(wrapper.find('button')).to.have.lengthOf(1);
- });
+ it('throws on a DOM node', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.is('div')).to.equal(true);
- it('works on non-single nodes', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.a')).to.have.lengthOf(1);
- expect(wrapper.find('.b')).to.have.lengthOf(2);
- expect(wrapper.find('.b').find('.c')).to.have.lengthOf(6);
+ expect(() => { wrapper.dive(); }).to.throw(
+ TypeError,
+ 'ShallowWrapper::dive() can not be called on Host Components',
+ );
});
- it('finds component based on a react prop', () => {
- const wrapper = shallow((
-
-
- ));
-
- expect(wrapper.find('[title="foo"]')).to.have.lengthOf(1);
- expect(wrapper.find('[title]')).to.have.lengthOf(1);
- });
+ it('throws on a non-component', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.type()).to.equal(null);
- it('works with an adjacent sibling selector', () => {
- const a = 'some';
- const b = 'text';
- const wrapper = shallow((
-
-
- {a}
- {b}
-
-
- {a}
- {b}
-
-
- ));
- expect(wrapper.find('.row')).to.have.lengthOf(2);
- expect(wrapper.find('.row + .row')).to.have.lengthOf(1);
+ expect(() => { wrapper.dive(); }).to.throw(
+ TypeError,
+ 'ShallowWrapper::dive() can only be called on components',
+ );
});
- it('throws for non-numeric attribute values without quotes', () => {
- const wrapper = shallow((
-
-
- ));
- expect(() => wrapper.find('[type=text]')).to.throw(
+ it('throws on multiple children found', () => {
+ const wrapper = shallow(
).find('div').children();
+ expect(() => { wrapper.dive(); }).to.throw(
Error,
- 'Failed to parse selector: [type=text]',
+ 'Method “dive” is meant to be run on 1 node. 2 found instead.',
);
- expect(() => wrapper.find('[type=hidden]')).to.throw(
+ });
+
+ it('throws on zero children found', () => {
+ const wrapper = shallow(
).find('div').children();
+ expect(() => { wrapper.dive(); }).to.throw(
Error,
- 'Failed to parse selector: [type=hidden]',
+ 'Method “dive” is meant to be run on 1 node. 0 found instead.',
);
- expect(() => wrapper.find('[type="text"]')).to.not.throw(
+ });
+
+ it('throws on zero children found', () => {
+ const wrapper = shallow(
).find('div').children();
+ expect(() => { wrapper.dive(); }).to.throw(
Error,
- 'Failed to parse selector: [type="text"]',
+ 'Method “dive” is meant to be run on 1 node. 0 found instead.',
);
});
- it('errors sensibly if any of the search props are undefined', () => {
- const wrapper = shallow((
-
-
- ));
+ it('dives + shallow-renders when there is one component child', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.is(WrapsRendersDOM)).to.equal(true);
- expect(() => wrapper.find({ type: undefined })).to.throw(
- TypeError,
- 'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.',
- );
+ const underwater = wrapper.dive();
+ expect(underwater.is(RendersDOM)).to.equal(true);
});
- it('compounds tag and prop selector', () => {
- const wrapper = shallow((
-
-
- ));
+ describeIf(is('>=16.3.0'), 'forwardRef Elements', () => {
+ const ForwardRefWrapsRendersDOM = forwardRef && forwardRef(() =>
);
+ const NestedForwarRefsWrapsRendersDom = forwardRef && forwardRef(() =>
);
- expect(wrapper.find('span[preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1);
- expect(wrapper.find('span[preserveAspectRatio]')).to.have.lengthOf(1);
- });
+ if (forwardRef) {
+ NestedForwarRefsWrapsRendersDom.contextTypes = { foo: PropTypes.string };
+ ForwardRefWrapsRendersDOM.contextTypes = { foo: PropTypes.string };
+ }
- it('supports data prop selectors', () => {
- const wrapper = shallow((
-
-
- ));
+ it('dives + shallow-renders a forwardRef component', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.is(WrapsRendersDOM)).to.equal(true);
- expect(wrapper.find('[data-foo="bar"]')).to.have.lengthOf(1);
- expect(wrapper.find('[data-foo]')).to.have.lengthOf(1);
- });
+ const underwater = wrapper.dive();
+ expect(underwater.is(RendersDOM)).to.equal(true);
+ });
- it('finds components with multiple matching react props', () => {
- function noop() {}
- const wrapper = shallow((
-
-
- ));
+ it('dives + shallow-renders a with nested forwardRefs component', () => {
+ const wrapper = shallow(
);
+ expect(wrapper.is(ForwardRefWrapsRendersDOM)).to.equal(true);
- expect(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.lengthOf(1);
- expect(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1);
- expect(wrapper.find('[htmlFor][preserveAspectRatio]')).to.have.lengthOf(1);
+ const underwater = wrapper.dive();
+ expect(underwater.is(WrapsRendersDOM)).to.equal(true);
+ });
});
- it('supports boolean and numeric values for matching props', () => {
- const wrapper = shallow((
-
- ));
+ it('merges and pass options through', () => {
+ const wrapper = shallow(
, { context: { foo: 'hello' } });
+ expect(wrapper.context()).to.deep.equal({ foo: 'hello' });
+
+ let underwater = wrapper.dive();
+ expect(underwater.context()).to.deep.equal({ foo: 'hello' });
- expect(wrapper.find('span[value=1]')).to.have.lengthOf(1);
- expect(wrapper.find('span[value=2]')).to.have.lengthOf(0);
- expect(wrapper.find('a[value=false]')).to.have.lengthOf(1);
- expect(wrapper.find('a[value=true]')).to.have.lengthOf(0);
+ underwater = wrapper.dive({ context: { foo: 'enzyme!' } });
+ expect(underwater.context()).to.deep.equal({ foo: 'enzyme!' });
});
+ });
- it('does not find key or ref via property selector', () => {
- const arrayOfComponents = [
,
];
-
- const wrapper = shallow((
-
-
- {arrayOfComponents}
-
- ));
-
- expect(wrapper.find('div[ref="foo"]')).to.have.lengthOf(0);
- expect(wrapper.find('div[key="1"]')).to.have.lengthOf(0);
- expect(wrapper.find('[ref]')).to.have.lengthOf(0);
- expect(wrapper.find('[key]')).to.have.lengthOf(0);
- });
-
- it('finds multiple elements based on a constructor', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('input')).to.have.lengthOf(2);
- expect(wrapper.find('button')).to.have.lengthOf(1);
- });
-
- it('supports object property selectors', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find({ a: 1 })).to.have.lengthOf(0);
- expect(wrapper.find({ 'data-test': 'ref' })).to.have.lengthOf(7);
- expect(wrapper.find({ className: 'foo' })).to.have.lengthOf(1);
- expect(wrapper.find({ prop: null })).to.have.lengthOf(1);
- expect(wrapper.find({ prop: 123 })).to.have.lengthOf(1);
- expect(wrapper.find({ prop: false })).to.have.lengthOf(1);
- expect(wrapper.find({ prop: true })).to.have.lengthOf(1);
- });
-
- it('supports complex and nested object property selectors', () => {
- const testFunction = () => ({});
- const wrapper = shallow((
-
- ));
- expect(wrapper.find({ 'data-test': 'ref' })).to.have.lengthOf(4);
- expect(wrapper.find({ more: { a: 1 } })).to.have.lengthOf(0);
- expect(wrapper.find({ more: [{ id: 1 }] })).to.have.lengthOf(2);
- expect(wrapper.find({ more: { item: { id: 1 } } })).to.have.lengthOf(1);
- expect(wrapper.find({ style: { height: 20 } })).to.have.lengthOf(1);
- expect(wrapper.find({
- more: [{ id: 1 }],
- 'data-test': 'ref',
- prop: true,
- onChange: testFunction,
- })).to.have.lengthOf(1);
- });
-
- it('throws when given empty object, null, or an array', () => {
- const wrapper = shallow((
-
-
- ));
- expect(() => wrapper.find({})).to.throw(
- TypeError,
- 'Enzyme::Selector does not support an array, null, or empty object as a selector',
- );
- expect(() => wrapper.find([])).to.throw(
- TypeError,
- 'Enzyme::Selector does not support an array, null, or empty object as a selector',
- );
- expect(() => wrapper.find(null)).to.throw(
- TypeError,
- 'Enzyme::Selector does not support an array, null, or empty object as a selector',
- );
- });
-
- it('queries attributes with spaces in their values', () => {
- const wrapper = shallow((
-
-
Hello
- World
-
- ));
- expect(wrapper.find('[data-foo]')).to.have.lengthOf(2);
- expect(wrapper.find('[data-foo="foo bar"]')).to.have.lengthOf(1);
- expect(wrapper.find('[data-foo="bar baz quz"]')).to.have.lengthOf(1);
- expect(wrapper.find('[data-foo="bar baz"]')).to.have.lengthOf(0);
- expect(wrapper.find('[data-foo="foo bar"]')).to.have.lengthOf(0);
- expect(wrapper.find('[data-foo="bar baz quz"]')).to.have.lengthOf(0);
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('finds a component based on a constructor', () => {
- const Foo = () => (
-
- );
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find(Foo).type()).to.equal(Foo);
- });
-
- it('finds a component based on a display name', () => {
- const Foo = () => (
-
- );
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.find('Foo').type()).to.equal(Foo);
- });
- });
-
- describe('works with attribute selectors containing #', () => {
- let wrapper;
- beforeEach(() => {
- wrapper = shallow((
-
- ));
- });
+ describe('lifecycle methods', () => {
+ describe('disableLifecycleMethods option', () => {
+ describe('validation', () => {
+ it('throws for a non-boolean value', () => {
+ ['value', 42, null].forEach((value) => {
+ expect(() => shallow(
, {
+ disableLifecycleMethods: value,
+ })).to.throw(/true or false/);
+ });
+ });
- it('works with an ID', () => {
- expect(wrapper.find('a#test')).to.have.lengthOf(1);
- });
+ it('does not throw for a boolean value or undefined', () => {
+ [true, false, undefined].forEach((value) => {
+ expect(() => shallow(
, {
+ disableLifecycleMethods: value,
+ })).not.to.throw();
+ });
+ });
- it('works with a normal attribute', () => {
- expect(wrapper.find('a[href="/page"]')).to.have.lengthOf(1);
- });
+ it('does not throw when no lifecycle flags are provided in options', () => {
+ expect(() => shallow(
, {})).not.to.throw();
+ });
- it('works with an attribute with a #', () => {
- expect(wrapper.find('a[href="/page#anchor"]')).to.have.lengthOf(1);
+ it('throws when used with lifecycleExperimental in invalid combinations', () => {
+ [true, false].forEach((value) => {
+ expect(() => shallow(
, {
+ lifecycleExperimental: value,
+ disableLifecycleMethods: value,
+ })).to.throw(/same value/);
+ });
+ });
});
- });
- describe('works with data- attributes', () => {
- class Foo extends React.Component {
- render() {
- return (
-
-
-
-
- );
- }
- }
+ describe('when disabled', () => {
+ let wrapper;
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ componentWillMount() { spy('componentWillMount'); }
- it('finds elements by data attribute', () => {
- const wrapper = shallow(
);
- expect(wrapper.html()).to.contain('data-custom-tag="bookIcon"'); // sanity check
- const elements = wrapper.find('[data-custom-tag="bookIcon"]');
- expect(elements).to.have.lengthOf(2);
- expect(elements.filter('i')).to.have.lengthOf(2);
- });
- });
+ componentDidMount() { spy('componentDidMount'); }
- describeIf(is('>= 16.2'), 'works with fragments', () => {
- const NestedFragmentComponent = () => (
-
-
- A span
- B span
- A div
-
- C span
-
-
-
D span
-
- );
+ componentWillReceiveProps() { spy('componentWillReceiveProps'); }
- it('finds descendant span inside React.Fragment', () => {
- const wrapper = shallow(
);
- expect(wrapper.find('.container span')).to.have.lengthOf(4);
- });
+ shouldComponentUpdate() {
+ spy('shouldComponentUpdate');
+ return true;
+ }
- it('finds nonexistent p inside React.Fragment', () => {
- const wrapper = shallow(
);
- expect(wrapper.find('.container p')).to.have.lengthOf(0);
- });
+ componentWillUpdate() { spy('componentWillUpdate'); }
- it('finds direct child span inside React.Fragment', () => {
- const wrapper = shallow(
);
- expect(wrapper.find('.container > span')).to.have.lengthOf(4);
- });
+ componentDidUpdate() { spy('componentDidUpdate'); }
- it('handles adjacent sibling selector inside React.Fragment', () => {
- const wrapper = shallow(
);
- expect(wrapper.find('.container span + div')).to.have.lengthOf(1);
- });
+ componentWillUnmount() { spy('componentWillUnmount'); }
- it('handles general sibling selector inside React.Fragment', () => {
- const wrapper = shallow(
);
- expect(wrapper.find('.container div ~ span')).to.have.lengthOf(2);
- });
+ render() {
+ spy('render');
+ return
foo
;
+ }
+ }
- it('handles fragments with no content', () => {
- const EmptyFragmentComponent = () => (
-
-
-
-
- );
- const wrapper = shallow(
);
+ const options = {
+ disableLifecycleMethods: true,
+ context: {
+ foo: 'foo',
+ },
+ };
- expect(wrapper.find('.container > span')).to.have.lengthOf(0);
- expect(wrapper.find('.container span')).to.have.lengthOf(0);
- expect(wrapper.children()).to.have.lengthOf(0);
- });
- });
+ beforeEach(() => {
+ wrapper = shallow(
, options);
+ spy.resetHistory();
+ });
- itIf(is('>= 16'), 'finds portals by name', () => {
- const containerDiv = { nodeType: 1 };
- const Foo = () => (
-
- {createPortal(
-
InPortal
,
- containerDiv,
- )}
-
- );
+ it('does not call componentDidMount when mounting', () => {
+ wrapper = shallow(
, options);
+ expect(spy.args).to.deep.equal([
+ ['componentWillMount'],
+ ['render'],
+ ]);
+ });
- const wrapper = shallow(
);
+ it('calls expected methods when receiving new props', () => {
+ wrapper.setProps({ foo: 'foo' });
+ expect(spy.args).to.deep.equal([
+ ['componentWillReceiveProps'],
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ]);
+ });
- expect(wrapper.find('Portal')).to.have.lengthOf(1);
- });
+ describeIf(is('0.13 || 15 || > 16'), 'setContext', () => {
+ it('calls expected methods when receiving new context', () => {
+ wrapper.setContext({ foo: 'foo' });
+ expect(spy.args).to.deep.equal([
+ ['componentWillReceiveProps'],
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ]);
+ });
+ });
- itIf(is('>= 16'), 'finds elements through portals', () => {
- const containerDiv = { nodeType: 1 };
- const Foo = () => (
-
- {createPortal(
-
-
Successful Portal!
- ,
- containerDiv,
- )}
-
- );
+ describeIf(is('16'), 'setContext', () => {
+ it('calls expected methods when receiving new context', () => {
+ wrapper.setContext({ foo: 'foo' });
+ expect(spy.args).to.deep.equal([
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ]);
+ });
+ });
+ describeIf(is('0.14'), 'setContext', () => {
+ it('calls expected methods when receiving new context', () => {
+ wrapper.setContext({ foo: 'foo' });
+ expect(spy.args).to.deep.equal([
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ]);
+ });
+ });
- const wrapper = shallow(
);
+ itIf(is('< 16'), 'calls expected methods for setState', () => {
+ wrapper.setState({ bar: 'bar' });
+ expect(spy.args).to.deep.equal([
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ['componentDidUpdate'],
+ ]);
+ });
- expect(wrapper.find('h1')).to.have.lengthOf(1);
+ // componentDidUpdate is not called in react 16
+ itIf(is('>= 16'), 'calls expected methods for setState', () => {
+ wrapper.setState({ bar: 'bar' });
+ expect(spy.args).to.deep.equal([
+ ['shouldComponentUpdate'],
+ ['componentWillUpdate'],
+ ['render'],
+ ]);
+ });
- expect(wrapper.find('span')).to.have.lengthOf(1);
- });
+ it('calls expected methods when unmounting', () => {
+ wrapper.unmount();
+ expect(spy.args).to.deep.equal([
+ ['componentWillUnmount'],
+ ]);
+ });
+ });
- describeIf(is('>= 16.3'), 'forwardRef', () => {
- it('finds forwardRefs', () => {
- const Component = forwardRef(() =>
);
+ it('does not call when disableLifecycleMethods flag is true', () => {
+ const spy = sinon.spy();
class Foo extends React.Component {
+ componentDidMount() {
+ spy();
+ }
+
render() {
- return (
-
-
- );
+ return
foo
;
}
}
-
- const wrapper = shallow(
);
- expect(wrapper.find(Component)).to.have.lengthOf(2);
- expect(wrapper.find('ForwardRef')).to.have.lengthOf(2);
+ shallow(
, { disableLifecycleMethods: true });
+ expect(spy).to.have.property('callCount', 0);
});
- it('finds forwardRef by custom display name', () => {
- const Component = forwardRef(() =>
);
- Component.displayName = 'CustomForwardRef';
- class Foo extends React.Component {
+ it('calls `componentDidMount` directly when disableLifecycleMethods is true', () => {
+ class Table extends React.Component {
render() {
- return (
-
-
- );
+ return (
);
}
}
- const wrapper = shallow(
);
- expect(wrapper.find(Component)).to.have.lengthOf(2);
- expect(wrapper.find(Component.displayName)).to.have.lengthOf(2);
- });
- });
-
- describeWithDOM('find DOM elements by constructor', () => {
- const { elements, all } = getData();
-
- elements.filter(({ constructor: C }) => C && C !== all).forEach(({
- tag: Tag,
- constructorName: name,
- }) => {
- class Foo extends React.Component {
- render() {
- return
;
+ class MyComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showTable: false,
+ };
}
- }
- it(`${Tag}: found with \`${name}\``, () => {
- const wrapper = shallow(
);
-
- const rendered = wrapper;
- expect(rendered.type()).to.equal(Tag);
- expect(rendered.is(Tag)).to.equal(true);
- expect(wrapper.filter(Tag)).to.have.lengthOf(1);
- });
- });
- });
-
- describeIf(is('>= 16.6'), 'React.memo', () => {
- it('works with an SFC', () => {
- const InnerComp = () =>
Hello
;
- const InnerFoo = ({ foo }) => (
-
- );
- const Foo = memo(InnerFoo);
-
- const wrapper = shallow(
);
- expect(wrapper.debug()).to.equal(`
`);
- expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
- expect(wrapper.find('.qoo').text()).to.equal('qux');
- });
+ componentDidMount() {
+ this.setState({ showTable: true });
+ }
- it('throws with a class component', () => {
- class InnerComp extends React.Component {
render() {
- return
Hello
;
+ const { showTable } = this.state;
+ return (
);
}
}
+ const wrapper = shallow(
, { disableLifecycleMethods: true });
+ expect(wrapper.find(Table).length).to.equal(0);
+ wrapper.instance().componentDidMount();
+ expect(wrapper.find(Table).length).to.equal(1);
+ });
+ it('calls shouldComponentUpdate when disableLifecycleMethods flag is true', () => {
+ const spy = sinon.spy();
class Foo extends React.Component {
- render() {
- const { foo } = this.props;
- return (
-
- );
+ constructor(props) {
+ super(props);
+ this.state = {
+ foo: 'bar',
+ };
}
- }
- const FooMemo = memo(Foo);
-
- expect(() => shallow(
)).to.throw(TypeError);
- });
- it.skip('works with a class component', () => {
- class InnerComp extends React.Component {
- render() {
- return
Hello
;
+ shouldComponentUpdate() {
+ spy();
+ return false;
}
- }
- class Foo extends React.Component {
render() {
- const { foo } = this.props;
- return (
-
- );
+ return
{this.state.foo}
;
}
}
- const FooMemo = memo(Foo);
-
- const wrapper = shallow(
);
- expect(wrapper.debug()).to.equal(`
`);
- expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
- expect(wrapper.find('.qoo').text()).to.equal('qux');
+ const wrapper = shallow(
+
,
+ {
+ context: { foo: 'foo' },
+ disableLifecycleMethods: true,
+ },
+ );
+ expect(spy).to.have.property('callCount', 0);
+ wrapper.setProps({ foo: 'bar' });
+ expect(spy).to.have.property('callCount', 1);
+ wrapper.setState({ foo: 'bar' });
+ expect(spy).to.have.property('callCount', 2);
+ wrapper.setContext({ foo: 'bar' });
+ expect(spy).to.have.property('callCount', 3);
});
});
- });
-
- describe('.findWhere(predicate)', () => {
- it('returns all elements for a truthy test', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.findWhere(() => true)).to.have.lengthOf(3);
- });
-
- it('returns no elements for a falsy test', () => {
- const wrapper = shallow((
-
-
- ));
- expect(wrapper.findWhere(() => false)).to.have.lengthOf(0);
- });
-
- it('does not pass empty wrappers', () => {
- class EditableText extends React.Component {
- render() {
- return
{''}
;
- }
- }
- const wrapper = shallow(
);
+ describe('lifecycleExperimental option', () => {
+ describe('validation', () => {
+ it('throws for a non-boolean value', () => {
+ ['value', 42, null].forEach((value) => {
+ expect(() => shallow(
, {
+ lifecycleExperimental: value,
+ })).to.throw(/true or false/);
+ });
+ });
- const stub = sinon.stub();
- wrapper.findWhere(stub);
- const passedNodeLengths = stub.getCalls().map(({ args: [firstArg] }) => firstArg.length);
- expect(passedNodeLengths).to.eql([1]);
+ it('does not throw for a boolean value or when not provided', () => {
+ [true, false, undefined].forEach((value) => {
+ expect(() => shallow(
, {
+ lifecycleExperimental: value,
+ })).not.to.throw();
+ });
+ });
+ });
});
- it('calls the predicate with the wrapped node as the first argument', () => {
- const wrapper = shallow((
-
- ));
+ describeIf(is('>= 16.3'), 'getDerivedStateFromProps', () => {
+ let spy;
- const stub = sinon.stub();
- stub.returns(true);
- const spy = sinon.spy(stub);
- wrapper.findWhere(spy);
- expect(spy).to.have.property('callCount', 4);
- expect(spy.args[0][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[2][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[3][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][0].hasClass('bar')).to.equal(true);
- expect(spy.args[2][0].hasClass('baz')).to.equal(true);
- expect(spy.args[3][0].hasClass('bux')).to.equal(true);
- });
+ beforeEach(() => {
+ spy = sinon.spy();
+ });
- it('finds nodes', () => {
- class Foo extends React.Component {
- render() {
- return (
-
-
- );
+ class Spy extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = { state: true }; // eslint-disable-line react/no-unused-state
+ spy('constructor');
}
- }
-
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpan = wrapper.findWhere(n => (
- n.type() === 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundSpan.type()).to.equal('span');
- const foundNotSpan = wrapper.findWhere(n => (
- n.type() !== 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundNotSpan.type()).to.equal('i');
- });
+ shouldComponentUpdate(nextProps, nextState, nextContext) {
+ spy('shouldComponentUpdate', {
+ prevProps: this.props,
+ nextProps,
+ prevState: this.state,
+ nextState,
+ prevContext: this.context,
+ nextContext,
+ });
+ return true;
+ }
- describeIf(is('>= 16.2'), 'with fragments', () => {
- it('finds nodes', () => {
- class FragmentFoo extends React.Component {
- render() {
- return (
-
-
-
-
-
-
- );
- }
+ componentWillUpdate(nextProps, nextState, nextContext) {
+ spy('componentWillUpdate', {
+ prevProps: this.props,
+ nextProps,
+ prevState: this.state,
+ nextState,
+ prevContext: this.context,
+ nextContext,
+ });
}
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpans = wrapper.findWhere(n => (
- n.type() === 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundSpans).to.have.lengthOf(2);
- expect(foundSpans.get(0).type).to.equal('span');
- expect(foundSpans.get(1).type).to.equal('span');
-
- const foundNotSpans = wrapper.findWhere(n => (
- n.type() !== 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundNotSpans).to.have.lengthOf(2);
- expect(foundNotSpans.get(0).type).to.equal('i');
- expect(foundNotSpans.get(1).type).to.equal('i');
- });
- });
+ componentDidUpdate(prevProps, prevState, prevContext) {
+ spy('componentDidUpdate', {
+ prevProps,
+ nextProps: this.props,
+ prevState,
+ nextState: this.state,
+ prevContext,
+ nextContext: this.context,
+ });
+ }
- it('finds nodes when conditionally rendered', () => {
- class Foo extends React.Component {
render() {
- return (
-
-
- );
+ spy('render');
+ return null;
}
}
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpan = wrapper.findWhere(n => (
- n.type() === 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundSpan.type()).to.equal('span');
-
- const foundNotSpan = wrapper.findWhere(n => (
- n.type() !== 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundNotSpan).to.have.lengthOf(0);
- });
-
- it('does not get trapped when conditionally rendering using an empty string variable as the condition', () => {
- const emptyString = '';
-
- class Foo extends React.Component {
- render() {
- return (
-
- );
+ class CWRP extends Spy {
+ componentWillReceiveProps(nextProps, nextContext) {
+ spy('componentWillReceiveProps', {
+ prevProps: this.props,
+ nextProps,
+ prevState: this.state,
+ nextState: this.state,
+ prevContext: this.context,
+ nextContext,
+ });
}
}
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpan = wrapper.findWhere(n => (
- n.type() === 'span'
- && n.props()['data-foo'] === selector
- ));
-
- expect(foundSpan.debug()).to.equal((
- `
- Test
- `
- ));
- });
-
- it('returns props object when props() is called', () => {
- class Foo extends React.Component {
- render() {
- return (
-
Test Component
- );
+ class U_CWRP extends Spy {
+ UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+ spy('UNSAFE_componentWillReceiveProps', {
+ prevProps: this.props,
+ nextProps,
+ prevState: this.state,
+ nextState: this.state,
+ prevContext: this.context,
+ nextContext: undefined,
+ });
}
}
- const content = 'blah';
- const wrapper = shallow(
);
- // TODO: shallow has children, mount does not
- expect(wrapper.props()).to.deep.equal({ 'data-foo': content, children: 'Test Component' });
- });
-
- it('returns shallow rendered string when debug() is called', () => {
- class Foo extends React.Component {
- render() {
- return (
-
Test Component
- );
+ class GDSFP extends Spy {
+ static getDerivedStateFromProps(props, state) {
+ spy('getDerivedStateFromProps', { props, state });
+ return {};
}
}
- const content = 'blah';
- const wrapper = shallow(
);
- expect(wrapper.debug()).to.equal((
- `
- Test Component
-
`
- ));
- });
+ it('calls cWRP when expected', () => {
+ const prevProps = { a: 1 };
+ const wrapper = shallow(
);
+ expect(spy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
+ spy.resetHistory();
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('finds nodes', () => {
- const SFC = function SFC({ selector }) {
- return (
-
-
- );
- };
+ const foo = {};
+ const props = { foo };
+ const {
+ context: prevContext,
+ context: nextContext,
+ state: prevState,
+ state: nextState,
+ } = wrapper.instance();
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpan = wrapper.findWhere(n => (
- n.type() === 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundSpan.type()).to.equal('span');
-
- const foundNotSpan = wrapper.findWhere(n => (
- n.type() !== 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundNotSpan.type()).to.equal('i');
- });
+ wrapper.setProps(props);
+ const nextProps = { ...prevProps, ...props };
- it('finds nodes when conditionally rendered', () => {
- const SFC = function SFC({ selector }) {
- return (
-
-
- );
+ const data = {
+ prevProps,
+ nextProps,
+ prevState,
+ nextState,
+ prevContext,
+ nextContext,
};
-
- const selector = 'blah';
- const wrapper = shallow(
);
- const foundSpan = wrapper.findWhere(n => (
- n.type() === 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundSpan.type()).to.equal('span');
-
- const foundNotSpan = wrapper.findWhere(n => (
- n.type() !== 'span' && n.props()['data-foo'] === selector
- ));
- expect(foundNotSpan).to.have.lengthOf(0);
+ expect(spy.args).to.deep.equal([
+ ['componentWillReceiveProps', data],
+ ['shouldComponentUpdate', data],
+ ['componentWillUpdate', data],
+ ['render'],
+ ['componentDidUpdate', {
+ ...data,
+ prevContext: is('>= 16') ? undefined : prevContext,
+ }],
+ ]);
});
- it('returns props object when props() is called', () => {
- const SFC = function SFC({ data }) {
- return (
-
Test SFC
- );
- };
+ it('calls UNSAFE_cWRP when expected', () => {
+ const prevProps = { a: 1 };
+ // eslint-disable-next-line react/jsx-pascal-case
+ const wrapper = shallow(
);
+ expect(spy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
+ spy.resetHistory();
- const content = 'blah';
- const wrapper = shallow(
);
- // TODO: shallow has children, mount does not
- expect(wrapper.props()).to.deep.equal({ 'data-foo': content, children: 'Test SFC' });
- });
+ const foo = {};
+ const props = { foo };
+ const {
+ context: prevContext,
+ context: nextContext,
+ state: prevState,
+ state: nextState,
+ } = wrapper.instance();
- it('returns shallow rendered string when debug() is called', () => {
- const SFC = function SFC({ data }) {
- return (
-
Test SFC
- );
- };
+ wrapper.setProps(props);
+ const nextProps = { ...prevProps, ...props };
- const content = 'blah';
- const wrapper = shallow(
);
- expect(wrapper.debug()).to.equal((
- `
- Test SFC
-
`
- ));
+ const data = {
+ prevProps,
+ nextProps,
+ prevState,
+ nextState,
+ prevContext,
+ nextContext,
+ };
+ expect(spy.args).to.deep.equal([
+ ['UNSAFE_componentWillReceiveProps', {
+ ...data,
+ nextContext: is('>= 16') ? undefined : nextContext,
+ }],
+ ['shouldComponentUpdate', data],
+ ['componentWillUpdate', data],
+ ['render'],
+ ['componentDidUpdate', {
+ ...data,
+ prevContext: is('>= 16') ? undefined : prevContext,
+ }],
+ ]);
});
- it('works with a nested SFC', () => {
- const Bar = realArrowFunction(
Hello
);
- class Foo extends React.Component {
- render() { return
; }
- }
- const wrapper = shallow(
);
- expect(wrapper.is(Bar)).to.equal(true);
- expect(wrapper.dive().text()).to.equal('Hello');
- });
- });
+ it('calls gDSFP when expected', () => {
+ const prevProps = { a: 1 };
+ const state = { state: true };
+ const wrapper = shallow(
);
+ expect(spy.args).to.deep.equal([
+ ['constructor'],
+ ['getDerivedStateFromProps', {
+ props: prevProps,
+ state,
+ }],
+ ['render'],
+ ]);
+ spy.resetHistory();
- it('allows `.text()` to be called on text nodes', () => {
- const wrapper = shallow((
-
-
- foo bar
- {null}
- {false}
-
- ));
+ const foo = {};
+ const props = { foo };
+ const {
+ context: prevContext,
+ context: nextContext,
+ state: prevState,
+ state: nextState,
+ } = wrapper.instance();
- const stub = sinon.stub();
- wrapper.findWhere(stub);
+ wrapper.setProps(props);
+ const nextProps = { ...prevProps, ...props };
- const passedNodes = stub.getCalls().map(({ args: [firstArg] }) => firstArg);
+ const data = {
+ prevProps,
+ nextProps,
+ prevState,
+ nextState,
+ prevContext,
+ nextContext,
+ };
+ expect(spy.args).to.deep.equal([
+ ['getDerivedStateFromProps', {
+ props: nextProps,
+ state: nextState,
+ }],
+ ['shouldComponentUpdate', data],
+ ['render'],
+ ['componentDidUpdate', {
+ ...data,
+ prevContext: is('>= 16') ? undefined : prevContext,
+ }],
+ ]);
+ });
- const textContents = passedNodes.map(n => [n.debug(), n.text()]);
- const expected = [
- [wrapper.debug(), 'foo bar'], // root
- ['
', ''], // first div
- ['
\n foo bar\n
', 'foo bar'], // second div
- ['foo bar', 'foo bar'], // second div's contents
- ];
- expect(textContents).to.eql(expected);
- });
+ it('cDU’s nextState differs from `this.state` when gDSFP returns new state', () => {
+ class SimpleComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { value: props.value };
+ }
- it('does not pass in null or false nodes', () => {
- const wrapper = shallow((
-
-
- foo bar
- {null}
- {false}
-
- ));
- const stub = sinon.stub();
- wrapper.findWhere(stub);
-
- const passedNodes = stub.getCalls().map(({ args: [firstArg] }) => firstArg);
- const hasElements = passedNodes.map(n => [n.debug(), n.getElement() && true]);
- const expected = [
- [wrapper.debug(), true], // root
- ['
', true], // first div
- ['
\n foo bar\n
', true], // second div
- ['foo bar', null], // second div's contents
- ];
- expect(hasElements).to.eql(expected);
-
- // the root, plus the 2 renderable children, plus the grandchild text
- expect(stub).to.have.property('callCount', 4);
- });
+ static getDerivedStateFromProps(props, state) {
+ return props.value === state.value ? null : { value: props.value };
+ }
- it('does not pass in null or false nodes', () => {
- const wrapper = shallow((
-
- ));
- const stub = sinon.stub();
- stub.returns(true);
- const spy = sinon.spy(stub);
- wrapper.findWhere(spy);
- expect(spy).to.have.property('callCount', 2);
- });
+ shouldComponentUpdate(nextProps, nextState) {
+ return nextState.value !== this.state.value;
+ }
- it('allows `.text()` to be called on text nodes', () => {
- const wrapper = shallow((
-
-
- foo bar
- {null}
- {false}
-
- ));
+ render() {
+ const { value } = this.state;
+ return (
);
+ }
+ }
+ const wrapper = shallow(
);
- const stub = sinon.stub();
- wrapper.findWhere(stub);
+ expect(wrapper.find('input').prop('value')).to.equal('initial');
- const passedNodes = stub.getCalls().map(({ args: [firstArg] }) => firstArg);
+ wrapper.setProps({ value: 'updated' });
- const textContents = passedNodes.map(n => [n.debug(), n.text()]);
- const expected = [
- [wrapper.debug(), 'foo bar'], // root
- ['
', ''], // first div
- ['
\n foo bar\n
', 'foo bar'], // second div
- ['foo bar', 'foo bar'], // second div's contents
- ];
- expect(textContents).to.eql(expected);
+ expect(wrapper.find('input').prop('value')).to.equal('updated');
+ });
});
- itIf(is('>= 16'), 'finds portals by react-is Portal type', () => {
- const containerDiv = { nodeType: 1 };
- const Foo = () => (
-
- {createPortal(
-
InPortal
,
- containerDiv,
- )}
-
- );
-
- const wrapper = shallow(
);
+ describeIf(is('>= 16'), 'componentDidCatch', () => {
+ describe('errors inside an error boundary', () => {
+ const errorToThrow = new EvalError('threw an error!');
- expect(wrapper.findWhere(node => node.type() === Portal)).to.have.lengthOf(1);
- });
- });
+ const hasFragments = is('>= 16.2');
+ const MaybeFragment = hasFragments ? Fragment : 'main';
- describe('.setProps(newProps[, callback)', () => {
- it('throws on a non-function callback', () => {
- class Foo extends React.Component {
- render() {
+ function Thrower({ throws }) {
+ if (throws) {
+ throw errorToThrow;
+ }
return null;
}
- }
- const wrapper = shallow(
);
- expect(() => wrapper.setProps({}, undefined)).to.throw();
- expect(() => wrapper.setProps({}, null)).to.throw();
- expect(() => wrapper.setProps({}, false)).to.throw();
- expect(() => wrapper.setProps({}, true)).to.throw();
- expect(() => wrapper.setProps({}, [])).to.throw();
- expect(() => wrapper.setProps({}, {})).to.throw();
- });
+ class ErrorBoundary extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ throws: false,
+ didThrow: false,
+ };
+ }
- it('sets props for a component multiple times', () => {
- class Foo extends React.Component {
- render() {
- return (
-
- {this.props.foo}
-
- );
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.find('.foo')).to.have.lengthOf(1);
- wrapper.setProps({ id: 'bar', foo: 'bla' });
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
- });
+ componentDidCatch(error, info) {
+ const { spy } = this.props;
+ spy(error, info);
+ this.setState({
+ throws: false,
+ didThrow: true,
+ });
+ }
- describe('merging props', () => {
- it('merges, not replaces, props when rerendering', () => {
- class Foo extends React.Component {
render() {
+ const {
+ didThrow,
+ throws,
+ } = this.state;
return (
-
- {this.props.foo}
+
+
+
+
+ {didThrow ? 'HasThrown' : 'HasNotThrown'}
+
+
+
);
}
}
- const wrapper = shallow(
);
+ describe('Thrower', () => {
+ it('does not throw when `throws` is `false`', () => {
+ expect(() => shallow(
)).not.to.throw();
+ });
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'foo',
- children: 'bar',
- });
- expect(wrapper.instance().props).to.eql({
- id: 'foo',
- foo: 'bar',
+ it('throws when `throws` is `true`', () => {
+ expect(() => shallow(
)).to.throw(errorToThrow);
+ });
});
- wrapper.setProps({ id: 'bar' });
+ it('catches a simulated error', () => {
+ const spy = sinon.spy();
+ const wrapper = shallow(
);
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'bar',
- children: 'bar',
- });
- expect(wrapper.instance().props).to.eql({
- id: 'bar',
- foo: 'bar',
- });
- });
+ expect(spy).to.have.property('callCount', 0);
- itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
- function Foo({ id, foo }) {
- return (
-
- {foo}
-
- );
- }
- const wrapper = shallow(
);
+ expect(() => wrapper.find(Thrower).simulateError(errorToThrow)).not.to.throw();
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'foo',
- children: 'bar',
- });
- if (is('< 16')) {
- expect(wrapper.instance().props).to.eql({
- id: 'foo',
- foo: 'bar',
+ expect(spy).to.have.property('callCount', 1);
+
+ expect(spy.args).to.be.an('array').and.have.lengthOf(1);
+ const [[actualError, info]] = spy.args;
+ expect(() => { throw actualError; }).to.throw(errorToThrow);
+ expect(info).to.deep.equal({
+ componentStack: `
+ in Thrower (created by ErrorBoundary)
+ in span (created by ErrorBoundary)${hasFragments ? '' : `
+ in main (created by ErrorBoundary)`}
+ in div (created by ErrorBoundary)
+ in ErrorBoundary (created by WrapperComponent)
+ in WrapperComponent`,
});
- }
+ });
+
+ it('rerenders on a simulated error', () => {
+ const wrapper = shallow(
);
- wrapper.setProps({ id: 'bar' });
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(0);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(1);
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'bar',
- children: 'bar',
+ expect(() => wrapper.find(Thrower).simulateError(errorToThrow)).not.to.throw();
+
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(1);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(0);
});
- if (is('< 16')) {
- expect(wrapper.instance().props).to.eql({
- id: 'bar',
- foo: 'bar',
- });
- }
- });
- it('merges, not replaces, props when no rerender is needed', () => {
- class Foo extends React.Component {
- shouldComponentUpdate() {
- return false;
- }
+ it('does not catch errors during shallow render', () => {
+ const spy = sinon.spy();
+ const wrapper = shallow(
);
- render() {
- return (
-
- {this.props.foo}
-
- );
- }
- }
- const wrapper = shallow(
);
+ expect(spy).to.have.property('callCount', 0);
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'foo',
- children: 'bar',
- });
- expect(wrapper.instance().props).to.eql({
- id: 'foo',
- foo: 'bar',
- });
+ wrapper.setState({ throws: true });
- wrapper.setProps({ id: 'foo' });
+ expect(spy).to.have.property('callCount', 0);
- expect(wrapper.debug()).to.equal(`
-
- bar
-
- `.trim());
- expect(wrapper.props()).to.eql({
- className: 'foo',
- children: 'bar',
- });
- expect(wrapper.instance().props).to.eql({
- id: 'foo',
- foo: 'bar',
- });
- });
- });
+ const thrower = wrapper.find(Thrower);
+ expect(thrower).to.have.lengthOf(1);
+ expect(thrower.props()).to.have.property('throws', true);
- it('calls componentWillReceiveProps for new renders', () => {
- const stateValue = {};
+ expect(() => thrower.dive()).to.throw(errorToThrow);
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { stateValue };
- }
+ expect(spy).to.have.property('callCount', 0);
- componentWillReceiveProps() {}
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(0);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(1);
+ });
+ });
+ });
- UNSAFE_componentWillReceiveProps() {} // eslint-disable-line camelcase
+ describeIf(is('>= 16.6'), 'getDerivedStateFromError', () => {
+ describe('errors inside an error boundary', () => {
+ const errorToThrow = new EvalError('threw an error!');
- render() {
- const { id } = this.props;
- const { stateValue: val } = this.state;
- return (
-
- {String(val)}
-
- );
+ function Thrower({ throws }) {
+ if (throws) {
+ throw errorToThrow;
+ }
+ return null;
}
- }
- Foo.contextTypes = {
- foo() { return null; },
- };
- const cWRP = sinon.stub(Foo.prototype, 'componentWillReceiveProps');
- // eslint-disable-next-line camelcase
- const U_cWRP = sinon.stub(Foo.prototype, 'UNSAFE_componentWillReceiveProps');
- const nextProps = { id: 'bar', foo: 'bla' };
- const context = { foo: 'bar' };
- const wrapper = shallow(
, { context });
+ function getErrorBoundary() {
+ return class ErrorBoundary extends React.Component {
+ static getDerivedStateFromError() {
+ return {
+ throws: false,
+ didThrow: true,
+ };
+ }
- expect(cWRP).to.have.property('callCount', 0);
- expect(U_cWRP).to.have.property('callCount', 0);
+ constructor(props) {
+ super(props);
+ this.state = {
+ throws: false,
+ didThrow: false,
+ };
+ }
- wrapper.setProps(nextProps);
+ render() {
+ const {
+ didThrow,
+ throws,
+ } = this.state;
- expect(cWRP).to.have.property('callCount', 1);
- expect(cWRP.calledWith(nextProps, context)).to.equal(true);
+ return (
+
+
+
+
+ {didThrow ? 'HasThrown' : 'HasNotThrown'}
+
+
+
+
+ );
+ }
+ };
+ }
- if (is('>= 16.3')) {
- expect(U_cWRP).to.have.property('callCount', 1);
- expect(U_cWRP.calledWith(nextProps, context)).to.equal(true);
- }
- });
+ describe('Thrower', () => {
+ it('does not throw when `throws` is `false`', () => {
+ expect(() => shallow(
)).not.to.throw();
+ });
- it('merges newProps with oldProps', () => {
- class Foo extends React.Component {
- render() {
- return (
-
- );
- }
- }
- class Bar extends React.Component {
- render() {
- return (
-
- );
- }
- }
+ it('throws when `throws` is `true`', () => {
+ expect(() => shallow(
)).to.throw();
+ });
+ });
- const wrapper = shallow(
);
- expect(wrapper.props().a).to.equal('a');
- expect(wrapper.props().b).to.equal('b');
+ it('catches a simulated error', () => {
+ const ErrorBoundary = getErrorBoundary();
- wrapper.setProps({ b: 'c', d: 'e' });
- expect(wrapper.props().a).to.equal('a');
- expect(wrapper.props().b).to.equal('c');
- expect(wrapper.props().d).to.equal('e');
- });
+ const spy = sinon.spy(ErrorBoundary, 'getDerivedStateFromError');
+ const wrapper = shallow(
);
- it('passes in old context', () => {
- class Foo extends React.Component {
- render() {
- return (
-
{this.context.x}
- );
- }
- }
+ expect(spy).to.have.property('callCount', 0);
- Foo.contextTypes = { x: PropTypes.string };
+ expect(() => wrapper.find(Thrower).simulateError(errorToThrow)).not.to.throw();
- const context = { x: 'yolo' };
- const wrapper = shallow(
, { context });
- expect(wrapper.first('div').text()).to.equal('yolo');
+ expect(spy).to.have.property('callCount', 1);
- wrapper.setProps({ x: 5 }); // Just force a re-render
- expect(wrapper.first('div').text()).to.equal('yolo');
- });
+ expect(spy.args).to.be.an('array').and.have.lengthOf(1);
+ const [[actualError]] = spy.args;
+ expect(actualError).to.equal(errorToThrow);
+ });
- it('uses defaultProps if new props includes undefined values', () => {
- const initialState = { a: 42 };
- const context = { b: 7 };
- class Foo extends React.Component {
- constructor(...args) {
- super(...args);
- this.state = initialState;
- }
+ it('rerenders on a simulated error', () => {
+ const ErrorBoundary = getErrorBoundary();
- componentWillReceiveProps() {}
+ const wrapper = shallow(
);
- render() {
- return
;
- }
- }
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(0);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(1);
- const cWRP = sinon.stub(Foo.prototype, 'componentWillReceiveProps');
+ expect(() => wrapper.find(Thrower).simulateError(errorToThrow)).not.to.throw();
- Foo.defaultProps = {
- className: 'default-class',
- };
- Foo.contextTypes = {
- b: PropTypes.number,
- };
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(1);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(0);
+ });
- const wrapper = shallow(
, { context });
+ it('does not catch errors during shallow render', () => {
+ const ErrorBoundary = getErrorBoundary();
- // Set undefined in order to use defaultProps if any
- wrapper.setProps({ className: undefined });
+ const spy = sinon.spy(ErrorBoundary, 'getDerivedStateFromError');
+ const wrapper = shallow(
);
- expect(cWRP).to.have.property('callCount', 1);
- const [args] = cWRP.args;
- expect(args).to.eql([
- { className: Foo.defaultProps.className },
- context,
- ]);
- });
+ expect(spy).to.have.property('callCount', 0);
- it('throws if an exception occurs during render', () => {
- let error;
- class Trainwreck extends React.Component {
- render() {
- const { user } = this.props;
- try {
- return (
-
- {user.name.givenName}
-
- );
- } catch (e) {
- error = e;
- throw e;
- }
- }
- }
+ wrapper.setState({ throws: true });
- const validUser = {
- name: {
- givenName: 'Brian',
- },
- };
+ expect(spy).to.have.property('callCount', 0);
- const wrapper = shallow(
);
+ const thrower = wrapper.find(Thrower);
+ expect(thrower).to.have.lengthOf(1);
+ expect(thrower.props()).to.have.property('throws', true);
- expect(() => wrapper.setProps({ user: { name: {} } })).not.to.throw();
- expect(() => wrapper.setProps({ user: {} })).to.throw(error);
- });
+ expect(() => thrower.dive()).to.throw(errorToThrow);
- it('calls the callback when setProps has completed', () => {
- class Foo extends React.Component {
- render() {
- const { id } = this.props;
- return (
-
- {id}
-
- );
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.find('.foo')).to.have.lengthOf(1);
+ expect(spy).to.have.property('callCount', 0);
- wrapper[sym('__renderer__')].batchedUpdates(() => {
- wrapper.setProps({ id: 'bar', foo: 'bla' }, () => {
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
+ expect(wrapper.find({ children: 'HasThrown' })).to.have.lengthOf(0);
+ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(1);
});
});
- expect(wrapper.find('.foo')).to.have.lengthOf(0);
});
- it('calls componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, and componentDidUpdate with merged newProps', () => {
- const spy = sinon.spy();
-
- class Foo extends React.Component {
- componentWillReceiveProps(nextProps) {
- spy('componentWillReceiveProps', this.props, nextProps);
- }
-
- shouldComponentUpdate(nextProps) {
- spy('shouldComponentUpdate', this.props, nextProps);
- return true;
- }
-
- componentWillUpdate(nextProps) {
- spy('componentWillUpdate', this.props, nextProps);
- }
+ describeIf(is('>= 16.6'), 'getDerivedStateFromError and componentDidCatch combined', () => {
- componentDidUpdate(prevProps) {
- spy('componentDidUpdate', prevProps, this.props);
- }
+ const errorToThrow = new EvalError('threw an error!');
+ const expectedInfo = {
+ componentStack: `
+ in Thrower (created by ErrorBoundary)
+ in div (created by ErrorBoundary)
+ in ErrorBoundary (created by WrapperComponent)
+ in WrapperComponent`,
+ };
- render() {
- return (
-
- );
+ function Thrower({ throws }) {
+ if (throws) {
+ throw errorToThrow;
}
+ return null;
}
- const wrapper = shallow(
);
-
- wrapper.setProps({ b: 'c', d: 'e' });
-
- expect(spy.args).to.deep.equal([
- [
- 'componentWillReceiveProps',
- { a: 'a', b: 'b' },
- { a: 'a', b: 'c', d: 'e' },
- ],
- [
- 'shouldComponentUpdate',
- { a: 'a', b: 'b' },
- { a: 'a', b: 'c', d: 'e' },
- ],
- [
- 'componentWillUpdate',
- { a: 'a', b: 'b' },
- { a: 'a', b: 'c', d: 'e' },
- ],
- [
- 'componentDidUpdate',
- { a: 'a', b: 'b' },
- { a: 'a', b: 'c', d: 'e' },
- ],
- ]);
- });
+ describe('errors inside error boundary when getDerivedStateFromProps returns update', () => {
+ let lifecycleSpy;
+ let stateSpy;
- describe('setProps does not call componentDidUpdate twice', () => {
- it('when setState is called in cWRP', () => {
- class Dummy extends React.Component {
- constructor(...args) {
- super(...args);
+ beforeEach(() => {
+ lifecycleSpy = sinon.spy();
+ stateSpy = sinon.spy();
+ });
- this.state = {
- someState: '',
+ class ErrorBoundary extends React.Component {
+ static getDerivedStateFromError(error) {
+ lifecycleSpy('getDerivedStateFromError', error);
+ return {
+ didThrow: true,
+ throws: false,
};
}
- componentWillReceiveProps({ myProp: someState }) {
- this.setState({ someState });
- }
-
- componentDidUpdate() {}
-
- render() {
- const { myProp } = this.props;
- const { someState } = this.state;
- return (
-
- myProp: {myProp}
- someState: {someState}
-
- );
- }
- }
-
- const spy = sinon.spy(Dummy.prototype, 'componentDidUpdate');
- const wrapper = shallow(
);
- expect(spy).to.have.property('callCount', 0);
- return new Promise((resolve) => {
- wrapper.setProps({ myProp: 'Prop Value' }, resolve);
- }).then(() => {
- expect(spy).to.have.property('callCount', 1);
- });
- });
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('sets props for a component multiple times', () => {
- const Foo = props => (
-
- {props.id}
-
- );
-
- const wrapper = shallow(
);
- expect(wrapper.find('.foo')).to.have.lengthOf(1);
- wrapper.setProps({ id: 'bar', foo: 'bla' });
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
- });
-
- it('merges newProps with oldProps', () => {
- const Foo = props => (
-
- );
- const Bar = () => (
-
- );
-
- const wrapper = shallow(
);
- expect(wrapper.props().a).to.equal('a');
- expect(wrapper.props().b).to.equal('b');
+ constructor(props) {
+ super(props);
+ this.state = {
+ didThrow: false,
+ throws: false,
+ };
- wrapper.setProps({ b: 'c', d: 'e' });
- expect(wrapper.props().a).to.equal('a');
- expect(wrapper.props().b).to.equal('c');
- expect(wrapper.props().d).to.equal('e');
- });
+ lifecycleSpy('constructor');
+ }
- it('passes in old context', () => {
- const Foo = (props, context) => (
-
{context.x}
- );
- Foo.contextTypes = { x: PropTypes.string };
+ componentDidCatch(error, info) {
+ lifecycleSpy('componentDidCatch', error, info);
+ stateSpy({ ...this.state });
+ }
- const context = { x: 'yolo' };
- const wrapper = shallow(
, { context });
- expect(wrapper.first('div').text()).to.equal('yolo');
+ render() {
+ lifecycleSpy('render');
- wrapper.setProps({ x: 5 }); // Just force a re-render
- expect(wrapper.first('div').text()).to.equal('yolo');
- });
+ const {
+ throws,
+ } = this.state;
- it('throws if an exception occurs during render', () => {
- let error;
- const Trainwreck = ({ user }) => {
- try {
return (
- {user.name.givenName}
+
);
- } catch (e) {
- error = e;
- throw e;
}
- };
+ }
- const validUser = {
- name: {
- givenName: 'Brian',
- },
- };
+ it('does not catch errors during shallow render', () => {
+ const wrapper = shallow(
);
- const wrapper = shallow(
);
+ expect(lifecycleSpy).to.have.property('callCount', 2);
+ expect(lifecycleSpy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
- expect(() => wrapper.setProps({ user: { name: {} } })).not.to.throw();
- expect(() => wrapper.setProps({ user: {} })).to.throw(error);
- });
- });
- });
+ expect(stateSpy).to.have.property('callCount', 0);
- describe('.setContext(newContext)', () => {
- const SimpleComponent = createClass({
- contextTypes: {
- name: PropTypes.string,
- },
- render() {
- return
{this.context.name}
;
- },
- });
+ lifecycleSpy.resetHistory();
- it('sets context for a component multiple times', () => {
- const context = { name: 'foo' };
- const wrapper = shallow(
, { context });
- expect(wrapper.text()).to.equal('foo');
- wrapper.setContext({ name: 'bar' });
- expect(wrapper.text()).to.equal('bar');
- wrapper.setContext({ name: 'baz' });
- expect(wrapper.text()).to.equal('baz');
- });
+ wrapper.setState({ throws: true });
- it('throws if it is called when shallow didn’t include context', () => {
- const wrapper = shallow(
);
- expect(() => wrapper.setContext({ name: 'bar' })).to.throw(
- Error,
- 'ShallowWrapper::setContext() can only be called on a wrapper that was originally passed a context option', // eslint-disable-line max-len
- );
- });
+ const thrower = wrapper.find(Thrower);
+ expect(thrower).to.have.lengthOf(1);
+ expect(thrower.props()).to.have.property('throws', true);
- describeIf(is('> 0.13'), 'stateless functional components', () => {
- const SFC = (props, context) => (
-
{context.name}
- );
- SFC.contextTypes = { name: PropTypes.string };
+ expect(() => thrower.dive()).to.throw(errorToThrow);
- it('sets context for a component multiple times', () => {
- const context = { name: 'foo' };
- const wrapper = shallow(
, { context });
- expect(wrapper.text()).to.equal('foo');
- wrapper.setContext({ name: 'bar' });
- expect(wrapper.text()).to.equal('bar');
- wrapper.setContext({ name: 'baz' });
- expect(wrapper.text()).to.equal('baz');
- });
+ expect(lifecycleSpy).to.have.property('callCount', 1);
+ expect(lifecycleSpy.args).to.deep.equal([
+ ['render'],
+ ]);
+ });
- it('throws if it is called when shallow didn’t include context', () => {
- const wrapper = shallow(
);
- expect(() => wrapper.setContext({ name: 'bar' })).to.throw(
- Error,
- 'ShallowWrapper::setContext() can only be called on a wrapper that was originally passed a context option', // eslint-disable-line max-len
- );
- });
- });
- });
+ it('calls getDerivedStateFromError first and then componentDidCatch for simulated error', () => {
+ const wrapper = shallow(
);
- describe('.simulate(eventName, data)', () => {
- it('simulates events', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { count: 0 };
- this.incrementCount = this.incrementCount.bind(this);
- }
+ expect(lifecycleSpy).to.have.property('callCount', 2);
+ expect(lifecycleSpy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
- incrementCount() {
- this.setState({ count: this.state.count + 1 });
- }
+ expect(stateSpy).to.have.property('callCount', 0);
- render() {
- return (
-
- foo
-
- );
- }
- }
+ lifecycleSpy.resetHistory();
- const wrapper = shallow(
);
+ expect(() => wrapper.find(Thrower).simulateError(errorToThrow)).not.to.throw();
- expect(wrapper.find('.clicks-0')).to.have.lengthOf(1);
- wrapper.simulate('click');
- expect(wrapper.find('.clicks-1')).to.have.lengthOf(1);
- });
+ expect(lifecycleSpy).to.have.property('callCount', 3);
+ expect(lifecycleSpy.args).to.deep.equal([
+ ['getDerivedStateFromError', errorToThrow],
+ ['render'],
+ ['componentDidCatch', errorToThrow, expectedInfo],
+ ]);
+ expect(stateSpy).to.have.property('callCount', 1);
+ expect(stateSpy.args).to.deep.equal([
+ [{
+ throws: false,
+ didThrow: true,
+ }],
+ ]);
+ });
+ });
- it('passes in event data', () => {
- const spy = sinon.spy();
- class Foo extends React.Component {
- render() {
- return (
-
foo
- );
- }
- }
+ describe('errors inside error boundary when getDerivedStateFromError does not return update', () => {
+ let spy;
- const wrapper = shallow(
);
- const a = {};
- const b = {};
+ beforeEach(() => {
+ spy = sinon.spy();
+ });
- wrapper.simulate('click', a, b);
- expect(spy.args[0][0]).to.equal(a);
- expect(spy.args[0][1]).to.equal(b);
- });
+ class ErrorBoundary extends React.Component {
+ static getDerivedStateFromError(error) {
+ spy('getDerivedStateFromError', error);
+ return null;
+ }
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('simulates events', () => {
- const spy = sinon.spy();
- const Foo = props => (
-
foo
- );
+ constructor(props) {
+ super(props);
+ this.state = {
+ didThrow: false,
+ throws: false,
+ };
- const wrapper = shallow(
);
+ spy('constructor');
+ }
- expect(spy).to.have.property('callCount', 0);
- wrapper.find('a').simulate('click');
- expect(spy).to.have.property('callCount', 1);
- });
+ componentDidCatch(error, info) {
+ spy('componentDidCatch', error, info);
- it('passes in event data', () => {
- const spy = sinon.spy();
- const Foo = () => (
-
foo
- );
+ this.setState({
+ didThrow: true,
+ throws: false,
+ });
+ }
- const wrapper = shallow(
);
- const a = {};
- const b = {};
+ render() {
+ spy('render');
- wrapper.simulate('click', a, b);
- expect(spy.args[0][0]).to.equal(a);
- expect(spy.args[0][1]).to.equal(b);
- });
- });
+ const {
+ didThrow,
+ throws,
+ } = this.state;
- describe('Normalizing JS event names', () => {
- it('converts lowercase events to React camelcase', () => {
- const spy = sinon.spy();
- const clickSpy = sinon.spy();
- class Foo extends React.Component {
- render() {
return (
-
foo
+
+
+
+ {didThrow ? 'HasThrown' : 'HasNotThrown'}
+
+
);
}
}
- const wrapper = shallow(
);
-
- wrapper.simulate('dblclick');
- expect(spy).to.have.property('callCount', 1);
-
- wrapper.simulate('click');
- expect(clickSpy).to.have.property('callCount', 1);
- });
+ it('does not catch errors during shallow render', () => {
+ const wrapper = shallow(
);
- describeIf(is('> 0.13'), 'normalizing mouseenter', () => {
- it('converts lowercase events to React camelcase', () => {
- const spy = sinon.spy();
- class Foo extends React.Component {
- render() {
- return (
-
foo
- );
- }
- }
+ expect(spy).to.have.property('callCount', 2);
+ expect(spy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
- const wrapper = shallow(
);
+ spy.resetHistory();
- wrapper.simulate('mouseenter');
- expect(spy).to.have.property('callCount', 1);
- });
+ wrapper.setState({ throws: true });
- it('converts lowercase events to React camelcase in SFCs', () => {
- const spy = sinon.spy();
- const Foo = () => (
-
foo
- );
+ const thrower = wrapper.find(Thrower);
+ expect(thrower).to.have.lengthOf(1);
+ expect(thrower.props()).to.have.property('throws', true);
- const wrapper = shallow(
);
+ expect(() => thrower.dive()).to.throw(errorToThrow);
- wrapper.simulate('mouseenter');
expect(spy).to.have.property('callCount', 1);
+ expect(spy.args).to.deep.equal([
+ ['render'],
+ ]);
});
- });
- describeIf(is('>= 15'), 'animation events', () => {
- it('converts lowercase events to React camelcase', () => {
- const spy = sinon.spy();
- class Foo extends React.Component {
- render() {
- return (
-
foo
- );
- }
- }
+ it('rerenders on a simulated error', () => {
+ const wrapper = shallow(
);
- const wrapper = shallow(
);
+ expect(spy).to.have.property('callCount', 2);
+ expect(spy.args).to.deep.equal([
+ ['constructor'],
+ ['render'],
+ ]);
- wrapper.simulate('animationiteration');
- expect(spy).to.have.property('callCount', 1);
- });
+ spy.resetHistory();
- it('converts lowercase events to React camelcase in stateless components', () => {
- const spy = sinon.spy();
- const Foo = () => (
-
foo
- );
+ const thrower = wrapper.find(Thrower);
- const wrapper = shallow(
);
+ expect(() => thrower.simulateError(errorToThrow)).not.to.throw(errorToThrow);
- wrapper.simulate('animationiteration');
- expect(spy).to.have.property('callCount', 1);
+ expect(spy).to.have.property('callCount', 3);
+ expect(spy.args).to.deep.equal([
+ ['getDerivedStateFromError', errorToThrow],
+ ['componentDidCatch', errorToThrow, expectedInfo],
+ ['render'],
+ ]);
});
});
+ });
- describeIf(is('>= 16.4'), 'pointer events', () => {
- it('converts lowercase events to React camelcase', () => {
- const spy = sinon.spy();
- class Foo extends React.Component {
- render() {
- return (
-
foo
- );
- }
+ context('mounting phase', () => {
+ it('calls componentWillMount and componentDidMount', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ componentWillMount() {
+ spy('componentWillMount');
}
- const wrapper = shallow(
);
+ componentDidMount() {
+ spy('componentDidMount');
+ }
- wrapper.simulate('gotpointercapture');
- expect(spy).to.have.property('callCount', 1);
- });
+ render() {
+ spy('render');
+ return
foo
;
+ }
+ }
+ shallow(
);
+ expect(spy.args).to.deep.equal([
+ ['componentWillMount'],
+ ['render'],
+ ['componentDidMount'],
+ ]);
+ });
- it('converts lowercase events to React camelcase in stateless components', () => {
- const spy = sinon.spy();
- const Foo = () => (
-
foo
- );
+ itIf(BATCHING, 'is batching updates', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ count: 0,
+ };
+ }
- const wrapper = shallow(
);
+ componentWillMount() {
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
+ }
- wrapper.simulate('gotpointercapture');
- expect(spy).to.have.property('callCount', 1);
- });
+ componentDidMount() {
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
+ }
+
+ render() {
+ spy();
+ return
{this.state.count}
;
+ }
+ }
+ const result = shallow(
);
+ expect(result.state('count')).to.equal(2);
+ expect(spy).to.have.property('callCount', 2);
});
});
- itIf(BATCHING, 'has batched updates', () => {
- let renderCount = 0;
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- count: 0,
- };
- this.onClick = this.onClick.bind(this);
- }
+ context('updating props', () => {
+ it('calls shouldComponentUpdate, componentWillUpdate, and componentDidUpdate', () => {
+ const spy = sinon.spy();
- onClick() {
- this.setState({ count: this.state.count + 1 });
- this.setState({ count: this.state.count + 1 });
- }
+ class Foo extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ foo: 'state',
+ };
+ }
- render() {
- renderCount += 1;
- return (
-
{this.state.count}
- );
- }
- }
+ componentWillReceiveProps(nextProps, nextContext) {
+ spy('componentWillReceiveProps', this.props, nextProps, nextContext);
+ }
- const wrapper = shallow(
);
- wrapper.simulate('click');
- expect(wrapper.text()).to.equal('1');
- expect(renderCount).to.equal(2);
- });
+ shouldComponentUpdate(nextProps, nextState, nextContext) {
+ spy('shouldComponentUpdate', this.props, nextProps, this.state, nextState, nextContext);
+ return true;
+ }
- it('chains', () => {
- const wrapper = shallow(
);
- expect(wrapper.simulate('click')).to.equal(wrapper);
- });
+ componentWillUpdate(nextProps, nextState, nextContext) {
+ spy('componentWillUpdate', this.props, nextProps, this.state, nextState, nextContext);
+ }
- describe('works with .parent()/.parents()/.closest()', () => {
- function getWrapper() {
- const onClick = sinon.stub();
- const wrapper = shallow((
-
-
- click me
-
-
- ));
- return { wrapper, onClick };
- }
+ componentDidUpdate(prevProps, prevState, prevContext) {
+ spy('componentDidUpdate', prevProps, this.props, prevState, this.state, prevContext);
+ }
- it.skip('child should fire onClick', () => {
- const { wrapper, onClick } = getWrapper();
+ render() {
+ spy('render');
+ return
{this.state.foo}
;
+ }
+ }
+ Foo.contextTypes = {
+ foo: PropTypes.string,
+ };
- wrapper.find('.child-elem').simulate('click');
- expect(onClick).to.have.property('callCount', 1);
+ const wrapper = shallow(
+
,
+ {
+ context: { foo: 'context' },
+ },
+ );
+ wrapper.setProps({ foo: 'baz' });
+ wrapper.setProps({ foo: 'bax' });
+ expect(spy.args).to.deep.equal([
+ [
+ 'render',
+ ],
+ [
+ 'componentWillReceiveProps',
+ { foo: 'bar' }, { foo: 'baz' },
+ { foo: 'context' }, // this will be fixed
+ ],
+ [
+ 'shouldComponentUpdate',
+ { foo: 'bar' }, { foo: 'baz' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'context' },
+ ],
+ [
+ 'componentWillUpdate',
+ { foo: 'bar' }, { foo: 'baz' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'context' },
+ ],
+ [
+ 'render',
+ ],
+ [
+ 'componentDidUpdate',
+ { foo: 'bar' }, { foo: 'baz' },
+ { foo: 'state' }, { foo: 'state' },
+ is('>= 16') ? undefined : { foo: 'context' },
+ ],
+ [
+ 'componentWillReceiveProps',
+ { foo: 'baz' }, { foo: 'bax' },
+ { foo: 'context' },
+ ],
+ [
+ 'shouldComponentUpdate',
+ { foo: 'baz' }, { foo: 'bax' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'context' },
+ ],
+ [
+ 'componentWillUpdate',
+ { foo: 'baz' }, { foo: 'bax' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'context' },
+ ],
+ [
+ 'render',
+ ],
+ [
+ 'componentDidUpdate',
+ { foo: 'baz' }, { foo: 'bax' },
+ { foo: 'state' }, { foo: 'state' },
+ is('>= 16') ? undefined : { foo: 'context' },
+ ],
+ ]);
});
- it('parents should fire onClick', () => {
- const { wrapper, onClick } = getWrapper();
+ it('calls componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate and componentDidUpdate with merged props', () => {
+ const spy = sinon.spy();
- wrapper.find('.child-elem').parents('.parent-elem').simulate('click');
- expect(onClick).to.have.property('callCount', 1);
- });
+ class Foo extends React.Component {
+ componentWillReceiveProps(nextProps) {
+ spy('componentWillReceiveProps', this.props, nextProps);
+ }
- it('closest should fire onClick', () => {
- const { wrapper, onClick } = getWrapper();
+ shouldComponentUpdate(nextProps) {
+ spy('shouldComponentUpdate', this.props, nextProps);
+ return true;
+ }
- wrapper.find('.child-elem').closest('.parent-elem').simulate('click');
- expect(onClick).to.have.property('callCount', 1);
- });
+ componentWillUpdate(nextProps) {
+ spy('componentWillUpdate', this.props, nextProps);
+ }
- it('parent should fire onClick', () => {
- const { wrapper, onClick } = getWrapper();
+ componentDidUpdate(prevProps) {
+ spy('componentDidUpdate', prevProps, this.props);
+ }
- wrapper.find('.child-elem').parent().simulate('click');
- expect(onClick).to.have.property('callCount', 1);
- });
- });
- });
+ render() {
+ return (
+
+ );
+ }
+ }
- describe('.simulateError(error)', () => {
- class Div extends React.Component {
- render() {
- return
{this.props.children}
;
- }
- }
+ const wrapper = shallow(
);
- class Spans extends React.Component {
- render() {
- return
;
- }
- }
+ wrapper.setProps({ b: 'c', d: 'e' });
- class Nested extends React.Component {
- render() {
- return
;
- }
- }
+ expect(spy.args).to.deep.equal([
+ [
+ 'componentWillReceiveProps',
+ { a: 'a', b: 'b' },
+ { a: 'a', b: 'c', d: 'e' },
+ ],
+ [
+ 'shouldComponentUpdate',
+ { a: 'a', b: 'b' },
+ { a: 'a', b: 'c', d: 'e' },
+ ],
+ [
+ 'componentWillUpdate',
+ { a: 'a', b: 'b' },
+ { a: 'a', b: 'c', d: 'e' },
+ ],
+ [
+ 'componentDidUpdate',
+ { a: 'a', b: 'b' },
+ { a: 'a', b: 'c', d: 'e' },
+ ],
+ ]);
+ });
- it('throws on host elements', () => {
- const wrapper = shallow(
);
- expect(wrapper.is('div')).to.equal(true);
- expect(() => wrapper.simulateError()).to.throw();
- });
+ it('cancels rendering when Component returns false in shouldComponentUpdate', () => {
+ const spy = sinon.spy();
- it('throws on "not one" node', () => {
- const wrapper = shallow(
);
+ class Foo extends React.Component {
+ componentWillReceiveProps() {
+ spy('componentWillReceiveProps');
+ }
- const spans = wrapper.find('span');
- expect(spans).to.have.lengthOf(2);
- expect(() => spans.simulateError()).to.throw();
+ shouldComponentUpdate() {
+ spy('shouldComponentUpdate');
+ return false;
+ }
- const navs = wrapper.find('nav');
- expect(navs).to.have.lengthOf(0);
- expect(() => navs.simulateError()).to.throw();
- });
+ componentWillUpdate() {
+ spy('componentWillUpdate');
+ }
- it('throws when the renderer lacks `simulateError`', () => {
- const wrapper = shallow(
);
- delete wrapper[sym('__renderer__')].simulateError;
- expect(() => wrapper.simulateError()).to.throw();
- try {
- wrapper.simulateError();
- } catch (e) {
- expect(e).not.to.equal(undefined);
- }
- });
+ componentDidUpdate() {
+ spy('componentDidUpdate');
+ }
- it('calls through to renderer’s `simulateError`', () => {
- const wrapper = shallow(
);
- const stub = sinon.stub().callsFake((_, __, e) => { throw e; });
- wrapper[sym('__renderer__')].simulateError = stub;
- const error = new Error('hi');
- expect(() => wrapper.simulateError(error)).to.throw(error);
- expect(stub).to.have.property('callCount', 1);
-
- const [args] = stub.args;
- expect(args).to.have.lengthOf(3);
- const [hierarchy, rootNode, actualError] = args;
- expect(actualError).to.equal(error);
- expect(rootNode).to.eql(wrapper[sym('__root__')].getNodeInternal());
- expect(hierarchy).to.have.lengthOf(1);
- const [node] = hierarchy;
- expect(node).to.contain.keys({
- type: Div,
- nodeType: 'class',
- rendered: {
- type: Spans,
- nodeType: 'class',
- rendered: null,
- },
- });
- });
-
- it('returns the wrapper', () => {
- const wrapper = shallow(
);
- wrapper[sym('__renderer__')].simulateError = sinon.stub();
- expect(wrapper.simulateError()).to.equal(wrapper);
- });
- });
-
- describe('.setState(newState[, callback])', () => {
- it('throws on a non-function callback', () => {
- class Foo extends React.Component {
- render() {
- return null;
- }
- }
- const wrapper = shallow(
);
-
- expect(() => wrapper.setState({}, undefined)).to.throw();
- expect(() => wrapper.setState({}, null)).to.throw();
- expect(() => wrapper.setState({}, false)).to.throw();
- expect(() => wrapper.setState({}, true)).to.throw();
- expect(() => wrapper.setState({}, [])).to.throw();
- expect(() => wrapper.setState({}, {})).to.throw();
- });
-
- it('sets the state of the root node', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { id: 'foo' };
- }
-
- render() {
- return (
-
- );
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.find('.foo')).to.have.lengthOf(1);
- wrapper.setState({ id: 'bar' });
- expect(wrapper.find('.bar')).to.have.lengthOf(1);
- });
-
- it('allows setState inside of componentDidMount', () => {
- class MySharona extends React.Component {
- constructor(props) {
- super(props);
- this.state = { mounted: false };
- }
-
- componentDidMount() {
- this.setState({ mounted: true });
- }
-
- render() {
- return
{this.state.mounted ? 'a' : 'b'}
;
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.find('div').text()).to.equal('a');
- });
-
- it('calls the callback when setState has completed', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { id: 'foo' };
+ render() {
+ spy('render');
+ return
foo
;
+ }
}
- render() {
- return (
-
- );
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.state()).to.eql({ id: 'foo' });
- return new Promise((resolve) => {
- wrapper.setState({ id: 'bar' }, function callback(...args) {
- expect(wrapper.state()).to.eql({ id: 'bar' });
- expect(this).to.equal(wrapper.instance());
- expect(this.state).to.eql({ id: 'bar' });
- expect(wrapper.find('div').prop('className')).to.equal('bar');
- expect(args).to.eql(CALLING_SETSTATE_CALLBACK_WITH_UNDEFINED ? [undefined] : []);
- resolve();
- });
+ const wrapper = shallow(
);
+ expect(wrapper.instance().props.foo).to.equal('bar');
+ wrapper.setProps({ foo: 'baz' });
+ expect(wrapper.instance().props.foo).to.equal('baz');
+ wrapper.setProps({ foo: 'bax' });
+ expect(wrapper.instance().props.foo).to.equal('bax');
+ expect(spy.args).to.deep.equal([
+ ['render'],
+ ['componentWillReceiveProps'],
+ ['shouldComponentUpdate'],
+ ['componentWillReceiveProps'],
+ ['shouldComponentUpdate'],
+ ]);
});
- });
-
- it('prevents the update if nextState is null or undefined', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { id: 'foo' };
- }
-
- componentDidUpdate() {}
-
- render() {
- return (
-
- );
- }
- }
-
- const wrapper = shallow(
);
- const spy = sinon.spy(wrapper.instance(), 'componentDidUpdate');
- const callback = sinon.spy();
- wrapper.setState(() => ({ id: 'bar' }), callback);
- expect(spy).to.have.property('callCount', 1);
- expect(callback).to.have.property('callCount', 1);
-
- wrapper.setState(() => null, callback);
- expect(spy).to.have.property('callCount', is('>= 16') ? 1 : 2);
- expect(callback).to.have.property('callCount', 2);
-
- wrapper.setState(() => undefined, callback);
- expect(spy).to.have.property('callCount', is('>= 16') ? 1 : 3);
- expect(callback).to.have.property('callCount', 3);
- });
-
- itIf(is('>= 16'), 'prevents an infinite loop if nextState is null or undefined from setState in CDU', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { id: 'foo' };
- }
- componentDidUpdate() {}
-
- render() {
- return (
-
- );
- }
- }
-
- let payload;
- const stub = sinon.stub(Foo.prototype, 'componentDidUpdate')
- .callsFake(function componentDidUpdate() { this.setState(() => payload); });
-
- const wrapper = shallow(
);
-
- wrapper.setState(() => ({ id: 'bar' }));
- expect(stub).to.have.property('callCount', 1);
-
- payload = null;
- wrapper.setState(() => ({ id: 'bar' }));
- expect(stub).to.have.property('callCount', 2);
- });
-
- describe('does not call componentWillReceiveProps after setState is called', () => {
- it('does not call componentWillReceiveProps upon rerender', () => {
- class A extends React.Component {
+ itIf(BATCHING, 'does not provoke another renders to call setState in componentWillReceiveProps', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
constructor(props) {
super(props);
-
- this.state = { a: 0 };
+ this.state = {
+ count: 0,
+ };
}
componentWillReceiveProps() {
- this.setState({ a: 1 });
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
}
render() {
- return (
{this.state.a}
);
+ spy();
+ return
{this.props.foo}
;
}
}
- const spy = sinon.spy(A.prototype, 'componentWillReceiveProps');
-
- const wrapper = shallow(
, { disableLifecycleMethods: true });
-
- wrapper.setState({ a: 2 });
- expect(wrapper.state('a')).to.equal(2);
-
- expect(spy).to.have.property('callCount', 0);
- wrapper.setProps({});
+ const result = shallow(
);
expect(spy).to.have.property('callCount', 1);
- expect(wrapper.state('a')).to.equal(1);
-
- return new Promise((resolve) => {
- wrapper.setState({ a: 3 }, resolve);
- }).then(() => {
- expect(spy).to.have.property('callCount', 1);
- expect(wrapper.state('a')).to.equal(3);
- });
+ result.setProps({ name: 'bar' });
+ expect(spy).to.have.property('callCount', 2);
+ expect(result.state('count')).to.equal(1);
});
- it('does not call componentWillReceiveProps with multiple keys in props', () => {
- class B extends React.Component {
+ itIf(BATCHING, 'provokes an another render to call setState twice in componentWillUpdate', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
constructor(props) {
super(props);
- this.state = { a: 0, b: 1 };
+ this.updated = false;
+ this.state = {
+ count: 0,
+ };
}
- componentWillReceiveProps() {
- this.setState({ b: 0, a: 1 });
+ componentWillUpdate() {
+ if (!this.updated) {
+ this.updated = true;
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
+ }
}
render() {
- return (
-
- {this.state.a + this.state.b}
-
- );
+ spy();
+ return
{this.props.foo}
;
}
}
- const spy = sinon.spy(B.prototype, 'componentWillReceiveProps');
-
- const wrapper = shallow(
, { disableLifecycleMethods: true });
-
- wrapper.setState({ a: 2 });
- expect(wrapper.state('a')).to.equal(2);
- expect(wrapper.state('b')).to.equal(1);
-
- expect(spy).to.have.property('callCount', 0);
- wrapper.setProps({});
+ const result = shallow(
);
expect(spy).to.have.property('callCount', 1);
- expect(wrapper.state('a')).to.equal(1);
-
- return Promise.all([
- new Promise((resolve) => { wrapper.setState({ b: 5 }, resolve); }),
- new Promise((resolve) => { wrapper.setState({ a: 10 }, resolve); }),
- ]).then(() => {
- expect(spy).to.have.property('callCount', 1);
- expect(wrapper.state('b')).to.equal(5);
- expect(wrapper.state('a')).to.equal(10);
- });
- });
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('throws when trying to access state', () => {
- const Foo = () => (
-
abc
- );
-
- const wrapper = shallow(
);
-
- expect(() => wrapper.state()).to.throw(
- Error,
- 'ShallowWrapper::state() can only be called on class components',
- );
+ result.setProps({ name: 'bar' });
+ expect(spy).to.have.property('callCount', 3);
+ expect(result.state('count')).to.equal(1);
});
- it('throws when trying to set state', () => {
- const Foo = () => (
-
abc
- );
+ itIf(BATCHING, 'provokes an another render to call setState twice in componentDidUpdate', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.updated = false;
+ this.state = {
+ count: 0,
+ };
+ }
- const wrapper = shallow(
);
+ componentDidUpdate() {
+ if (!this.updated) {
+ this.updated = true;
+ /* eslint-disable react/no-did-update-set-state */
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
+ /* eslint-enable react/no-did-update-set-state */
+ }
+ }
- expect(() => wrapper.setState({ a: 1 })).to.throw(
- Error,
- 'ShallowWrapper::setState() can only be called on class components',
- );
+ render() {
+ spy();
+ return
{this.props.foo}
;
+ }
+ }
+ const result = shallow(
);
+ expect(spy).to.have.property('callCount', 1);
+ result.setProps({ name: 'bar' });
+ expect(spy).to.have.property('callCount', 3);
+ expect(result.state('count')).to.equal(1);
});
});
- it('throws an error when cb is not a function', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.state = { id: 'foo' };
- }
-
- setBadState() {
- this.setState({}, 1);
- }
+ context('updating state', () => {
+ it('calls shouldComponentUpdate, componentWillUpdate and componentDidUpdate', () => {
+ const spy = sinon.spy();
- render() {
- return (
-
- );
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.state()).to.eql({ id: 'foo' });
- expect(() => wrapper.setState({ id: 'bar' }, 1)).to.throw(Error);
- expect(() => wrapper.instance().setBadState()).to.throw(Error);
- });
+ class Foo extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = {
+ foo: 'bar',
+ };
+ }
- it('does not throw with a null/undefined callback', () => {
- class Foo extends React.Component {
- constructor() {
- super();
+ shouldComponentUpdate(nextProps, nextState, nextContext) {
+ spy('shouldComponentUpdate', this.props, nextProps, this.state, nextState, nextContext);
+ return true;
+ }
- this.state = {};
- }
+ componentWillUpdate(nextProps, nextState, nextContext) {
+ spy('componentWillUpdate', this.props, nextProps, this.state, nextState, nextContext);
+ }
- setStateWithNullishCallback() {
- this.setState({}, null);
- this.setState({}, undefined);
- }
+ componentDidUpdate(prevProps, prevState, prevContext) {
+ spy('componentDidUpdate', prevProps, this.props, prevState, this.state, prevContext);
+ }
- render() {
- return null;
+ render() {
+ spy('render');
+ return
{this.state.foo}
;
+ }
}
- }
+ Foo.contextTypes = {
+ foo: PropTypes.string,
+ };
- const wrapper = shallow(
);
- expect(() => wrapper.instance().setStateWithNullishCallback()).not.to.throw();
- });
-
- it('preserves the receiver', () => {
- class Comp extends React.Component {
- constructor(...args) {
- super(...args);
-
- this.state = {
- key: '',
- };
-
- this.instanceFunction = () => this.setState(() => ({ key: 'value' }));
- }
-
- componentDidMount() {
- this.instanceFunction();
- }
-
- render() {
- const { key } = this.state;
- return key ? null : null;
- }
- }
-
- expect(shallow(
).debug()).to.equal('');
- });
-
- describe('child components', () => {
- class Child extends React.Component {
- constructor(...args) {
- super(...args);
- this.state = { state: 'a' };
- }
-
- render() {
- const { prop } = this.props;
- const { state } = this.state;
- return (
-
- {prop} - {state}
-
- );
- }
- }
-
- class Parent extends React.Component {
- constructor(...args) {
- super(...args);
- this.state = { childProp: 1 };
- }
-
- render() {
- const { childProp } = this.state;
- return
;
- }
- }
-
- it('sets the state of a stateful root', () => {
- const wrapper = shallow(
);
-
- expect(wrapper.debug()).to.equal('
');
-
- return new Promise((resolve) => {
- wrapper.setState({ childProp: 2 }, () => {
- expect(wrapper.debug()).to.equal('
');
- resolve();
- });
- });
- });
-
- it('can not set the state of the stateful child of a stateful root', () => {
- const wrapper = shallow(
);
-
- expect(wrapper.debug()).to.equal('
');
-
- const child = wrapper.find(Child);
- expect(() => child.setState({ state: 'b' })).to.throw(
- Error,
- 'ShallowWrapper::setState() can only be called on the root',
- );
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- function SFC(props) {
- return
;
- }
-
- it('can not set the state of the stateful child of a stateless root', () => {
- const wrapper = shallow(
);
-
- expect(wrapper.text().trim()).to.equal('
');
-
- const child = wrapper.find(Child);
- expect(() => child.setState({ state: 'b' })).to.throw(
- Error,
- 'ShallowWrapper::setState() can only be called on the root',
- );
- });
- });
- });
- });
-
- describe('.is(selector)', () => {
- it('returns true when selector matches current element', () => {
- const wrapper = shallow(
);
- expect(wrapper.is('.foo')).to.equal(true);
- });
-
- it('allows for compound selectors', () => {
- const wrapper = shallow(
);
- expect(wrapper.is('.foo.bar')).to.equal(true);
- });
-
- it('ignores insignificant whitespace', () => {
- const className = `foo
- `;
- const wrapper = shallow(
);
- expect(wrapper.is('.foo')).to.equal(true);
- });
-
- it('handles all significant whitespace', () => {
- const className = `foo
-
- bar
- baz`;
- const wrapper = shallow(
);
- expect(wrapper.is('.foo.bar.baz')).to.equal(true);
- });
-
- it('returns false when selector does not match', () => {
- const wrapper = shallow(
);
- expect(wrapper.is('.foo')).to.equal(false);
- });
- });
-
- describe('.isEmptyRender()', () => {
- const emptyRenderValues = generateEmptyRenderData();
-
- itWithData(emptyRenderValues, 'when a React class component returns: ', (data) => {
- const Foo = createClass({
- render() {
- return data.value;
- },
- });
- const wrapper = shallow(
);
- expect(wrapper.isEmptyRender()).to.equal(data.expectResponse);
- });
-
- itWithData(emptyRenderValues, 'when an ES2015 class component returns: ', (data) => {
- class Foo extends React.Component {
- render() {
- return data.value;
- }
- }
- const wrapper = shallow(
);
- expect(wrapper.isEmptyRender()).to.equal(data.expectResponse);
- });
-
- describe('nested nodes', () => {
- class RenderChildren extends React.Component {
- render() {
- return this.props.children;
- }
- }
-
- class RenderNull extends React.Component {
- render() {
- return null;
- }
- }
-
- it('returns false for nested elements that return null', () => {
- const wrapper = shallow((
-
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- it('returns false for multiple nested elements that all return null', () => {
- const wrapper = shallow((
-
-
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- it('returns false for multiple nested elements where one fringe returns a non null value', () => {
- const wrapper = shallow((
-
- Hello
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- itIf(is('>= 16'), 'returns false for multiple nested elements that all return null', () => {
- const wrapper = shallow((
-
-
-
-
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- itIf(is('>= 16'), 'returns false for multiple nested elements where one fringe returns a non null value', () => {
- const wrapper = shallow((
-
-
-
-
-
- Hello
-
-
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- itIf(is('>= 16'), 'returns false for multiple nested elements where all values are null', () => {
- const wrapper = shallow((
-
-
-
-
-
-
-
-
- ));
-
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
- });
-
- it('does not return true for HTML elements', () => {
- const wrapper = shallow(
);
- expect(wrapper.isEmptyRender()).to.equal(false);
- });
-
- describeIf(is('>=15 || ^16.0.0-alpha'), 'stateless function components (SFCs)', () => {
- itWithData(emptyRenderValues, 'when a component returns: ', (data) => {
- function Foo() {
- return data.value;
- }
- const wrapper = shallow(
);
- expect(wrapper.isEmptyRender()).to.equal(data.expectResponse);
- });
- });
- });
-
- describe('.not(selector)', () => {
- it('filters to things not matching a selector', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);
- expect(wrapper.find('.baz').not('.foo')).to.have.lengthOf(2);
- expect(wrapper.find('.foo').not('div')).to.have.lengthOf(0);
- });
- });
-
- describe('.filter(selector)', () => {
- it('returns a new wrapper of just the nodes that matched the selector', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(3);
- expect(wrapper.find('.bar').filter('.foo')).to.have.lengthOf(3);
- expect(wrapper.find('.bar').filter('.bax')).to.have.lengthOf(0);
- expect(wrapper.find('.foo').filter('.baz.bar')).to.have.lengthOf(2);
- });
-
- it('only looks in the current wrappers nodes, not their children', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(1);
- });
- });
-
- describe('.filterWhere(predicate)', () => {
- it('filters only the nodes of the wrapper', () => {
- const wrapper = shallow((
-
- ));
-
- const stub = sinon.stub();
- stub.onCall(0).returns(false);
- stub.onCall(1).returns(true);
- stub.onCall(2).returns(false);
-
- const baz = wrapper.find('.foo').filterWhere(stub);
- expect(baz).to.have.lengthOf(1);
- expect(baz.hasClass('baz')).to.equal(true);
- });
-
- it('calls the predicate with the wrapped node as the first argument', () => {
- const wrapper = shallow((
-
- ));
-
- const stub = sinon.stub();
- stub.returns(true);
- const spy = sinon.spy(stub);
- wrapper.find('.foo').filterWhere(spy);
- expect(spy).to.have.property('callCount', 3);
- expect(spy.args[0][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[2][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[0][0].hasClass('bar')).to.equal(true);
- expect(spy.args[1][0].hasClass('baz')).to.equal(true);
- expect(spy.args[2][0].hasClass('bux')).to.equal(true);
- });
- });
-
- describe('.text()', () => {
- const matchesRender = function matchesRender(node) {
- const actual = shallow(node).text();
- const expected = render(node).text();
- expect(expected).to.equal(actual);
- };
-
- it('handles simple text nodes', () => {
- const wrapper = shallow((
-
some text
- ));
- expect(wrapper.text()).to.equal('some text');
- });
-
- it('handles nodes with mapped children', () => {
- class Foo extends React.Component {
- render() {
- return (
-
- {this.props.items.map(x => x)}
-
- );
- }
- }
- matchesRender(
);
- matchesRender((
-
abc,
- def ,
- hij ,
- ]}
- />
- ));
- });
-
- it('renders composite components dumbly', () => {
- class Foo extends React.Component {
- render() { return
; }
- }
- const wrapper = shallow((
-
- ));
- expect(wrapper.text()).to.equal('>
);
- });
-
- it('handles spaces the same between shallow and mount', () => {
- const Space = (
-
-
test
-
Hello
-
-
- World
-
-
Hello World
-
Hello
- World
-
-
Hello World
-
-
-
-
-
- );
- }
- }
- const wrapper = shallow(
- {props.items.map(x => x)}
-
- );
- matchesRender(abc,
- def ,
- hij ,
- ]}
- />
- ));
- });
-
- it('renders composite components dumbly', () => {
- const Foo = () => (
- foo
- );
-
- const wrapper = shallow((
-
- ));
- expect(wrapper.text()).to.equal('{x}
);
- expect(wrapper.text()).to.equal(String(x));
- });
- });
-
- describe('text content with curly braces', () => {
- it('handles literal strings', () => {
- const wrapper = shallow();
- expect(wrapper.text()).to.equal('{}');
- });
-
- it.skip('handles innerHTML', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.text()).to.equal('{ some text }');
- });
- });
-
- describeIf(is('> 16.2'), 'fragments', () => {
- class FragmentClassExample extends React.Component {
- render() {
- return (
-
- Foo
- Bar
-
- );
- }
- }
-
- const FragmentConstExample = () => (
-
- Foo
- Bar
-
- );
-
- it('correctly gets text for both children for class', () => {
- const classWrapper = shallow({children} ;
- const Foobar = () => (
-
- Foo
- Bar
-
- );
-
- const wrapper = shallow(
-
- Foo
-
- Bar
- `);
- expect(text).to.equal('
- );
- }
- }
-
- const wrapper = shallow(
- );
-
- const wrapper = shallow(
- ));
-
- const StrictReceiver = function SFC(
- props = { NO_PROPS: true },
- context,
- ) {
- return (
-
- );
- };
-
- it('does not provide a `this` to a sloppy-mode SFC', () => {
- const wrapper = shallow(
- );
- }
- }
-
- const wrapper = shallow(
- );
-
- const wrapper = shallow({this.state.foo}
; }
- }
- const wrapper = shallow({this.state.foo}
; }
- }
- const wrapper = shallow({this.state.foo}
; }
- }
- const wrapper = shallow(
);
-
- expect(() => wrapper.state()).to.throw(Error, 'ShallowWrapper::state() can only be called on class components');
- });
-
- itIf(is('>= 16'), 'throws on Portals', () => {
- const containerDiv = { nodeType: 1 };
- const portal = createPortal(
-
,
- containerDiv,
- );
-
- const wrapper = shallow({portal}
);
- expect(() => wrapper.state()).to.throw(Error, 'ShallowWrapper::state() can only be called on class components');
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('throws on SFCs', () => {
- function Foo() {
- return
;
- }
-
- const wrapper = shallow(
- {prop} - {state}
-
- );
- }
- }
-
- class Parent extends React.Component {
- constructor(...args) {
- super(...args);
- this.state = { childProp: 1 };
- }
-
- render() {
- const { childProp } = this.state;
- return
);
- expect(wrapper.children()).to.have.lengthOf(0);
- });
-
- it('skips the falsy children', () => {
- const wrapper = shallow((
-
-
- {false}
- {[false, false]}
-
foo
-
-
- {undefined}
- {[undefined, undefined]}
-
bar
-
-
- {null}
- {[null, null]}
-
baz
-
-
-
- );
- }
- }
- const wrapper = shallow((
- abc,
- def ,
- ]}
- />
- ));
- expect(wrapper.children()).to.have.lengthOf(3);
- expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
- expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
- expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
- });
-
- it('optionally allows a selector to filter by', () => {
- const wrapper = shallow((
-
- ));
- const children = wrapper.children('.bip');
- expect(children).to.have.lengthOf(2);
- expect(children.at(0).hasClass('bar')).to.equal(true);
- expect(children.at(1).hasClass('baz')).to.equal(true);
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('handles mixed children with and without arrays', () => {
- const Foo = props => (
-
-
- );
-
- const wrapper = shallow((
- abc,
- def ,
- ]}
- />
- ));
- expect(wrapper.children()).to.have.lengthOf(3);
- expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
- expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
- expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
- });
- });
-
- it('returns duplicates untouched', () => {
- class Foo extends React.Component {
- render() {
- const foo = 'Foo';
- return (
-
- {foo} Bar {foo} Bar {foo}
-
- );
- }
- }
-
- const wrapper = shallow({child} ,
- );
-
- const justifiedChildren = [];
- React.Children.forEach(wrappedChildren, (child) => {
- if (child) {
- justifiedChildren.push(child, ' ');
- }
- });
- justifiedChildren.pop();
-
- return {justifiedChildren}
;
- }
- }
-
- const wrapper = shallow((
-
- foo
- bar
- baz
-
- ));
-
- expect(wrapper.children().map(x => x.debug())).to.eql([
- `
-
- foo
-
- `,
- ' ',
- `
-
- bar
-
- `,
- ' ',
- `
-
- baz
-
- `,
- ]);
- });
- });
-
- describe('.childAt(index)', () => {
- it('gets a wrapped node at the specified index', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.childAt(0).hasClass('bar')).to.equal(true);
- expect(wrapper.childAt(1).hasClass('baz')).to.equal(true);
- });
- });
-
- describe('.parents([selector])', () => {
- it('returns an array of current node’s ancestors', () => {
- const wrapper = shallow((
-
- ));
-
- const parents = wrapper.find('.baz').parents();
-
- expect(parents).to.have.lengthOf(3);
- expect(parents.at(0).hasClass('bar')).to.equal(true);
- expect(parents.at(1).hasClass('foo')).to.equal(true);
- expect(parents.at(2).hasClass('bax')).to.equal(true);
- });
-
- it('works for non-leaf nodes as well', () => {
- const wrapper = shallow((
-
- ));
-
- const parents = wrapper.find('.bar').parents();
-
- expect(parents).to.have.lengthOf(2);
- expect(parents.at(0).hasClass('foo')).to.equal(true);
- expect(parents.at(1).hasClass('bax')).to.equal(true);
- });
-
- it('optionally allows a selector', () => {
- const wrapper = shallow((
-
- ));
-
- const parents = wrapper.find('.baz').parents('.foo');
-
- expect(parents).to.have.lengthOf(2);
- expect(parents.at(0).hasClass('foo')).to.equal(true);
- expect(parents.at(1).hasClass('bax')).to.equal(true);
- });
-
- it('works when called sequentially on two sibling nodes', () => {
- class Test extends React.Component {
- render() {
- return (
-
- );
- }
- }
-
- const wrapper = shallow(
- A child
-
`);
- expect(aChild).to.have.lengthOf(1);
-
- const bChild = wrapper.find({ children: 'B child' });
- expect(bChild.debug()).to.equal(`
- B child
-
`);
- expect(bChild).to.have.lengthOf(1);
-
- const bChildParents = bChild.parents('.b');
- expect(bChildParents.debug()).to.equal(``);
- expect(bChildParents).to.have.lengthOf(1);
-
- const aChildParents = aChild.parents('.a');
- expect(aChildParents.debug()).to.equal(``);
- expect(aChildParents).to.have.lengthOf(1);
- });
- });
-
- describe('.parent()', () => {
- it('returns only the immediate parent of the node', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.baz').parent().hasClass('bar')).to.equal(true);
- });
-
- it('works when the sibling node has children', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.find('.baz').parent().hasClass('bar')).to.equal(true);
- });
-
- it('works for multiple nodes', () => {
- const wrapper = shallow((
-
- ));
-
- const parents = wrapper.find('.baz').parent();
- expect(parents).to.have.lengthOf(3);
- expect(parents.at(0).hasClass('foo')).to.equal(true);
- expect(parents.at(1).hasClass('bar')).to.equal(true);
- expect(parents.at(2).hasClass('bax')).to.equal(true);
- });
-
- it('works with component', () => {
- const Foo = createClass({
- render() {
- return
;
- },
- });
- const wrapper = shallow(
);
-
- expect(wrapper.hasClass('foo')).to.equal(true);
- expect(wrapper.hasClass('bar')).to.equal(true);
- expect(wrapper.hasClass('baz')).to.equal(true);
- expect(wrapper.hasClass('some-long-string')).to.equal(true);
- expect(wrapper.hasClass('FoOo')).to.equal(true);
- expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
- });
- });
-
- describeIf(is('> 0.13'), 'with stateless function components (SFCs)', () => {
- it('returns whether or not node has a certain class', () => {
- const Foo = () =>
- ));
-
- expect(wrapper.hasClass('foo')).to.equal(true);
- expect(wrapper.hasClass('bar')).to.equal(true);
- expect(wrapper.hasClass('baz')).to.equal(true);
- expect(wrapper.hasClass('some-long-string')).to.equal(true);
- expect(wrapper.hasClass('FoOo')).to.equal(true);
- expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
- });
-
- context('when using a Composite component that renders null', () => {
- it('returns whether or not node has a certain class', () => {
- class Foo extends React.Component {
- render() {
- return null;
- }
- }
- const wrapper = shallow(
;
- }
- }
- const obj = { classA: true, classB: false };
- const wrapper = shallow(
);
- expect(wrapper.hasClass('foo-bar')).to.equal(true);
- });
-
- it('works if className has a function in toString property', () => {
- function classes() {}
- classes.toString = () => 'foo-bar';
- const wrapper = shallow(
);
- expect(wrapper.hasClass('foo-bar')).to.equal(true);
- });
-
- it('works if searching with a RegExp', () => {
- const wrapper = shallow(
);
- expect(wrapper.hasClass(/(ComponentName)-(classname)-(\d+)/)).to.equal(true);
- expect(wrapper.hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(false);
- });
- });
-
- describe('.forEach(fn)', () => {
- it('calls a function for each node in the wrapper', () => {
- const wrapper = shallow((
-
- ));
- const spy = sinon.spy();
-
- wrapper.find('.foo').forEach(spy);
-
- expect(spy).to.have.property('callCount', 3);
- expect(spy.args[0][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[0][0].hasClass('bax')).to.equal(true);
- expect(spy.args[0][1]).to.equal(0);
- expect(spy.args[1][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][0].hasClass('bar')).to.equal(true);
- expect(spy.args[1][1]).to.equal(1);
- expect(spy.args[2][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[2][0].hasClass('baz')).to.equal(true);
- expect(spy.args[2][1]).to.equal(2);
- });
- });
-
- describe('.map(fn)', () => {
- it('calls a function with a wrapper for each node in the wrapper', () => {
- const wrapper = shallow((
-
- ));
- const spy = sinon.spy();
-
- wrapper.find('.foo').map(spy);
-
- expect(spy).to.have.property('callCount', 3);
- expect(spy.args[0][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[0][0].hasClass('bax')).to.equal(true);
- expect(spy.args[0][1]).to.equal(0);
- expect(spy.args[1][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][0].hasClass('bar')).to.equal(true);
- expect(spy.args[1][1]).to.equal(1);
- expect(spy.args[2][0]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[2][0].hasClass('baz')).to.equal(true);
- expect(spy.args[2][1]).to.equal(2);
- });
-
- it('returns an array with the mapped values', () => {
- const wrapper = shallow((
-
- ));
- const result = wrapper.find('.foo').map(w => w.props().className);
-
- expect(result).to.eql([
- 'foo bax',
- 'foo bar',
- 'foo baz',
- ]);
- });
- });
-
- describe('.reduce(fn[, initialValue])', () => {
- it('has the right length', () => {
- expect(ShallowWrapper.prototype.reduce).to.have.lengthOf(1);
- });
-
- it('calls a function with a wrapper for each node in the wrapper', () => {
- const wrapper = shallow((
-
- ));
- const spy = sinon.spy(n => n + 1);
-
- wrapper.find('.foo').reduce(spy, 0);
-
- expect(spy).to.have.property('callCount', 3);
- expect(spy.args[0][1]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[0][1].hasClass('bax')).to.equal(true);
- expect(spy.args[1][1]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[1][1].hasClass('bar')).to.equal(true);
- expect(spy.args[2][1]).to.be.instanceOf(ShallowWrapper);
- expect(spy.args[2][1].hasClass('baz')).to.equal(true);
- });
-
- it('accumulates a value', () => {
- const wrapper = shallow((
-
- ));
- const result = wrapper.find('.foo').reduce(
- (obj, n) => {
- obj[n.prop('id')] = n.prop('className');
- return obj;
- },
- {},
- );
-
- expect(result).to.eql({
- bax: 'foo qoo',
- bar: 'foo boo',
- baz: 'foo hoo',
- });
- });
-
- it('allows the initialValue to be omitted', () => {
- const one = (
);
- const two = (
);
- const three = (
);
- const wrapper = shallow((
-
- {one}
- {two}
- {three}
-
- ));
- const counter = (
);
- const two = (
);
- const three = (
);
- const wrapper = shallow((
-
- {one}
- {two}
- {three}
-
- ));
- const counter = (
-
- );
- }
- }
- const wrapper = shallow({this.context.name}
;
- }
- }
- Bar.contextTypes = {
- name: PropTypes.string,
- };
- class Foo extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- const context = { name: 'foo' };
- const wrapper = shallow({this.context.name}
;
- }
- }
- class Foo extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- const context = { name: 'foo' };
- const wrapper = shallow({this.context.name}
;
- }
- }
- Bar.contextTypes = {
- name: PropTypes.string,
- };
- class Foo extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- const context = { name: 'foo' };
- const wrapper = shallow(
;
- }
- }
- Bar.contextTypes = {
- name: PropTypes.string,
- };
- class Foo extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- const context = { name: 'foo', hello: 'world' };
- const wrapper = shallow(
-
- );
-
- const wrapper = shallow({context.name}
- );
- Bar.contextTypes = { name: PropTypes.string };
- const Foo = () => (
-
-
- );
-
- const context = { name: 'foo' };
- const wrapper = shallow({context.name}
- );
- const Foo = () => (
-
-
- );
-
- const context = { name: 'foo' };
- const wrapper = shallow({context.name}
- );
- Bar.contextTypes = { name: PropTypes.string };
- const Foo = () => (
-
-
- );
-
- const context = { name: 'foo' };
- const wrapper = shallow({context.name}
- );
- Bar.contextTypes = { name: PropTypes.string };
- const Foo = () => (
-
-
- );
-
- const context = { name: 'foo' };
- const wrapper = shallow(
- ));
- fooNode = wrapper.find('.foo');
- missingNode = wrapper.find('.missing');
- });
- afterEach(() => {
- warningStub.restore();
- });
-
- it('displays a deprecation warning', () => {
- fooNode.isEmpty();
- expect(warningStub.calledWith('Enzyme::Deprecated method isEmpty() called, use exists() instead.')).to.equal(true);
- });
-
- it('calls exists() instead', () => {
- const existsSpy = sinon.spy();
- fooNode.exists = existsSpy;
- fooNode.isEmpty();
- expect(existsSpy.called).to.equal(true);
- });
-
- it('returns true if wrapper is empty', () => {
- expect(fooNode.isEmpty()).to.equal(false);
- expect(missingNode.isEmpty()).to.equal(true);
- });
- });
-
- describe('.exists()', () => {
- it('has no required arguments', () => {
- expect(ShallowWrapper.prototype.exists).to.have.lengthOf(0);
- });
-
- describe('without argument', () => {
- it('returns true if node exists in wrapper', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.bar').exists()).to.equal(false);
- expect(wrapper.find('.foo').exists()).to.equal(true);
- });
- });
- describe('with argument', () => {
- it('throws on invalid EnzymeSelector', () => {
- const wrapper = shallow(
);
-
- expect(() => wrapper.exists(null)).to.throw(TypeError);
- expect(() => wrapper.exists(undefined)).to.throw(TypeError);
- expect(() => wrapper.exists(45)).to.throw(TypeError);
- expect(() => wrapper.exists({})).to.throw(TypeError);
- });
-
- it('returns .find(arg).exists() instead', () => {
- const wrapper = shallow(
);
- const fakeFindExistsReturnVal = Symbol('fake .find(arg).exists() return value');
- const fakeSelector = '.someClass';
- wrapper.find = sinon.stub().returns({ exists: () => fakeFindExistsReturnVal });
- const existsResult = wrapper.exists(fakeSelector);
- expect(wrapper.find).to.have.property('callCount', 1);
- expect(wrapper.find.firstCall.args[0]).to.equal(fakeSelector);
- expect(existsResult).to.equal(fakeFindExistsReturnVal);
- });
- });
- });
-
- describe('.at(index)', () => {
- it('gets a wrapper of the node at the specified index', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.bar').at(0).hasClass('foo')).to.equal(true);
- expect(wrapper.find('.bar').at(1).hasClass('bax')).to.equal(true);
- expect(wrapper.find('.bar').at(2).hasClass('bux')).to.equal(true);
- expect(wrapper.find('.bar').at(3).hasClass('baz')).to.equal(true);
- });
-
- it('`.at()` does not affect the results of `.exists()`', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.bar').exists()).to.equal(false);
- expect(wrapper.find('.bar').at(0).exists()).to.equal(false);
-
- expect(wrapper.find('.foo').exists()).to.equal(true);
- expect(wrapper.find('.foo').at(0).exists()).to.equal(true);
- });
- });
-
- describe('.get(index)', () => {
- it('gets the node at the specified index', () => {
- const wrapper = shallow((
-
- ));
- expect(wrapper.find('.bar').get(0)).to.deep.equal(wrapper.find('.foo').getElement());
- expect(wrapper.find('.bar').get(1)).to.deep.equal(wrapper.find('.bax').getElement());
- expect(wrapper.find('.bar').get(2)).to.deep.equal(wrapper.find('.bux').getElement());
- expect(wrapper.find('.bar').get(3)).to.deep.equal(wrapper.find('.baz').getElement());
- });
-
- it('does not add a "null" key to elements with a ref and no key', () => {
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.setRef = this.setRef.bind(this);
- }
-
- setRef(node) {
- this.node = node;
- }
-
- render() {
- return (
-
- );
- }
- }
- const wrapper = shallow(
).debug()).to.equal('
');
- });
- });
-
- describe('.html()', () => {
- it('returns html of straight DOM elements', () => {
- const wrapper = shallow((
-
- Hello World!
-
- ));
- expect(wrapper.html()).to.equal((
- 'Hello World!
'
- ));
- });
-
- it('renders out nested composite components', () => {
- class Foo extends React.Component {
- render() {
- return (
);
- }
- }
- class Bar extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
- const wrapper = shallow(
'
- ));
- });
-
- describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
- it('renders out nested composite components', () => {
- const Foo = () => (
-
- );
- const Bar = () => (
-
-
- );
-
- const wrapper = shallow(
'
- ));
- });
- });
-
- describeIf(is('>16.2'), 'Fragments', () => {
- class FragmentClassExample extends React.Component {
- render() {
- return (
-
- Foo
- Bar
-
- );
- }
- }
-
- const FragmentConstExample = () => (
-
- Foo
- Bar
-
- );
-
- class ClassChild extends React.Component {
- render() {
- return Class child
;
- }
- }
-
- function SFCChild() {
- return SFC child
;
- }
-
- class FragmentWithCustomChildClass extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- it('correctly renders html for both children for class', () => {
- const classWrapper = shallow(Foo
Bar
');
- });
-
- it('correctly renders html for both children for const', () => {
- const constWrapper = shallow(Foo
Bar
');
- });
-
- it('correctly renders html for custom component children', () => {
- const withChildrenWrapper = shallow(Class child
SFC child
');
- });
- });
- });
-
- describe('.unmount()', () => {
- it('calls componentWillUnmount()', () => {
- const spy = sinon.spy();
-
- class Foo extends React.Component {
- constructor(props) {
- super(props);
- this.componentWillUnmount = spy;
- }
-
- render() {
- return (
-
- {this.props.id}
-
- );
- }
- }
- const wrapper = shallow(
);
- }
- }
-
- class Bar extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
-
- const wrapper = shallow(
- );
-
- const Bar = () => (
-
-
- );
-
- const wrapper = shallow(
;
- }
- }
- class Bar extends React.Component {
- render() {
- const { render: r } = this.props;
- return {r()}
;
- }
- }
-
- const wrapperA = shallow();
- const renderPropWrapperA = wrapperA.find(Bar).renderProp('render')();
- expect(renderPropWrapperA.find(Foo)).to.have.lengthOf(1);
-
- const wrapperB = shallow(
);
- const renderPropWrapperB = wrapperB.find(Bar).renderProp('render')();
- expect(renderPropWrapperB.find(Foo)).to.have.lengthOf(1);
-
- const stub = sinon.stub().returns(
);
- const wrapperC = shallow(
);
- stub.resetHistory();
- wrapperC.find(Bar).renderProp('render')('one', 'two');
- expect(stub.args).to.deep.equal([['one', 'two']]);
- });
-
- it('throws on host elements', () => {
- class Div extends React.Component {
- render() {
- const { children } = this.props;
- return {children}
;
- }
- }
-
- const wrapper = shallow(
);
- expect(wrapper.is('div')).to.equal(true);
- expect(() => wrapper.renderProp('foo')).to.throw();
- });
-
- wrap()
- .withOverride(() => getAdapter(), 'wrap', () => undefined)
- .it('throws with a react adapter that lacks a `.wrap`', () => {
- class Foo extends React.Component {
- render() {
- return
;
- }
- }
- class Bar extends React.Component {
- render() {
- const { render: r } = this.props;
- return {r()}
;
- }
- }
-
- const wrapper = shallow();
- expect(() => wrapper.find(Bar).renderProp('render')).to.throw(RangeError);
- });
-
- describeIf(is('>= 16'), 'allows non-nodes', () => {
- function MyComponent({ val }) {
- return x} />;
- }
-
- function ComponentWithRenderProp({ val, r }) {
- return r(val);
- }
-
- it('works with strings', () => {
- const wrapper = shallow(
, {
- disableLifecycleMethods: value,
- })).to.throw(/true or false/);
- });
- });
-
- it('does not throw for a boolean value or undefined', () => {
- [true, false, undefined].forEach((value) => {
- expect(() => shallow(
, {
- disableLifecycleMethods: value,
- })).not.to.throw();
- });
- });
-
- it('does not throw when no lifecycle flags are provided in options', () => {
- expect(() => shallow(
, {})).not.to.throw();
- });
-
- it('throws when used with lifecycleExperimental in invalid combinations', () => {
- [true, false].forEach((value) => {
- expect(() => shallow(
, {
- lifecycleExperimental: value,
- disableLifecycleMethods: value,
- })).to.throw(/same value/);
- });
- });
- });
-
- describe('when disabled', () => {
- let wrapper;
- const spy = sinon.spy();
- class Foo extends React.Component {
- componentWillMount() { spy('componentWillMount'); }
-
- componentDidMount() { spy('componentDidMount'); }
-
- componentWillReceiveProps() { spy('componentWillReceiveProps'); }
-
- shouldComponentUpdate() {
- spy('shouldComponentUpdate');
- return true;
- }
-
- componentWillUpdate() { spy('componentWillUpdate'); }
-
- componentDidUpdate() { spy('componentDidUpdate'); }
-
- componentWillUnmount() { spy('componentWillUnmount'); }
-
- render() {
- spy('render');
- return foo
;
- }
- }
-
- const options = {
- disableLifecycleMethods: true,
- context: {
- foo: 'foo',
- },
- };
-
- beforeEach(() => {
- wrapper = shallow(foo
;
- }
- }
- shallow({this.state.foo}
;
- }
- }
- const wrapper = shallow(
-
, {
- lifecycleExperimental: value,
- })).to.throw(/true or false/);
- });
- });
-
- it('does not throw for a boolean value or when not provided', () => {
- [true, false, undefined].forEach((value) => {
- expect(() => shallow(
, {
- lifecycleExperimental: value,
- })).not.to.throw();
- });
- });
- });
- });
-
- describeIf(is('>= 16.3'), 'getDerivedStateFromProps', () => {
- let spy;
-
- beforeEach(() => {
- spy = sinon.spy();
- });
-
- class Spy extends React.Component {
- constructor(...args) {
- super(...args);
- this.state = { state: true }; // eslint-disable-line react/no-unused-state
- spy('constructor');
- }
-
- shouldComponentUpdate(nextProps, nextState, nextContext) {
- spy('shouldComponentUpdate', {
- prevProps: this.props,
- nextProps,
- prevState: this.state,
- nextState,
- prevContext: this.context,
- nextContext,
- });
- return true;
- }
-
- componentWillUpdate(nextProps, nextState, nextContext) {
- spy('componentWillUpdate', {
- prevProps: this.props,
- nextProps,
- prevState: this.state,
- nextState,
- prevContext: this.context,
- nextContext,
- });
- }
-
- componentDidUpdate(prevProps, prevState, prevContext) {
- spy('componentDidUpdate', {
- prevProps,
- nextProps: this.props,
- prevState,
- nextState: this.state,
- prevContext,
- nextContext: this.context,
- });
- }
-
- render() {
- spy('render');
- return null;
- }
- }
-
- class CWRP extends Spy {
- componentWillReceiveProps(nextProps, nextContext) {
- spy('componentWillReceiveProps', {
- prevProps: this.props,
- nextProps,
- prevState: this.state,
- nextState: this.state,
- prevContext: this.context,
- nextContext,
- });
- }
- }
-
- class U_CWRP extends Spy {
- UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
- spy('UNSAFE_componentWillReceiveProps', {
- prevProps: this.props,
- nextProps,
- prevState: this.state,
- nextState: this.state,
- prevContext: this.context,
- nextContext: undefined,
- });
- }
- }
-
- class GDSFP extends Spy {
- static getDerivedStateFromProps(props, state) {
- spy('getDerivedStateFromProps', { props, state });
- return {};
- }
- }
-
- it('calls cWRP when expected', () => {
- const prevProps = { a: 1 };
- const wrapper = shallow(
-
-
-
- {didThrow ? 'HasThrown' : 'HasNotThrown'}
-
-
-
-
-
-
-
- {didThrow ? 'HasThrown' : 'HasNotThrown'}
-
-
-
-
-
- );
- }
- }
-
- it('does not catch errors during shallow render', () => {
- const wrapper = shallow(
-
-
- {didThrow ? 'HasThrown' : 'HasNotThrown'}
-
-
foo
;
- }
- }
- shallow({this.state.count}
;
- }
- }
- const result = shallow({this.state.foo}
;
- }
- }
- Foo.contextTypes = {
- foo: PropTypes.string,
- };
-
- const wrapper = shallow(
-
- );
- }
- }
-
- const wrapper = shallow(foo
;
- }
- }
-
- const wrapper = shallow({this.props.foo}
;
- }
- }
- const result = shallow({this.props.foo}
;
- }
- }
- const result = shallow({this.props.foo}
;
- }
- }
- const result = shallow({this.state.foo}
;
- }
- }
- Foo.contextTypes = {
- foo: PropTypes.string,
- };
-
- const wrapper = shallow(
- {this.state.foo}
;
- }
- }
- const wrapper = shallow({this.state.name}
;
- }
- }
- const result = shallow({this.state.name}
;
- }
- }
- const result = shallow({this.state.foo}
;
- }
- }
- Foo.contextTypes = {
- foo: PropTypes.string,
- };
const wrapper = shallow(
foo
;
- }
- }
- Foo.contextTypes = {
- foo: PropTypes.string,
- };
- const wrapper = shallow(
- {this.state.name}
;
- }
- }
- const result = shallow(
- {this.state.name}
;
- }
- }
- const result = shallow(
- foo
;
- }
- }
- const wrapper = shallow({this.state.foo}
;
- }
- }
- const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
-
- const wrapper = shallow(
- {this.state.foo}
- click
-
- );
- }
- }
- const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
-
- const wrapper = shallow({this.state.foo}
;
- }
- }
- const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
-
- const wrapper = shallow(
- this.setState({ foo: 'update2' })}>
- click
-
- {this.state.foo}
-
- );
+ spy('render');
+ return {this.state.foo}
;
}
}
- const spy = sinon.spy(Foo.prototype, 'componentDidMount');
-
const wrapper = shallow(
- {this.state.foo}
-
- );
- }
- }
- const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
- const wrapper = shallow({c}
;
- }
- }
-
- it('rerenders on setState when new state is !==, but deeply equal to existing state', () => {
- const updateSpy = sinon.spy();
- const wrapper = shallow(
- {counter}
- {state}
-
- );
+ spy();
+ return {this.state.name}
;
}
}
-
- let cDU;
- let gDSFP;
-
- beforeEach(() => { // eslint-disable-line mocha/no-sibling-hooks
- cDU = sinon.spy(DummyComp.prototype, 'componentDidUpdate');
- gDSFP = sinon.spy(DummyComp, 'getDerivedStateFromProps');
- });
-
- it('with no state changes, calls both methods with a sync and async setProps', () => {
- const wrapper = shallow(
- {this.state.foo}
-
- );
+ spy();
+ return {this.state.name}
;
}
}
- const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
- const wrapper = shallow(foo
;
+ return {this.state.foo}
;
}
}
- const wrapper = shallow(
,
];
- }
- }
- const wrapper = shallow(
- {['foo', 'bar', ''].map(s => {s} )}
-
- )).find('li');
- expect(wrapper.at(0).key()).to.equal('foo');
- expect(wrapper.at(1).key()).to.equal('bar');
- expect(wrapper.at(2).key()).to.equal('');
- });
-
- it('returns null when no key is specified', () => {
- const wrapper = shallow((
-
- )).find('li');
- expect(wrapper.key()).to.equal(null);
- });
- });
-
- describe('.matchesElement(node)', () => {
- it('matches on a root node that looks like the rendered one', () => {
- const spy = sinon.spy();
- const wrapper = shallow((
-
- )).first();
- expect(wrapper.matchesElement()).to.equal(true);
- expect(wrapper.matchesElement((
-
- ))).to.equal(true);
- expect(wrapper.matchesElement((
-
- ))).to.equal(true);
- expect(wrapper.matchesElement((
-
- ))).to.equal(true);
- expect(spy).to.have.property('callCount', 0);
- });
-
- it('does not match on a root node that doesn’t looks like the rendered one', () => {
- const spy = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
- )).first();
- expect(wrapper.matchesElement()).to.equal(false);
- expect(wrapper.matchesElement((
-
- ))).to.equal(false);
- expect(wrapper.matchesElement((
-
- ))).to.equal(false);
- expect(wrapper.matchesElement((
-
- ))).to.equal(false);
- expect(spy).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
-
- it('matches a simple node', () => {
- class Test extends React.Component {
- render() {
- return test ;
- }
- }
- const wrapper = shallow(test )).to.equal(true);
- });
- });
-
- describe('.containsMatchingElement(node)', () => {
- it('matches a root node that looks like the rendered one', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
-
Hello World
-
Goodbye World
-
Hello World
)).to.equal(true);
- expect(wrapper.containsMatchingElement(Goodbye World
)).to.equal(true);
- expect(wrapper.containsMatchingElement((
- Hello World
- ))).to.equal(true);
- expect(wrapper.containsMatchingElement((
- Hello World
- ))).to.equal(true);
- expect(wrapper.containsMatchingElement((
- Goodbye World
- ))).to.equal(true);
- expect(wrapper.containsMatchingElement((
- Goodbye World
- ))).to.equal(true);
- expect(spy1).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
-
- it('does not match on a single node that doesn\'t looks like a rendered one', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
Bonjour le monde
)).to.equal(false);
- expect(wrapper.containsMatchingElement((
- Au revoir le monde
- ))).to.equal(false);
- });
-
- it('does not differentiate between absence, null, or undefined', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
-
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
-
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
-
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- expect(wrapper.containsMatchingElement(
)).to.equal(true);
- });
-
- it('works with leading and trailing spaces', () => {
- const wrapper = shallow((
-
- All Operations
-
- ));
-
- expect(wrapper.containsMatchingElement( All Operations )).to.equal(true);
- });
-
- it('works with leading and trailing newlines', () => {
- const wrapper = shallow((
-
-
- All Operations
-
-
- ));
-
- expect(wrapper.containsMatchingElement( All Operations )).to.equal(true);
- });
- });
-
- describe('.containsAllMatchingElements(nodes)', () => {
- it('throws TypeError if non-array passed in', () => {
- const wrapper = shallow((
-
- Hello
-
- ));
-
- expect(() => wrapper.containsAllMatchingElements((
-
- Hello
-
- ))).to.throw(TypeError, 'nodes should be an Array');
- });
-
- it('matches on array of nodes that each look like rendered nodes, with nested elements', () => {
- const wrapper = shallow((
-
- ));
-
- expect(wrapper.containsAllMatchingElements([
- Hello
,
- Goodbye
,
- ])).to.equal(true);
- });
-
- it('matches on an array of nodes that all looks like one of rendered nodes', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAllMatchingElements([
- Hello World
,
- Goodbye World
,
- ])).to.equal(true);
- expect(spy1).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
-
- it('does not match on nodes that doesn\'t all looks like one of rendered nodes', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
Hello World
,
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(false);
- expect(spy1).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
- });
+ [
+ 'render',
+ ],
+ [
+ 'shouldComponentUpdate',
+ { foo: 'props' }, { foo: 'props' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'baz' },
+ ],
+ [
+ 'componentWillUpdate',
+ { foo: 'props' }, { foo: 'props' },
+ { foo: 'state' }, { foo: 'state' },
+ { foo: 'baz' },
+ ],
+ [
+ 'render',
+ ],
+ [
+ 'componentDidUpdate',
+ { foo: 'props' }, { foo: 'props' },
+ { foo: 'state' }, { foo: 'state' },
+ is('>= 16') ? undefined : { foo: 'bar' },
+ ],
+ ]);
+ });
- describe('.containsAnyMatchingElements(nodes)', () => {
- it('matches on an array with at least one node that looks like a rendered nodes', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(wrapper.containsAnyMatchingElements([
- Bonjour le monde
,
- Goodbye World
,
- ])).to.equal(true);
- expect(spy1).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
- it('does not match on an array with no nodes that looks like a rendered nodes', () => {
- const spy1 = sinon.spy();
- const spy2 = sinon.spy();
- const wrapper = shallow((
-
-
Hello World
-
Goodbye World
-
Bonjour le monde
,
- Au revoir le monde
,
- ])).to.equal(false);
- expect(spy1).to.have.property('callCount', 0);
- expect(spy2).to.have.property('callCount', 0);
- });
- });
+ it('cancels rendering when Component returns false in shouldComponentUpdate', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ shouldComponentUpdate() {
+ spy('shouldComponentUpdate');
+ return false;
+ }
- wrap()
- .withOverride(() => getAdapter(), 'displayNameOfNode', () => undefined)
- .describe('.name()', () => {
- describe('node with displayName', () => {
- it('returns the displayName of the node', () => {
- class Foo extends React.Component {
- render() { return
; }
+ componentWillUpdate() {
+ spy('componentWillUpdate');
}
- class Wrapper extends React.Component {
- render() { return foo
;
+ }
+ }
+ Foo.contextTypes = {
+ foo: PropTypes.string,
+ };
+ const wrapper = shallow(
+
;
+ componentWillUpdate() {
+ if (!this.updated) {
+ this.updated = true;
+ this.setState({ count: this.state.count + 1 });
+ this.setState({ count: this.state.count + 1 });
}
- const Wrapper = () => {this.state.name}
;
+ }
+ }
+ const result = shallow(
+
;
- },
- });
- const Wrapper = createClass({
- render() {
- return {this.state.name}
;
+ }
+ }
+ const result = shallow(
+
; }
- }
- const stub = getAdapter().displayNameOfNode;
- const sentinel = {};
- stub.returns(sentinel);
+ context('unmounting phase', () => {
+ it('calls componentWillUnmount', () => {
+ const spy = sinon.spy();
+ class Foo extends React.Component {
+ componentWillUnmount() {
+ spy();
+ }
- const wrapper = shallow(foo
;
+ }
+ }
+ const wrapper = shallow(
; }
+ onChange() {
+ // enzyme can't handle the update because `this` is a ReactComponent instance,
+ // not a ShallowWrapper instance.
+ this.setState({ foo: 'onChange update' });
}
- class Wrapper extends React.Component {
- render() { return {this.state.foo}
;
}
+ }
+ const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
- const wrapper = shallow(
;
- }
- const Wrapper = () =>
);
- expect(wrapper.name()).to.equal('div');
- });
- });
- });
+ onChange() {
+ // enzyme can't handle the update because `this` is a ReactComponent instance,
+ // not a ShallowWrapper instance.
+ this.setState({ foo: 'onChange update' });
+ }
- describe('.dive()', () => {
- class RendersDOM extends React.Component {
- render() {
- return
;
- }
- }
- class RendersNull extends React.Component {
- render() {
- return null;
- }
- }
- class RendersMultiple extends React.Component {
- render() {
- return (
-
-
- );
- }
- }
- class RendersZero extends React.Component {
- render() {
- return
;
- }
- }
- class WrapsRendersDOM extends React.Component {
- render() {
- return
+ {this.state.foo}
+ click
+
+ );
+ }
+ }
+ const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
+
+ const wrapper = shallow({this.state.foo}
;
+ }
+ }
+ const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
- it('throws on multiple children found', () => {
- const wrapper = shallow(
+ this.setState({ foo: 'update2' })}>
+ click
+
+ {this.state.foo}
+
+ );
+ }
+ }
+ const spy = sinon.spy(Foo.prototype, 'componentDidMount');
- const underwater = wrapper.dive();
- expect(underwater.is(RendersDOM)).to.equal(true);
+ const wrapper = shallow(
+ {this.state.foo}
+
+ );
+ }
+ }
+ const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
+ const wrapper = shallow({c}
;
}
}
- const wrapper = shallow(
+ {counter}
+ {state}
+
+ );
+ }
}
- }
- const wrapper = shallow(
; }
- }
+ it('with a state changes, calls both methods with a sync and async setProps', () => {
+ const wrapper = shallow(
+ {this.state.foo}
+
+ );
+ }
}
+ const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
+ const wrapper = shallow(
- );
- }
- }
- const wrapper = shallow(
- );
+ render() {
+ spy('render');
+ return foo
;
+ }
}
- }
- const wrapper = shallow(
- { one }
- { two }
-
- );
- }
+ itIf(is('>= 16'), 'works with class components that return arrays', () => {
+ class Foo extends React.Component {
+ render() {
+ return [
,
];
}
+ }
+ const wrapper = shallow(
).children();
- expect(wrapper).to.have.lengthOf(2);
- expect(() => wrapper.single('name!')).to.throw(
- Error,
- 'Method “name!” is meant to be run on 1 node. 2 found instead.',
- );
- });
-
- it('throws if run on zero nodes', () => {
- const wrapper = shallow(
).children();
- expect(wrapper).to.have.lengthOf(0);
- expect(() => wrapper.single('name!')).to.throw(
- Error,
- 'Method “name!” is meant to be run on 1 node. 0 found instead.',
- );
- });
-
- it('throws if run on zero nodes', () => {
- const wrapper = shallow(
).children();
- expect(wrapper).to.have.lengthOf(0);
- expect(() => wrapper.single('name!')).to.throw(
- Error,
- 'Method “name!” is meant to be run on 1 node. 0 found instead.',
- );
- });
-
- it('works with a name', () => {
- const wrapper = shallow(
);
- wrapper.single('foo', (node) => {
- expect(node).to.equal(wrapper[sym('__node__')]);
- });
- });
-
- it('works without a name', () => {
- const wrapper = shallow(
);
- wrapper.single((node) => {
- expect(node).to.equal(wrapper[sym('__node__')]);
- });
- });
- });
-
describe('setState through a props method', () => {
class Child extends React.Component {
render() {
@@ -8959,35 +3383,6 @@ describe('shallow', () => {
});
});
- describe('#wrap()', () => {
- class Foo extends React.Component {
- render() {
- return (
-
- );
- }
- }
-
- it('returns itself when it is already a ShallowWrapper', () => {
- const wrapperDiv = shallow(
);
- const wrapperFoo = shallow(
;
- }
- }
- const wrapper = shallow(
);
+ expect(wrapper.children()).to.have.lengthOf(0);
+ });
+
+ it('does not attempt to get an instance for text nodes', () => {
+ const wrapper = WrapRendered(B
);
+ expect(wrapper).to.have.lengthOf(1);
+ });
+
+ it('skips the falsy children', () => {
+ const wrapper = Wrap((
+
+
+ {false}
+ {[false, false]}
+
foo
+
+
+ {undefined}
+ {[undefined, undefined]}
+
bar
+
+
+ {null}
+ {[null, null]}
+
baz
+
+
+
+ );
+ }
+ }
+ const wrapper = WrapRendered((
+ abc,
+ def ,
+ ]}
+ />
+ ));
+ expect(wrapper.children()).to.have.lengthOf(3);
+ expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
+ expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
+ expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
+ });
+
+ it('optionally allows a selector to filter by', () => {
+ const wrapper = Wrap((
+
+ ));
+ const children = wrapper.children('.bip');
+ expect(children).to.have.lengthOf(2);
+ expect(children.at(0).hasClass('bar')).to.equal(true);
+ expect(children.at(1).hasClass('baz')).to.equal(true);
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('handles mixed children with and without arrays', () => {
+ const Foo = ({ items }) => (
+
+
+ );
+
+ const wrapper = WrapRendered((
+ abc,
+ def ,
+ ]}
+ />
+ ));
+ expect(wrapper.children()).to.have.lengthOf(3);
+ expect(wrapper.children().at(0).hasClass('foo')).to.equal(true);
+ expect(wrapper.children().at(1).hasClass('bar')).to.equal(true);
+ expect(wrapper.children().at(2).hasClass('baz')).to.equal(true);
+ });
+ });
+
+ it('returns duplicates untouched', () => {
+ class Foo extends React.Component {
+ render() {
+ const foo = 'Foo';
+ return (
+
+ {foo} Bar {foo} Bar {foo}
+
+ );
+ }
+ }
+
+ const wrapper = Wrap({child} ,
+ );
+
+ const justifiedChildren = [];
+ React.Children.forEach(wrappedChildren, (child) => {
+ if (child) {
+ justifiedChildren.push(child, ' ');
+ }
+ });
+ justifiedChildren.pop();
+
+ return {justifiedChildren}
;
+ }
+ }
+
+ const wrapper = WrapRendered((
+
+ foo
+ bar
+ baz
+
+ ));
+
+ expect(wrapper.children().map(x => x.debug())).to.eql([
+ `
+
+ foo
+
+ `,
+ ...(isShallow ? [' '] : []),
+ `
+
+ bar
+
+ `,
+ ...(isShallow ? [' '] : []),
+ `
+
+ baz
+
+ `,
+ ]);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/closest.jsx b/packages/enzyme-test-suite/test/shared/methods/closest.jsx
new file mode 100644
index 000000000..a958e4cae
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/closest.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeClosest({
+ Wrap,
+}) {
+ describe('.closest(selector)', () => {
+ it('returns the closest ancestor for a given selector', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const closestFoo = wrapper.find('.bar').closest('.foo');
+ expect(closestFoo).to.have.lengthOf(1);
+ expect(closestFoo.hasClass('baz')).to.equal(true);
+ });
+
+ it('only ever returns a wrapper of a single node', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.baz').parent().hasClass('bar')).to.equal(true);
+ });
+
+ it('returns itself if matching', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.bux').closest('.baz').hasClass('bux')).to.equal(true);
+ });
+
+ it('does not find a nonexistent match', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.fooooo')).to.have.lengthOf(0);
+
+ const bar = wrapper.find('.bar');
+ expect(bar).to.have.lengthOf(1);
+
+ expect(bar.closest('.fooooo')).to.have.lengthOf(0);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/contains.jsx b/packages/enzyme-test-suite/test/shared/methods/contains.jsx
new file mode 100644
index 000000000..7500557d2
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/contains.jsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeContains({
+ Wrap,
+ WrapperName,
+ isMount,
+}) {
+ describe('.contains(node)', () => {
+ it('allows matches on the root node', () => {
+ const a =
;
+ const b =
;
+ const c =
;
+ const wrapper = Wrap(a);
+ expect(wrapper.contains(b)).to.equal(true);
+ expect(wrapper.contains(c)).to.equal(false);
+ });
+
+ it('allows matches on a nested node', () => {
+ const wrapper = Wrap((
+
+ ));
+ const b =
;
+ expect(wrapper.contains(b)).to.equal(true);
+ });
+
+ it('matches composite components', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ const wrapper = Wrap((
+
+
+ ));
+ const b = foo
);
+
+ expect(wrapper.contains('foo')).to.equal(true);
+ expect(wrapper.contains('bar')).to.equal(false);
+ });
+
+ it('works with numbers', () => {
+ const wrapper = Wrap({1}
);
+
+ expect(wrapper.contains(1)).to.equal(true);
+ expect(wrapper.contains(2)).to.equal(false);
+ expect(wrapper.contains('1')).to.equal(false);
+ });
+
+ it('works with nested strings & numbers', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.contains('foo')).to.equal(true);
+ expect(wrapper.contains(foo
)).to.equal(true);
+
+ expect(wrapper.contains(5)).to.equal(true);
+ expect(wrapper.contains({5}
)).to.equal(true);
+ });
+
+ it('does something with arrays of nodes', () => {
+ const wrapper = Wrap((
+
+
Hello
+
Goodbye
+
More
+
wrong ,
+ Goodbye
,
+ ];
+
+ const passes1 = [
+ Hello ,
+ Goodbye
,
+ ];
+ const passes2 = [
+ Goodbye
,
+ More ,
+ ];
+
+ expect(wrapper.contains(fails)).to.equal(false);
+ expect(wrapper.contains(passes1)).to.equal(true);
+ expect(wrapper.contains(passes2)).to.equal(true);
+ });
+
+ // FIXME: fix on mount
+ itIf(!isMount, 'throws on invalid argument', () => {
+ const wrapper = Wrap(
);
+
+ expect(() => wrapper.contains({})).to.throw(
+ Error,
+ `${WrapperName}::contains() can only be called with a ReactElement (or an array of them), a string, or a number as an argument.`,
+ );
+ expect(() => wrapper.contains(() => ({}))).to.throw(
+ Error,
+ `${WrapperName}::contains() can only be called with a ReactElement (or an array of them), a string, or a number as an argument.`,
+ );
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('matches composite components', () => {
+ function Foo() {
+ return
;
+ }
+
+ const wrapper = Wrap((
+
+
+ ));
+ const b =
;
+ }
+ const renderStatelessComponent = () =>
+ {renderStatelessComponent()}
+
+ ));
+ const b =
+ Hello
+
+ ));
+
+ expect(() => wrapper.containsAllMatchingElements((
+
+ Hello
+
+ ))).to.throw(TypeError, 'nodes should be an Array');
+ });
+
+ it('matches on array of nodes that each look like rendered nodes, with nested elements', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.containsAllMatchingElements([
+ Hello
,
+ Goodbye
,
+ ])).to.equal(true);
+ });
+
+ it('matches on an array of nodes that all look like one of the rendered nodes', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAllMatchingElements([
+ Hello World
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(spy1).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+
+ it('does not match on nodes that do not all look like one of the rendered nodes', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
Hello World
,
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(false);
+ expect(spy1).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/containsAnyMatchingElements.jsx b/packages/enzyme-test-suite/test/shared/methods/containsAnyMatchingElements.jsx
new file mode 100644
index 000000000..b6ca653ea
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/containsAnyMatchingElements.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeContainsAnyMatchingElements({
+ Wrap,
+}) {
+ describe('.containsAnyMatchingElements(nodes)', () => {
+ it('matches on an array with at least one node that looks like a rendered node', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(wrapper.containsAnyMatchingElements([
+ Bonjour le monde
,
+ Goodbye World
,
+ ])).to.equal(true);
+ expect(spy1).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+
+ it('does not match on an array with no nodes that look like a rendered node', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
Bonjour le monde
,
+ Au revoir le monde
,
+ ])).to.equal(false);
+ expect(spy1).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/containsMatchingElement.jsx b/packages/enzyme-test-suite/test/shared/methods/containsMatchingElement.jsx
new file mode 100644
index 000000000..6e2c6912b
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/containsMatchingElement.jsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeContainsMatchingElement({
+ Wrap,
+}) {
+ describe('.containsMatchingElement(node)', () => {
+ it('matches a root node that looks like the rendered one', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
+
Hello World
+
Goodbye World
+
Hello World
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(Goodbye World
)).to.equal(true);
+ expect(wrapper.containsMatchingElement((
+ Hello World
+ ))).to.equal(true);
+ expect(wrapper.containsMatchingElement((
+ Hello World
+ ))).to.equal(true);
+ expect(wrapper.containsMatchingElement((
+ Goodbye World
+ ))).to.equal(true);
+ expect(wrapper.containsMatchingElement((
+ Goodbye World
+ ))).to.equal(true);
+ expect(spy1).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+
+ it('does not match on a single node that doesn\'t looks like a rendered one', () => {
+ const spy1 = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+
Hello World
+
Goodbye World
+
Bonjour le monde
)).to.equal(false);
+ expect(wrapper.containsMatchingElement((
+ Au revoir le monde
+ ))).to.equal(false);
+ });
+
+ it('does not differentiate between absence, null, or undefined', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ expect(wrapper.containsMatchingElement(
)).to.equal(true);
+ });
+
+ it('works with leading and trailing spaces', () => {
+ const wrapper = Wrap((
+
+ All Operations
+
+ ));
+
+ expect(wrapper.containsMatchingElement( All Operations )).to.equal(true);
+ });
+
+ it('works with leading and trailing newlines', () => {
+ const wrapper = Wrap((
+
+
+ All Operations
+
+
+ ));
+
+ expect(wrapper.containsMatchingElement( All Operations )).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx
new file mode 100644
index 000000000..433953001
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/debug.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import { debugNodes } from 'enzyme/build/Debug';
+
+import {
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+import {
+ createClass,
+} from '../../_helpers/react-compat';
+
+export default function describeDebug({
+ Wrap,
+ isShallow,
+}) {
+ describe('.debug()', () => {
+ context('passes through to the debugNodes function', () => {
+ it('with wrapping an HTML element', () => {
+ const wrapper = Wrap(
);
+
+ expect(wrapper.debug()).to.equal('
');
+ expect(wrapper.debug()).to.equal(debugNodes(wrapper.getNodesInternal()));
+ });
+
+ it('with wrapping a createClass component', () => {
+ const Foo = createClass({
+ displayName: 'Bar',
+ render() { return
; },
+ });
+ const wrapper = Wrap(
'
+ : `
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ expect(wrapper.debug()).to.equal(debugNodes(wrapper.getNodesInternal()));
+ });
+
+ it('with wrapping a class component', () => {
+ class Foo extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ const wrapper = Wrap(
'
+ : `
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ expect(wrapper.debug()).to.equal(debugNodes(wrapper.getNodesInternal()));
+ });
+
+ itIf(is('> 0.13'), 'with wrapping a stateless function component (SFC)', () => {
+ const wrapper = Wrap(
);
+
+ expect(wrapper.debug()).to.equal('
');
+ expect(wrapper.debug()).to.equal(debugNodes(wrapper.getNodesInternal()));
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/equals.jsx b/packages/enzyme-test-suite/test/shared/methods/equals.jsx
new file mode 100644
index 000000000..a7eff0ca8
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/equals.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeEquals({
+ Wrap,
+ WrapRendered,
+}) {
+ describe('.equals(node)', () => {
+ it('allows matches on the root node', () => {
+ const a =
;
+ const b =
;
+ const c =
;
+
+ expect(Wrap(a).equals(b)).to.equal(true);
+ expect(Wrap(a).equals(c)).to.equal(false);
+ });
+
+ it('does NOT allow matches on a nested node', () => {
+ const wrapper = Wrap((
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(false);
+ });
+
+ it('matches composite components', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ const wrapper = Wrap((
+
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(true);
+ });
+
+ it('does not expand `node` content', () => {
+ class Bar extends React.Component {
+ render() { return
; }
+ }
+
+ class Foo extends React.Component {
+ render() { return
+ );
+
+ const wrapper = Wrap((
+
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(true);
+ });
+
+ it('does not expand `node` content', () => {
+ const Bar = () => (
+
+ );
+
+ const Foo = () => (
+
);
+ expect(wrapper.find('.bar').exists()).to.equal(false);
+ expect(wrapper.find('.foo').exists()).to.equal(true);
+ });
+ });
+ describe('with argument', () => {
+ it('throws on invalid EnzymeSelector', () => {
+ const wrapper = Wrap(
);
+
+ expect(() => wrapper.exists(null)).to.throw(TypeError);
+ expect(() => wrapper.exists(undefined)).to.throw(TypeError);
+ expect(() => wrapper.exists(45)).to.throw(TypeError);
+ expect(() => wrapper.exists({})).to.throw(TypeError);
+ });
+
+ it('returns .find(arg).exists() instead', () => {
+ const wrapper = Wrap(
);
+ const fakeFindExistsReturnVal = { toString() { return 'fake .find(arg).exists() return value'; } };
+ const fakeSelector = '.someClass';
+ wrapper.find = sinon.stub().returns({ exists() { return fakeFindExistsReturnVal; } });
+ const existsResult = wrapper.exists(fakeSelector);
+ expect(wrapper.find).to.have.property('callCount', 1);
+ expect(wrapper.find.firstCall.args[0]).to.equal(fakeSelector);
+ expect(existsResult).to.equal(fakeFindExistsReturnVal);
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/filter.jsx b/packages/enzyme-test-suite/test/shared/methods/filter.jsx
new file mode 100644
index 000000000..6395934ce
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/filter.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeFilter({
+ Wrap,
+}) {
+ describe('.filter(selector)', () => {
+ it('returns a new wrapper of just the nodes that matched the selector', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(3);
+ expect(wrapper.find('.bar').filter('.foo')).to.have.lengthOf(3);
+ expect(wrapper.find('.bar').filter('.bax')).to.have.lengthOf(0);
+ expect(wrapper.find('.foo').filter('.baz.bar')).to.have.lengthOf(2);
+ });
+
+ it('only looks in the current wrappers nodes, not their children', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(1);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/filterWhere.jsx b/packages/enzyme-test-suite/test/shared/methods/filterWhere.jsx
new file mode 100644
index 000000000..e97e6b0a4
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/filterWhere.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeFilterWhere({
+ Wrap,
+ Wrapper,
+}) {
+ describe('.filterWhere(predicate)', () => {
+ it('filters only the nodes of the wrapper', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const stub = sinon.stub();
+ stub.onCall(0).returns(false);
+ stub.onCall(1).returns(true);
+ stub.onCall(2).returns(false);
+
+ const baz = wrapper.find('.foo').filterWhere(stub);
+ expect(baz).to.have.lengthOf(1);
+ expect(baz.hasClass('baz')).to.equal(true);
+ });
+
+ it('calls the predicate with the wrapped node as the first argument', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const stub = sinon.stub();
+ stub.returns(true);
+ const spy = sinon.spy(stub);
+ wrapper.find('.foo').filterWhere(spy);
+ expect(spy).to.have.property('callCount', 3);
+ expect(spy.args[0][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[1][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[2][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[0][0].hasClass('bar')).to.equal(true);
+ expect(spy.args[1][0].hasClass('baz')).to.equal(true);
+ expect(spy.args[2][0].hasClass('bux')).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/find.jsx b/packages/enzyme-test-suite/test/shared/methods/find.jsx
new file mode 100644
index 000000000..c511f2973
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/find.jsx
@@ -0,0 +1,933 @@
+import React from 'react';
+import { expect } from 'chai';
+import wrap from 'mocha-wrap';
+import getData from 'html-element-map/getData';
+
+import getAdapter from 'enzyme/build/getAdapter';
+
+import {
+ describeIf,
+ describeWithDOM,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+import {
+ createPortal,
+ Fragment,
+ forwardRef,
+ memo,
+} from '../../_helpers/react-compat';
+
+export default function describeFind({
+ Wrap,
+ WrapRendered,
+ isShallow,
+ isMount,
+ hasDOM,
+ makeDOMElement,
+}) {
+ describe('.find(selector)', () => {
+ it('matches the root DOM element', () => {
+ const wrapper = Wrap(hello
);
+ expect(wrapper.find('#ttt')).to.have.lengthOf(1);
+ expect(wrapper.find('.ttt')).to.have.lengthOf(1);
+ });
+
+ it('finds an element based on a class name', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('.foo').type()).to.equal('input');
+ });
+
+ it('finds an SVG element based on a class name', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('.foo').type()).to.equal('svg');
+ });
+
+ it('finds an element that has dot in attribute', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const elements = wrapper.find('[data-baz="foo.bar"]');
+ expect(elements).to.have.lengthOf(1);
+ });
+
+ it('finds an element based on a tag name', () => {
+ const wrapper = Wrap((
+
+ Button
+
+
+ ));
+ expect(wrapper.find('input').props()).to.eql({ className: 'foo' });
+ expect(wrapper.find('button').props()).to.eql({
+ className: 'bar',
+ children: 'Button',
+ type: 'button',
+ });
+ expect(wrapper.find('textarea').props()).to.eql({ className: 'magic' });
+ expect(wrapper.find('select').props()).to.eql({ className: 'reality' });
+ });
+
+ it('finds an element based on a tag name and class name', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.find('input.foo')).to.have.lengthOf(1);
+ });
+
+ it('finds an element based on a tag name and id', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('input#foo')).to.have.lengthOf(1);
+ });
+
+ it('finds an element based on a tag name, id, and class name', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('input#foo.bar')).to.have.lengthOf(1);
+ });
+
+ it('finds an element that with class and attribute', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const elements = wrapper.find('.classBar[data-baz="bar"]');
+ expect(elements).to.have.lengthOf(1);
+ });
+
+ it('finds an element that with multiple classes and one attribute', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const elements = wrapper.find('.classBar.classFoo[data-baz="bar"]');
+ expect(elements).to.have.lengthOf(1);
+ });
+
+ it('finds an element that with class and class with hyphen', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const elements = wrapper.find('.classBar.class-Foo');
+ expect(elements).to.have.lengthOf(1);
+ });
+
+ it('finds a component based on a constructor', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find(Foo).type()).to.equal(Foo);
+ });
+
+ wrap()
+ .withOverride(() => getAdapter(), 'isValidElementType', () => () => false)
+ .it('throws when an adapter’s `isValidElementType` lies', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(() => wrapper.find(Foo)).to.throw(
+ TypeError,
+ 'Enzyme::Selector expects a string, object, or valid element type (Component Constructor)',
+ );
+ });
+
+ it('finds a component based on a component function name', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('Foo').type()).to.equal(Foo);
+ });
+
+ it('finds a component based on a component displayName', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+ Foo.displayName = 'Bar';
+
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('Bar').type()).to.equal(Foo);
+ });
+
+ it('finds multiple elements based on a class name', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('.foo')).to.have.lengthOf(2);
+ });
+
+ it('finds multiple elements based on a tag name', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('input')).to.have.lengthOf(2);
+ expect(wrapper.find('button')).to.have.lengthOf(1);
+ });
+
+ it('finds multiple elements based on a constructor', () => {
+ class Foo extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ class Bar extends React.Component {
+ render() {
+ return
;
+ }
+ }
+
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find(Foo)).to.have.lengthOf(2);
+ expect(wrapper.find(Bar)).to.have.lengthOf(1);
+ });
+
+ it('finds multiple elements based on a string prop', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('[htmlFor="foo"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[htmlFor]')).to.have.lengthOf(2);
+ expect(wrapper.find('[title="foo"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[title]')).to.have.lengthOf(1);
+ });
+
+ it('finds multiple elements with multiple matching react props', () => {
+ function noop() {}
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.lengthOf(1);
+ expect(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[htmlFor][preserveAspectRatio]')).to.have.lengthOf(1);
+ });
+
+ it('works on non-single nodes', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.find('.a')).to.have.lengthOf(1);
+ expect(wrapper.find('.b')).to.have.lengthOf(2);
+ expect(wrapper.find('.b').find('.c')).to.have.lengthOf(6);
+ });
+
+ it('works with an adjacent sibling selector', () => {
+ const a = 'some';
+ const b = 'text';
+ const wrapper = Wrap((
+
+
+ {a}
+ {b}
+
+
+ {a}
+ {b}
+
+
+
+ ));
+ expect(() => wrapper.find('[type=text]')).to.throw(
+ Error,
+ 'Failed to parse selector: [type=text]',
+ );
+ expect(() => wrapper.find('[type=hidden]')).to.throw(
+ Error,
+ 'Failed to parse selector: [type=hidden]',
+ );
+ expect(() => wrapper.find('[type="text"]')).to.not.throw(
+ Error,
+ 'Failed to parse selector: [type="text"]',
+ );
+ });
+
+ it('errors sensibly if any of the search props are undefined', () => {
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(() => wrapper.find({ type: undefined })).to.throw(
+ TypeError,
+ 'Enzyme::Props can’t have `undefined` values. Try using ‘findWhere()’ instead.',
+ );
+ });
+
+ it('does not find property when undefined', () => {
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(wrapper.find('[data-foo]')).to.have.lengthOf(0);
+ });
+
+ it('compounds tag and prop selector', () => {
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(wrapper.find('span[preserveAspectRatio="xMaxYMax"]')).to.have.lengthOf(1);
+ expect(wrapper.find('span[preserveAspectRatio]')).to.have.lengthOf(1);
+
+ expect(wrapper.find('span[htmlFor="foo"]')).to.have.lengthOf(1);
+ expect(wrapper.find('span[htmlFor]')).to.have.lengthOf(1);
+ });
+
+ it('supports data prop selectors', () => {
+ const wrapper = Wrap((
+
+
+ ));
+
+ expect(wrapper.find('[data-foo="bar"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-foo]')).to.have.lengthOf(1);
+
+ expect(wrapper.find('[data-foo-123]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-foo-123="bar2"]')).to.have.lengthOf(1);
+
+ expect(wrapper.find('[data-123-foo]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-123-foo="bar3"]')).to.have.lengthOf(1);
+
+ expect(wrapper.find('[data-foo_bar]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-foo_bar="bar4"]')).to.have.lengthOf(1);
+ });
+
+ it('supports boolean and numeric values for matching props', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('span[value=1]')).to.have.lengthOf(1);
+ expect(wrapper.find('span[value=2]')).to.have.lengthOf(0);
+ expect(wrapper.find('a[value=false]')).to.have.lengthOf(1);
+ expect(wrapper.find('a[value=true]')).to.have.lengthOf(0);
+ });
+
+ it('does not find key or ref via property selector', () => {
+ const arrayOfComponents = [
,
];
+
+ class Foo extends React.Component {
+ render() {
+ return (
+
+
+ {arrayOfComponents}
+
+
+ ));
+ expect(() => wrapper.find({})).to.throw(
+ TypeError,
+ 'Enzyme::Selector does not support an array, null, or empty object as a selector',
+ );
+ expect(() => wrapper.find([])).to.throw(
+ TypeError,
+ 'Enzyme::Selector does not support an array, null, or empty object as a selector',
+ );
+ expect(() => wrapper.find(null)).to.throw(
+ TypeError,
+ 'Enzyme::Selector does not support an array, null, or empty object as a selector',
+ );
+ });
+
+ it('queries attributes with spaces in their values', () => {
+ const wrapper = Wrap((
+
+
Hello
+ World
+
+ ));
+ expect(wrapper.find('[data-foo]')).to.have.lengthOf(2);
+ expect(wrapper.find('[data-foo="foo bar"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-foo="bar baz quz"]')).to.have.lengthOf(1);
+ expect(wrapper.find('[data-foo="bar baz"]')).to.have.lengthOf(0);
+ expect(wrapper.find('[data-foo="foo bar"]')).to.have.lengthOf(0);
+ expect(wrapper.find('[data-foo="bar baz quz"]')).to.have.lengthOf(0);
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('finds a component based on a constructor', () => {
+ const Foo = () => (
);
+
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find(Foo).type()).to.equal(Foo);
+ });
+
+ it('finds a component based on a function name', () => {
+ const Foo = () => (
);
+
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('Foo').type()).to.equal(Foo);
+ });
+
+ it('finds a component based on a displayName', () => {
+ const Foo = () => (
);
+ Foo.displayName = 'Bar';
+
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.find('Bar').type()).to.equal(Foo);
+ });
+
+ itIf(!isShallow, 'finds a stateless component based on a component displayName if rendered by function', () => {
+ const Foo = () =>
;
+ const renderStatelessComponent = () =>
+ {renderStatelessComponent()}
+
+ ));
+ expect(wrapper.find('Foo').type()).to.equal(Foo);
+ });
+
+ it('does not find key via property selector', () => {
+ const arrayOfComponents = [
,
];
+
+ const Foo = () => (
+
+ {arrayOfComponents}
+
+ );
+
+ const wrapper = WrapRendered(
+
+
+
+ );
+ }
+ }
+
+ it('finds elements by data attribute', () => {
+ const wrapper = WrapRendered(
+
+ A span
+ B span
+ A div
+
+ C span
+
+
+
D span
+
+
+
+
+ );
+ const wrapper = WrapRendered(
+ {createPortal(
+
InPortal
,
+ containerDiv,
+ )}
+
+ Successful Portal!
+
+ ));
+ });
+
+ it('finds elements', () => {
+ expect(wrapper.find('h1')).to.have.lengthOf(1);
+ expect(wrapper.find('span')).to.have.lengthOf(1);
+ });
+
+ itIf(hasDOM, 'finds elements with qSA', () => {
+ expect(containerDiv.querySelectorAll('h1')).to.have.lengthOf(1);
+ });
+ });
+ });
+
+ describeIf(is('>= 16.3'), 'forwardRef', () => {
+ it('finds forwardRefs', () => {
+ const Component = forwardRef(() =>
);
+ class Foo extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(
);
+ Component.displayName = 'CustomForwardRef';
+ class Foo extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(Hello
;
+ const InnerFoo = ({ foo }) => (
+
+ );
+ const Foo = memo(InnerFoo);
+
+ const wrapper = Wrap(
+
+
+
+
+ Hello
+
+
+
+
+ bar
+
+
+ qux
+
+
`;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
+ expect(wrapper.find('.bar')).to.have.lengthOf(1);
+ expect(wrapper.find('.qoo').text()).to.equal('qux');
+ });
+
+ // TODO; reevaluate
+ itIf(isShallow, 'throws with a class component', () => {
+ class InnerComp extends React.Component {
+ render() {
+ return Hello
;
+ }
+ }
+
+ class Foo extends React.Component {
+ render() {
+ const { foo } = this.props;
+ return (
+
+ );
+ }
+ }
+ const FooMemo = memo(Foo);
+
+ expect(() => Wrap(Hello
;
+ }
+ }
+
+ class Foo extends React.Component {
+ render() {
+ const { foo } = this.props;
+ return (
+
+ );
+ }
+ }
+ const FooMemo = memo(Foo);
+
+ const wrapper = Wrap(
+
+
+
+
+ Hello
+
+
+
+
+ bar
+
+
+ qux
+
+
`);
+ expect(wrapper.find('InnerComp')).to.have.lengthOf(1);
+ expect(wrapper.find('.bar')).to.have.lengthOf(1);
+ expect(wrapper.find('.qoo').text()).to.equal('qux');
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/findWhere.jsx b/packages/enzyme-test-suite/test/shared/methods/findWhere.jsx
new file mode 100644
index 000000000..d83cd3e43
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/findWhere.jsx
@@ -0,0 +1,420 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+import { Portal } from 'react-is';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import realArrowFunction from '../../_helpers/realArrowFunction';
+import { is } from '../../_helpers/version';
+
+import {
+ createPortal,
+ Fragment,
+} from '../../_helpers/react-compat';
+
+export default function describeFindWhere({
+ Wrap,
+ WrapRendered,
+ Wrapper,
+ isShallow,
+ makeDOMElement,
+}) {
+ describe('.findWhere(predicate)', () => {
+ it('returns all elements for a truthy test', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.findWhere(() => true)).to.have.lengthOf(3);
+ });
+
+ it('returns no elements for a falsy test', () => {
+ const wrapper = Wrap((
+
+
+ ));
+ expect(wrapper.findWhere(() => false)).to.have.lengthOf(0);
+ });
+
+ it('does not pass empty wrappers', () => {
+ class EditableText extends React.Component {
+ render() {
+ return {''}
;
+ }
+ }
+
+ const wrapper = WrapRendered(
+
+ );
+ }
+ }
+
+ const selector = 'blah';
+ const wrapper = Wrap(
+
+
+
+
+
+ );
+ }
+ }
+
+ const selector = 'blah';
+ const wrapper = Wrap(
+
+ );
+ }
+ }
+
+ const selector = 'blah';
+ const wrapper = Wrap(
+ Test
+ `
+ ));
+ });
+
+ class HasDataFoo extends React.Component {
+ render() {
+ const { data } = this.props;
+ return (
+ Test Component
+ );
+ }
+ }
+
+ it('returns props object when props() is called', () => {
+ const content = 'blah';
+ const wrapper = WrapRendered(
+ Test Component
+
`
+ : `
+
+ Test Component
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('finds nodes', () => {
+ const SFC = function SFC({ selector }) {
+ return (
+
+
+ );
+ };
+
+ const selector = 'blah';
+ const wrapper = Wrap(
+
+ );
+ };
+
+ const selector = 'blah';
+ const wrapper = Wrap(Test SFC
+ );
+ };
+
+ const content = 'blah';
+ const wrapper = WrapRendered(Test SFC
+ );
+ };
+
+ const content = 'blah';
+ const wrapper = Wrap(
+ Test SFC
+
`
+ : `
+
+ Test SFC
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ });
+
+ context('works with a nested SFC', () => {
+ const Bar = realArrowFunction(Hello
);
+ class Foo extends React.Component {
+ render() { return
+
+ foo bar
+ {null}
+ {false}
+
+ ));
+
+ const stub = sinon.stub();
+ wrapper.findWhere(stub);
+
+ const passedNodes = stub.getCalls().map(({ args: [firstArg] }) => firstArg);
+
+ const textContents = passedNodes.map(n => [n.debug(), n.text()]);
+ const expected = [
+ [wrapper.debug(), 'foo bar'], // root
+ ['
', ''], // first div
+ ['\n foo bar\n
', 'foo bar'], // second div
+ ['foo bar', 'foo bar'], // second div's contents
+ ];
+ expect(textContents).to.eql(expected);
+ });
+
+ it('does not pass in null or false nodes', () => {
+ const wrapper = Wrap((
+
+
+ foo bar
+ {null}
+ {false}
+
+ ));
+ const stub = sinon.stub();
+ wrapper.findWhere(stub);
+
+ const passedNodes = stub.getCalls().map(({ args: [firstArg] }) => firstArg);
+ const getElement = n => isShallow ? n.getElement() : n.getDOMNode();
+ const hasElements = passedNodes.map(n => [n.debug(), getElement(n) && true]);
+ const expected = [
+ [wrapper.debug(), true], // root
+ ['
', true], // first div
+ ['\n foo bar\n
', true], // second div
+ ['foo bar', null], // second div's contents
+ ];
+ expect(hasElements).to.eql(expected);
+
+ // the root, plus the 2 renderable children, plus the grandchild text
+ expect(stub).to.have.property('callCount', 4);
+ });
+
+ it('does not pass in null or false nodes', () => {
+ const wrapper = Wrap((
+
+ ));
+ const stub = sinon.stub();
+ stub.returns(true);
+ const spy = sinon.spy(stub);
+ wrapper.findWhere(spy);
+ expect(spy).to.have.property('callCount', 2);
+ });
+
+ itIf(is('>= 16'), 'finds portals by react-is Portal type', () => {
+ const containerDiv = makeDOMElement();
+ const Foo = () => (
+
+ {createPortal(
+
InPortal
,
+ containerDiv,
+ )}
+
+ );
+ }
+ }
+ const wrapper = Wrap(
+ );
+ }
+ }
+ const wrapper = Wrap(
+ );
+ }
+ }
+ const wrapper = Wrap(
+ {one}
+ {two}
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(
);
+ expect(() => wrapper.getNode()).to.throw(
+ `${WrapperName}::getNode() is no longer supported. Use ${WrapperName}::${isShallow ? 'getElement' : 'instance'}() instead`,
+ );
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/getNodes.jsx b/packages/enzyme-test-suite/test/shared/methods/getNodes.jsx
new file mode 100644
index 000000000..0db2ad34f
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/getNodes.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeGetNodes({
+ Wrap,
+ WrapperName,
+}) {
+ describe('.getNodes()', () => {
+ it('throws', () => {
+ const wrapper = Wrap(
);
+ expect(() => wrapper.getNodes()).to.throw(
+ `${WrapperName}::getNodes() is no longer supported.`,
+ );
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/hasClass.jsx b/packages/enzyme-test-suite/test/shared/methods/hasClass.jsx
new file mode 100644
index 000000000..e2bf9a254
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/hasClass.jsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeHasClass({
+ Wrap,
+ WrapRendered,
+ isShallow,
+ isMount,
+}) {
+ describe('.hasClass(className)', () => {
+ function FooSFC() {
+ return
;
+ }
+ class Foo extends React.Component {
+ render() {
+ return FooSFC();
+ }
+ }
+ class Bar extends React.Component {
+ render() {
+ return
);
+
+ expect(wrapper.hasClass('foo')).to.equal(true);
+ expect(wrapper.hasClass('bar')).to.equal(true);
+ expect(wrapper.hasClass('baz')).to.equal(true);
+ expect(wrapper.hasClass('some-long-string')).to.equal(true);
+ expect(wrapper.hasClass('FoOo')).to.equal(true);
+ expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
+ });
+ });
+
+ describeIf(is('> 0.13'), 'with stateless function components (SFCs)', () => {
+ it('returns whether or not rendered node has a certain class', () => {
+ const wrapper = WrapRendered(
;
+ }
+ }
+ const obj = { classA: true, classB: false };
+ const wrapper = Wrap(
);
+ expect(wrapper.hasClass('foo-bar')).to.equal(true);
+ });
+
+ it('works if className has a function in toString property', () => {
+ function classes() {}
+ classes.toString = () => 'foo-bar';
+ const wrapper = Wrap(
);
+ expect(wrapper.hasClass('foo-bar')).to.equal(true);
+ });
+
+ it('works if searching with a RegExp', () => {
+ const wrapper = Wrap(
);
+ expect(wrapper.hasClass(/(ComponentName)-(classname)-(\d+)/)).to.equal(true);
+ expect(wrapper.hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(false);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/hostNodes.jsx b/packages/enzyme-test-suite/test/shared/methods/hostNodes.jsx
new file mode 100644
index 000000000..4e58f4acf
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/hostNodes.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeHostNodes({
+ Wrap,
+ WrapRendered,
+}) {
+ describe('.hostNodes()', () => {
+ it('strips out any non-hostNode', () => {
+ class Foo extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ const wrapper = Wrap((
+
+
+
+ ));
+
+ const foos = wrapper.find('main > .foo');
+ expect(foos).to.have.lengthOf(2);
+
+ const hostNodes = foos.hostNodes();
+ expect(hostNodes).to.have.lengthOf(1);
+
+ expect(hostNodes.is('div')).to.equal(true);
+ expect(hostNodes.hasClass('foo')).to.equal(true);
+ });
+
+ it('does NOT allow matches on a nested node', () => {
+ const wrapper = Wrap((
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(false);
+ });
+
+ it('matches composite components', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+
+ const wrapper = Wrap((
+
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(true);
+ });
+
+ it('does not expand `node` content', () => {
+ class Bar extends React.Component {
+ render() { return
; }
+ }
+
+ class Foo extends React.Component {
+ render() { return
+ );
+
+ const wrapper = Wrap((
+
+
+ ));
+ const b =
;
+ expect(wrapper.equals(b)).to.equal(true);
+ });
+
+ it('does not expand `node` content', () => {
+ const Bar = () => (
+
+ );
+
+ const Foo = () => (
+
+ Hello World!
+
+ ));
+ expect(wrapper.html()).to.equal('Hello World!
');
+ });
+
+ it('renders out nested composite components', () => {
+ class Foo extends React.Component {
+ render() {
+ return (
);
+ }
+ }
+ class Bar extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+ }
+ const wrapper = Wrap(
');
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('renders out nested composite components', () => {
+ const Foo = () =>
;
+ const Bar = () => (
+
+
+ );
+
+ const wrapper = Wrap(
');
+ });
+ });
+
+ describeIf(is('>16.2'), 'Fragments', () => {
+ class FragmentClassExample extends React.Component {
+ render() {
+ return (
+
+ Foo
+ Bar
+
+ );
+ }
+ }
+
+ const FragmentConstExample = () => (
+
+ Foo
+ Bar
+
+ );
+
+ class ClassChild extends React.Component {
+ render() {
+ return Class child
;
+ }
+ }
+
+ function SFCChild() {
+ return SFC child
;
+ }
+
+ class FragmentWithCustomChildClass extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+ }
+
+ it('correctly renders html for both children for class', () => {
+ const classWrapper = Wrap(Foo
Bar
');
+ });
+
+ it('correctly renders html for both children for const', () => {
+ const constWrapper = Wrap(Foo
Bar
');
+ });
+
+ it('correctly renders html for custom component children', () => {
+ const withChildrenWrapper = Wrap(Class child
SFC child
');
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/instance.jsx b/packages/enzyme-test-suite/test/shared/methods/instance.jsx
new file mode 100644
index 000000000..b535bb54b
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/instance.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeInstance({
+ Wrap,
+ WrapperName,
+ isShallow,
+}) {
+ describe('.instance()', () => {
+ it('returns the component instance', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+
+ const wrapper = Wrap(
;
+ }
+
+ itIf(is('>= 16'), 'has no instance', () => {
+ const wrapper = Wrap(
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(
);
+ expect(wrapper.is('.foo')).to.equal(true);
+ });
+
+ it('allows for compound selectors', () => {
+ const wrapper = Wrap(
);
+ expect(wrapper.is('.foo.bar')).to.equal(true);
+ });
+
+ it('ignores insignificant whitespace', () => {
+ const className = `
+ foo
+ `;
+ const wrapper = Wrap(
);
+ expect(wrapper.is('.foo')).to.equal(true);
+ });
+
+ it('handles all significant whitespace', () => {
+ const className = `foo
+
+ bar
+ baz`;
+ const wrapper = Wrap(
);
+ expect(wrapper.is('.foo.bar.baz')).to.equal(true);
+ });
+
+ it('returns false when selector does not match', () => {
+ const wrapper = Wrap(
);
+ expect(wrapper.is('.foo')).to.equal(false);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/isEmpty.jsx b/packages/enzyme-test-suite/test/shared/methods/isEmpty.jsx
new file mode 100644
index 000000000..f02d338e5
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/isEmpty.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeLast({
+ Wrap,
+}) {
+ describe('.isEmpty()', () => {
+ let warningStub;
+ let fooNode;
+ let missingNode;
+
+ beforeEach(() => {
+ warningStub = sinon.stub(console, 'warn');
+ const wrapper = Wrap(
);
+ fooNode = wrapper.find('.foo');
+ missingNode = wrapper.find('.missing');
+ });
+ afterEach(() => {
+ warningStub.restore();
+ });
+
+ it('displays a deprecation warning', () => {
+ fooNode.isEmpty();
+ expect(warningStub.calledWith('Enzyme::Deprecated method isEmpty() called, use exists() instead.')).to.equal(true);
+ });
+
+ it('calls exists() instead', () => {
+ const existsSpy = sinon.spy();
+ fooNode.exists = existsSpy;
+ expect(fooNode.isEmpty()).to.equal(true);
+ expect(existsSpy).to.have.property('called', true);
+ });
+
+ it('returns true if wrapper is empty', () => {
+ expect(fooNode.isEmpty()).to.equal(false);
+ expect(missingNode.isEmpty()).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/isEmptyRender.jsx b/packages/enzyme-test-suite/test/shared/methods/isEmptyRender.jsx
new file mode 100644
index 000000000..b1e282500
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/isEmptyRender.jsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+ itWithData,
+ generateEmptyRenderData,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+import {
+ createClass,
+} from '../../_helpers/react-compat';
+
+export default function describeIsEmptyRender({
+ Wrap,
+ isShallow,
+}) {
+ describe('.isEmptyRender()', () => {
+ const emptyRenderValues = generateEmptyRenderData();
+
+ itWithData(emptyRenderValues, 'when a React createClass component returns: ', (data) => {
+ const Foo = createClass({
+ render() {
+ return data.value;
+ },
+ });
+ const wrapper = Wrap(
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(!isShallow);
+ });
+
+ it('returns false for multiple nested elements that all return null', () => {
+ const wrapper = Wrap((
+
+
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(false);
+ });
+
+ it('returns false for multiple nested elements where one fringe returns a non null value', () => {
+ const wrapper = Wrap((
+
+ Hello
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(false);
+ });
+
+ itIf(is('>= 16'), 'returns false for multiple nested elements that all return null', () => {
+ const wrapper = Wrap((
+
+
+
+
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(false);
+ });
+
+ itIf(is('>= 16'), 'returns false for multiple nested elements where one fringe returns a non null value', () => {
+ const wrapper = Wrap((
+
+
+
+
+
+ Hello
+
+
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(false);
+ });
+
+ itIf(is('>= 16'), `returns ${!isShallow} for multiple nested elements where all values are null`, () => {
+ const wrapper = Wrap((
+
+
+
+
+
+
+
+
+ ));
+
+ expect(wrapper.isEmptyRender()).to.equal(!isShallow);
+ });
+ });
+
+ it('does not return true for HTML elements', () => {
+ const wrapper = Wrap(
);
+ expect(wrapper.isEmptyRender()).to.equal(false);
+ });
+
+ describeIf(is('>=15 || ^16.0.0-alpha'), 'stateless function components (SFCs)', () => {
+ itWithData(emptyRenderValues, 'when a component returns: ', (data) => {
+ function Foo() {
+ return data.value;
+ }
+ const wrapper = Wrap(
+ {['foo', 'bar', ''].map(s => {s} )}
+
+ )).find('li');
+ expect(wrapper.at(0).key()).to.equal('foo');
+ expect(wrapper.at(1).key()).to.equal('bar');
+ expect(wrapper.at(2).key()).to.equal('');
+ });
+
+ it('returns null when no key is specified', () => {
+ const wrapper = Wrap((
+
+ )).find('li');
+ expect(wrapper.key()).to.equal(null);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/last.jsx b/packages/enzyme-test-suite/test/shared/methods/last.jsx
new file mode 100644
index 000000000..f89c9a88e
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/last.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeLast({
+ Wrap,
+}) {
+ describe('.last()', () => {
+ it('returns the last node in the current set', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.find('.bar').last().hasClass('baz')).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/map.jsx b/packages/enzyme-test-suite/test/shared/methods/map.jsx
new file mode 100644
index 000000000..2a13d7b2e
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/map.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeMap({
+ Wrap,
+ Wrapper,
+}) {
+ describe('.map(fn)', () => {
+ it('calls a function with a wrapper for each node in the wrapper', () => {
+ const wrapper = Wrap((
+
+ ));
+ const spy = sinon.spy();
+
+ wrapper.find('.foo').map(spy);
+
+ expect(spy).to.have.property('callCount', 3);
+ expect(spy.args[0][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[0][0].hasClass('bax')).to.equal(true);
+ expect(spy.args[0][1]).to.equal(0);
+ expect(spy.args[1][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[1][0].hasClass('bar')).to.equal(true);
+ expect(spy.args[1][1]).to.equal(1);
+ expect(spy.args[2][0]).to.be.instanceOf(Wrapper);
+ expect(spy.args[2][0].hasClass('baz')).to.equal(true);
+ expect(spy.args[2][1]).to.equal(2);
+ });
+
+ it('returns an array with the mapped values', () => {
+ const wrapper = Wrap((
+
+ ));
+ const result = wrapper.find('.foo').map(w => w.props().className);
+
+ expect(result).to.eql([
+ 'foo bax',
+ 'foo bar',
+ 'foo baz',
+ ]);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/matchesElement.jsx b/packages/enzyme-test-suite/test/shared/methods/matchesElement.jsx
new file mode 100644
index 000000000..bd71d93cb
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/matchesElement.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+export default function describeMatchesElement({
+ Wrap,
+ WrapRendered,
+}) {
+ describe('.matchesElement(node)', () => {
+ it('matches on a root node that looks like the rendered one', () => {
+ const spy = sinon.spy();
+ const wrapper = Wrap((
+
+ )).first();
+ expect(wrapper.matchesElement()).to.equal(true);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(true);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(true);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(true);
+ expect(spy).to.have.property('callCount', 0);
+ });
+
+ it('does not match on a root node that doesn’t looks like the rendered one', () => {
+ const spy = sinon.spy();
+ const spy2 = sinon.spy();
+ const wrapper = Wrap((
+
+ )).first();
+ expect(wrapper.matchesElement()).to.equal(false);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(false);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(false);
+ expect(wrapper.matchesElement((
+
+ ))).to.equal(false);
+ expect(spy).to.have.property('callCount', 0);
+ expect(spy2).to.have.property('callCount', 0);
+ });
+
+ it('matches a simple node', () => {
+ class Test extends React.Component {
+ render() {
+ return test ;
+ }
+ }
+ const wrapper = WrapRendered(test )).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/name.jsx b/packages/enzyme-test-suite/test/shared/methods/name.jsx
new file mode 100644
index 000000000..78da42027
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/name.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { expect } from 'chai';
+import wrap from 'mocha-wrap';
+import sinon from 'sinon-sandbox';
+
+import getAdapter from 'enzyme/build/getAdapter';
+
+import {
+ describeIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+import {
+ createClass,
+} from '../../_helpers/react-compat';
+
+export default function describeName({
+ Wrap,
+ WrapRendered,
+}) {
+ wrap()
+ .withOverride(() => getAdapter(), 'displayNameOfNode', () => undefined)
+ .describe('.name()', () => {
+ describe('node with displayName', () => {
+ it('returns the displayName of the node', () => {
+ class Foo extends React.Component {
+ render() { return
; }
+ }
+
+ class FooWrapper extends React.Component {
+ render() { return
;
+ }
+ const SFCWrapper = () =>
;
+ },
+ });
+ const FooWrapper = createClass({
+ render() {
+ return
; }
+ }
+ const stub = getAdapter().displayNameOfNode;
+ const sentinel = {};
+ stub.returns(sentinel);
+
+ const wrapper = Wrap(
; }
+ }
+
+ class FooWrapper extends React.Component {
+ render() { return
;
+ }
+ const SFCWrapper = () =>
);
+ expect(wrapper.name()).to.equal('div');
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/not.jsx b/packages/enzyme-test-suite/test/shared/methods/not.jsx
new file mode 100644
index 000000000..63d8a09cd
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/not.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeNot({
+ Wrap,
+}) {
+ describe('.not(selector)', () => {
+ it('filters to things not matching a selector', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);
+ expect(wrapper.find('.baz').not('.foo')).to.have.lengthOf(2);
+ expect(wrapper.find('.foo').not('div')).to.have.lengthOf(0);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/parent.jsx b/packages/enzyme-test-suite/test/shared/methods/parent.jsx
new file mode 100644
index 000000000..7ff26689a
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/parent.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ itIf,
+} from '../../_helpers';
+
+import {
+ createClass,
+} from '../../_helpers/react-compat';
+
+export default function describeParent({
+ Wrap,
+ isShallow,
+}) {
+ describe('.parent()', () => {
+ it('returns only the immediate parent of the node', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.find('.baz').parent().hasClass('bar')).to.equal(true);
+ });
+
+ it('works when the sibling node has children', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.baz').parent().hasClass('bar')).to.equal(true);
+ });
+
+ it('works for multiple nodes', () => {
+ const wrapper = Wrap((
+
+ ));
+
+ const parents = wrapper.find('.baz').parent();
+ expect(parents).to.have.lengthOf(3);
+ expect(parents.at(0).hasClass('foo')).to.equal(true);
+ expect(parents.at(1).hasClass('bar')).to.equal(true);
+ expect(parents.at(2).hasClass('bax')).to.equal(true);
+ });
+
+ itIf(isShallow, 'works with component', () => {
+ const Foo = createClass({
+ render() {
+ return
;
+ },
+ });
+ const wrapper = Wrap(
;
+ },
+ });
+ const wrapper = Wrap(
+ A child
+
`);
+ expect(aChild).to.have.lengthOf(1);
+
+ const bChild = wrapper.find({ children: 'B child' });
+ expect(bChild.debug()).to.equal(`
+ B child
+
`);
+ expect(bChild).to.have.lengthOf(1);
+
+ const bChildParents = bChild.parents('.b');
+ expect(bChildParents.debug()).to.equal(``);
+ expect(bChildParents).to.have.lengthOf(1);
+
+ const aChildParents = aChild.parents('.a');
+ expect(aChildParents.debug()).to.equal(``);
+ expect(aChildParents).to.have.lengthOf(1);
+ });
+
+ itIf(!isShallow, 'works with components in the tree', () => {
+ const Foo = createClass({
+ render() {
+ return
;
+ },
+ });
+ const wrapper = Wrap((
+
+
+ ));
+ const rootDiv = wrapper.find('.root');
+ expect(rootDiv).to.have.lengthOf(1);
+ expect(rootDiv.hasClass('root')).to.equal(true);
+ expect(rootDiv.hasClass('bar')).to.equal(false);
+
+ const bar = rootDiv.find('.bar');
+ expect(bar).to.have.lengthOf(1);
+ expect(bar.parents('.root')).to.have.lengthOf(1);
+ });
+
+ itIf(!isShallow, 'finds parents up a tree through a custom component boundary', () => {
+ class CustomForm extends React.Component {
+ render() {
+ const { children } = this.props;
+ return (
+
+ );
+ }
+ }
+
+ const wrapper = Wrap((
+
+
+
+
+ ));
+
+ const formDown = wrapper.find('form');
+ expect(formDown).to.have.lengthOf(1);
+
+ const input = wrapper.find('input');
+ expect(input).to.have.lengthOf(1);
+ const formUp = input.parents('form');
+ expect(formUp).to.have.lengthOf(1);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/prop.jsx b/packages/enzyme-test-suite/test/shared/methods/prop.jsx
new file mode 100644
index 000000000..a32e7f79f
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/prop.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+export default function describeProp({
+ Wrap,
+ WrapRendered,
+ isMount,
+}) {
+ describe('.prop(name)', () => {
+ it('returns the prop value for [name]', () => {
+ const fn = () => {};
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.prop('className')).to.equal('bax');
+ expect(wrapper.prop('onClick')).to.equal(fn);
+ expect(wrapper.prop('id')).to.equal('fooId');
+ });
+
+ it('is allowed to be used on an inner node', () => {
+ const fn = () => {};
+ const wrapper = Wrap((
+
+ ));
+
+ expect(wrapper.find('.baz').prop('onClick')).to.equal(fn);
+ expect(wrapper.find('.foo').prop('id')).to.equal('fooId');
+ });
+
+ class Foo extends React.Component {
+ render() {
+ const { bar, foo } = this.props;
+ return (
+
+ );
+ }
+ }
+
+ itIf(isMount, 'called on root should return props of root node', () => {
+ const wrapper = Wrap(
+ );
+
+ itIf(isMount, 'called on root should return props of root node', () => {
+ const wrapper = Wrap(
+ );
+ }
+ }
+
+ itIf(isMount, 'called on root should return props of root node', () => {
+ const wrapper = Wrap(
+ );
+
+ itIf(isMount, 'called on root should return props of root node', () => {
+ const wrapper = Wrap(
+ ));
+
+ const StrictReceiver = function SFC(
+ props = { NO_PROPS: true },
+ context,
+ ) {
+ return (
+
+ );
+ };
+
+ it('does not provide a `this` to a sloppy-mode SFC', () => {
+ const wrapper = WrapRendered(
);
+ const two = (
);
+ const three = (
);
+ const wrapper = Wrap((
+
+ {one}
+ {two}
+ {three}
+
+ ));
+ const counter = (
);
+ const two = (
);
+ const three = (
);
+ const wrapper = Wrap((
+
+ {one}
+ {two}
+ {three}
+
+ ));
+ const counter = (
);
+ }
+ }
+
+ class Bar extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(
+ );
+
+ const Bar = () => (
+
+
+ );
+
+ const wrapper = Wrap(
;
+ }
+ }
+ class Bar extends React.Component {
+ render() {
+ const { render: r } = this.props;
+ return {r()}
;
+ }
+ }
+
+ const wrapperA = Wrap();
+ const renderPropWrapperA = wrapperA.find(Bar).renderProp('render')();
+ expect(renderPropWrapperA.find(Foo)).to.have.lengthOf(1);
+
+ const wrapperB = Wrap(
);
+ const renderPropWrapperB = wrapperB.find(Bar).renderProp('render')();
+ expect(renderPropWrapperB.find(Foo)).to.have.lengthOf(1);
+
+ const stub = sinon.stub().returns(
);
+ const wrapperC = Wrap(
);
+ stub.resetHistory();
+ wrapperC.find(Bar).renderProp('render')('one', 'two');
+ expect(stub.args).to.deep.equal([['one', 'two']]);
+ });
+
+ it('throws on host elements', () => {
+ class Div extends React.Component {
+ render() {
+ const { children } = this.props;
+ return {children}
;
+ }
+ }
+
+ const wrapper = WrapRendered(
);
+ expect(wrapper.is('div')).to.equal(true);
+ expect(() => wrapper.renderProp('foo')).to.throw();
+ });
+
+ wrap()
+ .withOverride(() => getAdapter(), 'wrap', () => undefined)
+ .it('throws with a react adapter that lacks a `.wrap`', () => {
+ class Foo extends React.Component {
+ render() {
+ return
;
+ }
+ }
+ class Bar extends React.Component {
+ render() {
+ const { render: r } = this.props;
+ return {r()}
;
+ }
+ }
+
+ const wrapper = Wrap();
+ expect(() => wrapper.find(Bar).renderProp('render')).to.throw(RangeError);
+ });
+
+ describeIf(is('>= 16'), 'allows non-nodes', () => {
+ function MyComponent({ val }) {
+ return x} />;
+ }
+
+ function ComponentWithRenderProp({ val, r }) {
+ return r(val);
+ }
+
+ it('works with strings', () => {
+ const wrapper = Wrap(
;
+ }
+ }
+
+ itIf(isMount, 'returns the root component instance', () => {
+ const wrapper = Wrap({name}
;
+ },
+ });
+
+ it('sets context for a component multiple times', () => {
+ const context = { name: 'foo' };
+ const wrapper = Wrap({name}
+ );
+ SFC.contextTypes = { name: PropTypes.string };
+
+ it('sets context for a component multiple times', () => {
+ const context = { name: 'foo' };
+ const wrapper = Wrap(
+ {foo}
+
+ );
+ }
+ }
+ const wrapper = Wrap(
+ {foo}
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(
+ bar
+
+ `.trim()
+ : `
+
+
+ bar
+
+
+ `.trim();
+ expect(wrapper.debug()).to.equal(expectedPreDebug);
+ expect(rendered().props()).to.eql({
+ className: 'foo',
+ children: 'bar',
+ });
+ expect(wrapper.instance().props).to.eql({
+ id: 'foo',
+ foo: 'bar',
+ });
+
+ wrapper.setProps({ id: 'bar' });
+
+ const expectedPostDebug = isShallow
+ ? `
+
+ bar
+
+ `.trim()
+ : `
+
+
+ bar
+
+
+ `.trim();
+ expect(wrapper.debug()).to.equal(expectedPostDebug);
+ expect(rendered().props()).to.eql({
+ className: 'bar',
+ children: 'bar',
+ });
+ expect(wrapper.instance().props).to.eql({
+ id: 'bar',
+ foo: 'bar',
+ });
+ });
+
+ itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
+ function Foo({ id, foo }) {
+ return (
+
+ {foo}
+
+ );
+ }
+ const wrapper = Wrap(
+ bar
+
+ `.trim()
+ : `
+
+
+ bar
+
+
+ `.trim();
+ expect(wrapper.debug()).to.equal(expectedPreDebug);
+ expect(rendered().props()).to.eql({
+ className: 'foo',
+ children: 'bar',
+ });
+ if (is('< 16')) {
+ expect(wrapper.instance().props).to.eql({
+ id: 'foo',
+ foo: 'bar',
+ });
+ }
+
+ wrapper.setProps({ id: 'bar' });
+
+ const expectedPostDebug = isShallow
+ ? `
+
+ bar
+
+ `.trim()
+ : `
+
+
+ bar
+
+
+ `.trim();
+ expect(wrapper.debug()).to.equal(expectedPostDebug);
+ expect(rendered().props()).to.eql({
+ className: 'bar',
+ children: 'bar',
+ });
+ if (is('< 16')) {
+ expect(wrapper.instance().props).to.eql({
+ id: 'bar',
+ foo: 'bar',
+ });
+ }
+ });
+
+ it('merges, not replaces, props when no rerender is needed', () => {
+ class Foo extends React.Component {
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ const { id, foo } = this.props;
+ return (
+
+ {foo}
+
+ );
+ }
+ }
+ const wrapper = Wrap(
+ bar
+
+ `.trim()
+ : `
+
+
+ bar
+
+
+ `.trim();
+ expect(wrapper.debug()).to.equal(expectedPreDebug);
+ expect(rendered().props()).to.eql({
+ className: 'foo',
+ children: 'bar',
+ });
+ expect(wrapper.instance().props).to.eql({
+ id: 'foo',
+ foo: 'bar',
+ });
+
+ wrapper.setProps({ id: 'foo' });
+
+ expect(wrapper.debug()).to.equal(expectedPreDebug);
+ expect(rendered().props()).to.eql({
+ className: 'foo',
+ children: 'bar',
+ });
+ expect(wrapper.instance().props).to.eql({
+ id: 'foo',
+ foo: 'bar',
+ });
+ });
+ });
+
+ it('calls componentWillReceiveProps for new renders', () => {
+ const stateValue = {};
+
+ class Foo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { stateValue };
+ }
+
+ componentWillReceiveProps() {}
+
+ UNSAFE_componentWillReceiveProps() {} // eslint-disable-line camelcase
+
+ render() {
+ const { id } = this.props;
+ const { stateValue: val } = this.state;
+ return (
+
+ {String(val)}
+
+ );
+ }
+ }
+ Foo.contextTypes = {
+ foo() { return null; },
+ };
+ const cWRP = sinon.stub(Foo.prototype, 'componentWillReceiveProps');
+ // eslint-disable-next-line camelcase
+ const U_cWRP = sinon.stub(Foo.prototype, 'UNSAFE_componentWillReceiveProps');
+
+ const nextProps = { id: 'bar', foo: 'bla' };
+ const context = { foo: 'bar' };
+ const wrapper = Wrap(
+ );
+ }
+ }
+
+ const wrapper = Wrap({x}
+ );
+ }
+ }
+
+ Foo.contextTypes = { x: PropTypes.string };
+
+ const context = { x: 'yolo' };
+ const wrapper = Wrap(
;
+ }
+ }
+
+ const cWRP = sinon.stub(Foo.prototype, 'componentWillReceiveProps');
+
+ Foo.defaultProps = {
+ className: 'default-class',
+ };
+ Foo.contextTypes = {
+ b: PropTypes.number,
+ };
+
+ const wrapper = Wrap(
+ {user.name.givenName}
+
+ );
+ } catch (e) {
+ error = e;
+ throw e;
+ }
+ }
+ }
+
+ const validUser = {
+ name: {
+ givenName: 'Brian',
+ },
+ };
+
+ const wrapper = Wrap(
+ {id}
+
+ );
+ }
+ }
+ const wrapper = Wrap(
+ );
+ }
+ }
+
+ const wrapper = Wrap(
+ myProp: {myProp}
+ someState: {someState}
+
+ );
+ }
+ }
+
+ const spy = sinon.spy(Dummy.prototype, 'componentDidUpdate');
+ const wrapper = Wrap(
+ {id}
+
+ );
+
+ const wrapper = Wrap(
+ );
+
+ const wrapper = Wrap({x}
+ );
+ Foo.contextTypes = { x: PropTypes.string };
+
+ const context = { x: 'yolo' };
+ const wrapper = Wrap(
+ {user.name.givenName}
+
+ );
+ } catch (e) {
+ error = e;
+ throw e;
+ }
+ };
+
+ const validUser = {
+ name: {
+ givenName: 'Brian',
+ },
+ };
+
+ const wrapper = Wrap(
+ );
+ }
+ }
+
+ class HasMountedState extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { mounted: false };
+ }
+
+ componentDidMount() {
+ this.setState({ mounted: true });
+ }
+
+ render() {
+ const { mounted } = this.state;
+ return {mounted ? 'a' : 'b'}
;
+ }
+ }
+
+ class RendersNull extends React.Component {
+ render() {
+ return null;
+ }
+ }
+
+ it('throws on a non-function callback', () => {
+ const wrapper = Wrap({a}
);
+ }
+ }
+ const spy = sinon.spy(A.prototype, 'componentWillReceiveProps');
+
+ const wrapper = Wrap(
+ {a + b}
+
+ );
+ }
+ }
+ const spy = sinon.spy(B.prototype, 'componentWillReceiveProps');
+
+ const wrapper = Wrap(abc
+ );
+
+ const wrapper = Wrap(abc
+ );
+
+ const wrapper = Wrap(
+ {prop} - {state}
+
+ );
+ }
+ }
+
+ class Parent extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = { childProp: 1 };
+ }
+
+ render() {
+ const { childProp } = this.state;
+ return
+
+
+ 1
+ -${' '}
+ a
+
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+
+ return new Promise((resolve) => {
+ wrapper.setState({ childProp: 2 }, () => {
+ const expectedPostDebug = isShallow
+ ? '
+
+
+ 2
+ -${' '}
+ a
+
+
+ `;
+ expect(wrapper.debug()).to.equal(expectedPostDebug);
+ resolve();
+ });
+ });
+ });
+
+ itIf(isShallow, 'can not set the state of the stateful child of a stateful root', () => {
+ const wrapper = Wrap(
+ foo
+
+ );
+ }
+ }
+
+ const wrapper = Wrap(foo
);
+ expect(() => wrapper.simulate('invalidEvent')).to.throw(
+ TypeError,
+ `${WrapperName}::simulate() event 'invalidEvent' does not exist`,
+ );
+ });
+
+ // FIXME: figure out why this hangs forever
+ itIf(!isMount, 'passes in event data', () => {
+ const spy = sinon.spy();
+ class Clicker extends React.Component {
+ render() {
+ return (foo );
+ }
+ }
+
+ const wrapper = Wrap(foo );
+
+ it('simulates events', () => {
+ const spy = sinon.spy();
+ const wrapper = Wrap(foo );
+ }
+ }
+
+ const wrapper = Wrap(foo
+ );
+ }
+ }
+
+ const wrapper = Wrap(foo
+ );
+
+ const wrapper = Wrap(foo
+ );
+ }
+ }
+
+ const wrapper = Wrap(foo );
+
+ const wrapper = Wrap(foo );
+ }
+ }
+
+ const wrapper = Wrap(foo );
+
+ const wrapper = Wrap({count}
+ );
+ }
+ }
+
+ const wrapper = Wrap(
);
+ expect(wrapper.simulate('click')).to.equal(wrapper);
+ });
+
+ describe('works with .parent()/.parents()/.closest()', () => {
+ let onClick;
+ let wrapper;
+ beforeEach(() => {
+ onClick = sinon.stub();
+ wrapper = Wrap((
+
+
+ click me
+
+
+ ));
+ });
+
+ itIf(!isShallow, 'child should fire onClick', () => {
+ wrapper.find('.child-elem').simulate('click');
+ expect(onClick).to.have.property('callCount', 1);
+ });
+
+ it('parents should fire onClick', () => {
+ wrapper.find('.child-elem').parents('.parent-elem').simulate('click');
+ expect(onClick).to.have.property('callCount', 1);
+ });
+
+ it('closest should fire onClick', () => {
+ wrapper.find('.child-elem').closest('.parent-elem').simulate('click');
+ expect(onClick).to.have.property('callCount', 1);
+ });
+
+ // FIXME: figure out why this breaks in `mount` with "Cannot read property '__reactInternalInstance$ukkwkcm5yvc' of null"
+ itIf(!isMount, 'parent should fire onClick', () => {
+ wrapper.find('.child-elem').parent().simulate('click');
+ expect(onClick).to.have.property('callCount', 1);
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/simulateError.jsx b/packages/enzyme-test-suite/test/shared/methods/simulateError.jsx
new file mode 100644
index 000000000..f892279b1
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/simulateError.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon-sandbox';
+
+import {
+ sym,
+} from 'enzyme/build/Utils';
+
+import {
+ itIf,
+} from '../../_helpers';
+
+export default function describeSimulateError({
+ Wrap,
+ WrapRendered,
+ isShallow,
+}) {
+ describe('.simulateError(error)', () => {
+ class Div extends React.Component {
+ render() {
+ const { children } = this.props;
+ return {children}
;
+ }
+ }
+
+ class Spans extends React.Component {
+ render() {
+ return
;
+ }
+ }
+
+ class Nested extends React.Component {
+ render() {
+ return
;
+ }
+ }
+
+ it('throws on host elements', () => {
+ const wrapper = WrapRendered(
);
+ expect(wrapper.is('div')).to.equal(true);
+ expect(() => wrapper.simulateError()).to.throw();
+ });
+
+ it('throws on "not one" node', () => {
+ const wrapper = Wrap(
).children();
+ expect(wrapper).to.have.lengthOf(2);
+ expect(() => wrapper.single('name!')).to.throw(
+ Error,
+ 'Method “name!” is meant to be run on 1 node. 2 found instead.',
+ );
+ });
+
+ it('throws if run on zero nodes', () => {
+ const wrapper = Wrap(
).children();
+ expect(wrapper).to.have.lengthOf(0);
+ expect(() => wrapper.single('name!')).to.throw(
+ Error,
+ 'Method “name!” is meant to be run on 1 node. 0 found instead.',
+ );
+ });
+
+ it('throws if run on zero nodes', () => {
+ const wrapper = Wrap(
).children();
+ expect(wrapper).to.have.lengthOf(0);
+ expect(() => wrapper.single('name!')).to.throw(
+ Error,
+ 'Method “name!” is meant to be run on 1 node. 0 found instead.',
+ );
+ });
+
+ it('works with a name', () => {
+ const wrapper = Wrap(
);
+ wrapper.single('foo', (node) => {
+ expect(node).to.equal(wrapper[sym('__node__')]);
+ });
+ });
+
+ it('works without a name', () => {
+ const wrapper = Wrap(
);
+ wrapper.single((node) => {
+ expect(node).to.equal(wrapper[sym('__node__')]);
+ });
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/slice.jsx b/packages/enzyme-test-suite/test/shared/methods/slice.jsx
new file mode 100644
index 000000000..ff3fb0061
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/slice.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeSlice({
+ Wrap,
+}) {
+ describe('.slice([begin[, end]])', () => {
+ it('returns an identical wrapper if no params are set', () => {
+ const wrapper = Wrap((
+
+ ));
+ const slice = wrapper.find('.foo').slice();
+ expect(slice).to.have.lengthOf(3);
+ expect(slice.at(0).hasClass('bax')).to.equal(true);
+ expect(slice.at(1).hasClass('bar')).to.equal(true);
+ expect(slice.at(2).hasClass('baz')).to.equal(true);
+ });
+
+ it('returns a new wrapper if begin is set', () => {
+ const wrapper = Wrap((
+
+ ));
+ const slice = wrapper.find('.foo').slice(1);
+ expect(slice).to.have.lengthOf(2);
+ expect(slice.at(0).hasClass('bar')).to.equal(true);
+ expect(slice.at(1).hasClass('baz')).to.equal(true);
+ });
+
+ it('returns a new wrapper if begin and end are set', () => {
+ const wrapper = Wrap((
+
+ ));
+ const slice = wrapper.find('.foo').slice(1, 2);
+ expect(slice).to.have.lengthOf(1);
+ expect(slice.at(0).hasClass('bar')).to.equal(true);
+ });
+
+ it('returns a new wrapper if begin and end are set (negative)', () => {
+ const wrapper = Wrap((
+
+ ));
+ const slice = wrapper.find('.foo').slice(-2, -1);
+ expect(slice).to.have.lengthOf(1);
+ expect(slice.at(0).hasClass('bar')).to.equal(true);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/some.jsx b/packages/enzyme-test-suite/test/shared/methods/some.jsx
new file mode 100644
index 000000000..229b48cd1
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/some.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeSome({
+ Wrap,
+ WrapperName,
+}) {
+ describe('.some(selector)', () => {
+ it('returns if a node matches a selector', () => {
+ const wrapper = Wrap((
+
+ ));
+ const foo = wrapper.find('.foo');
+ expect(foo.some('.qoo')).to.equal(true);
+ expect(foo.some('.foo')).to.equal(true);
+ expect(foo.some('.bar')).to.equal(false);
+ });
+
+ it('throws if called on root', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(() => wrapper.some('.foo')).to.throw(
+ Error,
+ `${WrapperName}::some() can not be called on the root`,
+ );
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/someWhere.jsx b/packages/enzyme-test-suite/test/shared/methods/someWhere.jsx
new file mode 100644
index 000000000..48207c1c2
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/someWhere.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { expect } from 'chai';
+
+export default function describeSomeWhere({
+ Wrap,
+}) {
+ describe('.someWhere(predicate)', () => {
+ it('returns if a node matches a predicate', () => {
+ const wrapper = Wrap((
+
+ ));
+ const foo = wrapper.find('.foo');
+ expect(foo.someWhere(n => n.hasClass('qoo'))).to.equal(true);
+ expect(foo.someWhere(n => n.hasClass('foo'))).to.equal(true);
+ expect(foo.someWhere(n => n.hasClass('bar'))).to.equal(false);
+ });
+ });
+}
diff --git a/packages/enzyme-test-suite/test/shared/methods/state.jsx b/packages/enzyme-test-suite/test/shared/methods/state.jsx
new file mode 100644
index 000000000..a09a528d3
--- /dev/null
+++ b/packages/enzyme-test-suite/test/shared/methods/state.jsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import { expect } from 'chai';
+
+import {
+ describeIf,
+ itIf,
+} from '../../_helpers';
+import { is } from '../../_helpers/version';
+
+import {
+ createPortal,
+} from '../../_helpers/react-compat';
+
+export default function describeState({
+ Wrap,
+ WrapperName,
+ isShallow,
+ makeDOMElement,
+}) {
+ describe('.state([name])', () => {
+ class HasFooState extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { foo: 'foo' };
+ }
+
+ render() {
+ const { foo } = this.state;
+ return {foo}
;
+ }
+ }
+
+ it('returns the state object', () => {
+ const wrapper = Wrap(
);
+
+ expect(() => wrapper.state()).to.throw(Error, `${WrapperName}::state() can only be called on class components`);
+ });
+
+ itIf(is('>= 16'), 'throws on Portals', () => {
+ const containerDiv = makeDOMElement();
+ const portal = createPortal(
+
,
+ containerDiv,
+ );
+
+ const wrapper = Wrap({portal}
);
+ expect(() => wrapper.state()).to.throw(Error, `${WrapperName}::state() can only be called on class components`);
+ });
+
+ describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+ it('throws on SFCs', () => {
+ function FooSFC() {
+ return
;
+ }
+
+ const wrapper = Wrap(
+ {prop} - {state}
+
+ );
+ }
+ }
+
+ class Parent extends React.Component {
+ constructor(...args) {
+ super(...args);
+ this.state = { childProp: 1 };
+ }
+
+ render() {
+ const { childProp } = this.state;
+ return some text
+ ));
+ expect(wrapper.text()).to.equal('some text');
+ });
+
+ it('handles nodes with mapped children', () => {
+ class Foo extends React.Component {
+ render() {
+ const { items } = this.props;
+ return (
+
+ {items.map(x => x)}
+
+ );
+ }
+ }
+ matchesRender(abc,
+ def ,
+ hij ,
+ ]}
+ />
+ ));
+ });
+
+ context('composite components', () => {
+ class Foo extends React.Component {
+ render() { return foo
; }
+ }
+
+ itIf(isShallow, 'renders dumbly', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.text()).to.equal('>
);
+ });
+
+ it('handles spaces the same between shallow and mount', () => {
+ const Space = (
+
+
test
+
Hello
+
+
+ World
+
+
Hello World
+
Hello
+ World
+
+
Hello World
+
+
+
+
+
+ );
+ }
+ }
+ const wrapper = Wrap(
+ {items.map(x => x)}
+
+ );
+ matchesRender(abc,
+ def ,
+ hij ,
+ ]}
+ />
+ ));
+ });
+
+ const FooSFC = () => (
+ foo
+ );
+
+ itIf(isShallow, 'renders composite components dumbly', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.text()).to.equal('{x}
);
+ expect(wrapper.text()).to.equal(String(x));
+ });
+ });
+
+ describe('text content with curly braces', () => {
+ it('handles literal strings', () => {
+ const wrapper = Wrap();
+ expect(wrapper.text()).to.equal('{}');
+ });
+
+ // FIXME: fix for shallow
+ itIf(!isShallow, 'handles innerHTML', () => {
+ const wrapper = Wrap((
+
+ ));
+ expect(wrapper.text()).to.equal('{ some text }');
+ });
+ });
+
+ describeIf(is('> 16.2'), 'fragments', () => {
+ class FragmentClassExample extends React.Component {
+ render() {
+ return (
+
+ Foo
+ Bar
+
+ );
+ }
+ }
+
+ const FragmentConstExample = () => (
+
+ Foo
+ Bar
+
+ );
+
+ it('correctly gets text for both children for class', () => {
+ const classWrapper = Wrap({children} ;
+ const Foobar = () => (
+
+ Foo
+ Bar
+
+ );
+
+ const wrapper = Wrap(
+
+ Foo
+
+ Bar
+ `
+ : `
+
+ <span>
+ Foo
+ </span>
+
+ Bar
+ `;
+ expect(wrapper.debug()).to.equal(expectedDebug);
+ expect(text).to.equal(isShallow ? '
+ {id}
+
+ );
+ }
+ }
+
+ it('calls componentWillUnmount()', () => {
+ const spy = sinon.spy(WillUnmount.prototype, 'componentWillUnmount');
+ const wrapper = Wrap(
);
+ const wrapperFoo = Wrap(