Hello
Hello
)).to.equal(true);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains()).to.equal(false);
```
```jsx
const wrapper = mount((
Hello
));
expect(wrapper.contains([
Hello,
Goodbye
Again
Goodbye
,
])).to.equal(true);
expect(wrapper.contains([
Hello,
World
,
])).to.equal(false);
```
#### Common Gotchas
- `.contains()` expects a ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with a ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
- Every attribute of the wrapped element must be matched by the element you're checking. To permit (and ignore) additional attributes on the wrapped element, use containsMatchingElement() instead.
================================================
FILE: docs/api/ReactWrapper/containsAllMatchingElements.md
================================================
# `.containsAllMatchingElements(patternNodes) => Boolean`
Returns whether or not all of the given react elements in `patternNodes` match an element in the wrapper's render tree. Every single element of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.
#### Arguments
1. `patternNodes` (`Array
Hello
));
expect(wrapper.containsAllMatchingElements([
Hello,
Goodbye
Again
Goodbye
,
])).to.equal(true);
```
#### Common Gotchas
- `.containsAllMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with an array of ReactElement or a JSX expression.
- Keep in mind that this method determines matching based on the matching of the node's children as
well.
#### Related Methods
- [`.matchesElement() => ReactWrapper`](matchesElement.md) - rules for matching each node
- [`.containsMatchingElement() => ReactWrapper`](containsMatchingElement.md) - rules for matching whole wrapper
- [`.containsAnyMatchingElements() => ReactWrapper`](containsAnyMatchingElements.md) - must match at least one in patternNodes
================================================
FILE: docs/api/ReactWrapper/containsAnyMatchingElements.md
================================================
# `.containsAnyMatchingElements(patternNodes) => Boolean`
Returns whether or not at least one of the given react elements in `patternNodes` matches an element in the wrapper's render tree. One or more elements of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.
#### Arguments
1. `patternNodes` (`Array
Hello
));
expect(wrapper.containsAnyMatchingElements([
Bonjour,
Goodbye
Again
Goodbye
,
])).to.equal(true);
```
#### Common Gotchas
- `.containsAnyMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with an array ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
#### Related Methods
- [`.matchesElement() => ReactWrapper`](matchesElement.md) - rules for matching each node
- [`.containsMatchingElement() => ReactWrapper`](containsMatchingElement.md) - rules for matching whole wrapper
- [`.containsAllMatchingElements() => ReactWrapper`](containsAllMatchingElements.md) - must match all nodes in patternNodes
================================================
FILE: docs/api/ReactWrapper/containsMatchingElement.md
================================================
# `.containsMatchingElement(patternNode) => Boolean`
Returns whether or not a `patternNode` react element matches any element in the render tree.
* the matches can happen anywhere in the wrapper's contents
* the wrapper can contain more than one node; all are searched
Otherwise, the match follows the same rules as `matchesElement`.
#### Arguments
1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the current instance's
render tree.
#### Returns
`Boolean`: whether or not the current wrapper has a node anywhere in its render tree that matches
the one passed in.
#### Example
```jsx
const wrapper = mount((
Hello
Hello
)).to.equal(true);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(true);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(false);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(false);
expect(wrapper.containsMatchingElement()).to.equal(false);
```
#### Common Gotchas
- `.containsMatchingElement()` expects a ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with a ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
#### Related Methods
- [`.containsAllMatchingElements() => ReactWrapper`](containsAllMatchingElements.md) - must match all nodes in patternNodes
- [`.containsAnyMatchingElements() => ReactWrapper`](containsAnyMatchingElements.md) - must match at least one in patternNodes
================================================
FILE: docs/api/ReactWrapper/context.md
================================================
# `.context([key]) => Any`
Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it
will return just that value.
#### Arguments
1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the
root component instance.
#### Example
```jsx
const wrapper = mount(
Foo
);
}
function Bar() {
return (
Non-Foo
);
}
```
In this case, running:
```jsx
console.log(mount(
Non-Foo
Foo
Foo
Foo
Foo
{one}
{two}
);
}
const wrapper = mount(` versus ``.
#### Returns
`ReactWrapper`: A new wrapper that wraps the filtered nodes.
#### Examples
The following code takes a wrapper with two nodes, one a `` React component, and the other a ``, and filters out the React component.
```jsx
const wrapper = mount((
`
Maps the current array of nodes to another array. Each node is passed in as a `ReactWrapper`
to the map function.
#### Arguments
1. `fn` (`Function ( ReactWrapper node, Number index ) => Any`): A mapping function to be run for every node in
the collection, the results of which will be mapped to the returned array. Should expect a ReactWrapper as the first argument, and will be run with a context of
the original instance.
#### Returns
`Array`: Returns an array of the returned values from the mapping function..
#### Example
```jsx
const wrapper = mount((
));
const texts = wrapper.find('.foo').map((node) => node.text());
expect(texts).to.eql(['bax', 'bar', 'baz']);
```
#### Related Methods
- [`.forEach(fn) => ReactWrapper`](forEach.md)
- [`.reduce(fn[, initialValue]) => Any`](reduce.md)
- [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
================================================
FILE: docs/api/ReactWrapper/matchesElement.md
================================================
# `.matchesElement(patternNode) => Boolean`
Returns whether or not a given react element `patternNode` matches the wrapper's render tree. It must be a single-node wrapper, and only the root node is checked.
The `patternNode` acts like a wildcard. For it to match a node in the wrapper:
* tag names must match
* contents must match: In text nodes, leading and trailing spaces are ignored, but not space in the middle. Child elements must match according to these rules, recursively.
* `patternNode` props (attributes) must appear in the wrapper's nodes, but not the other way around. Their values must match if they do appear.
* `patternNode` style CSS properties must appear in the wrapper's node's style, but not the other way around. Their values must match if they do appear.
#### Arguments
1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the wrapper's single node.
#### Returns
`Boolean`: whether or not the current wrapper match the one passed in.
#### Example
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// ...
}
render() {
return (
);
}
}
const wrapper = mount(`](map.md)
================================================
FILE: docs/api/ReactWrapper/reduceRight.md
================================================
# `.reduceRight(fn[, initialValue]) => Any`
Applies the provided reducing function to every node in the wrapper to reduce to a single value.
Each node is passed in as a `ReactWrapper`, and is processed from right to left.
#### Arguments
1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
following arguments:
- `value` (`T`): The value returned by the previous invocation of this function
- `node` (`ReactWrapper`): A single-node wrapper around the node being processed
- `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.
#### Returns
`T`: Returns an array of the returned values from the mapping function...
#### Example
```jsx
function Foo() {
return (
`](map.md)
================================================
FILE: docs/api/ReactWrapper/ref.md
================================================
# `.ref(refName) => ReactComponent | HTMLElement`
Returns the node that matches the provided reference name.
NOTE: can only be called on a wrapper instance that is also the root instance.
#### Arguments
1. `refName` (`String`): The ref attribute of the node
#### Returns
`ReactComponent | HTMLElement`: The node that matches the provided reference name. This can be a react component instance, or an HTML element instance.
#### Examples
```jsx
class Foo extends React.Component {
render() {
return (
`):
This essentially calls `wrapper.prop(propName)(...args)`.
#### Returns
`ReactWrapper`: A new wrapper that wraps the node returned from the render prop.
#### Examples
##### Test Setup
```jsx
class Mouse extends React.Component {
constructor() {
super();
this.state = { x: 0, y: 0 };
}
render() {
const { render } = this.props;
return (
(
);
}
```
##### Testing with no arguments
```jsx
const wrapper = mount( {
testState[e.target.name] = e.target.value;
}}
/>
));
expect(wrapper.find('input').at(0).props().value).to.equal(10);
expect(wrapper.find('input').at(1).props().value).to.equal(20);
wrapper.find('input').at(0).simulate('change', { target: { name: 'width', value: 50 } });
wrapper.find('input').at(1).simulate('change', { target: { name: 'height', value: 70 } });
expect(testState.width).to.equal(50);
expect(testState.height).to.equal(70);
```
#### Common Gotchas
- As noted in the function signature above passing a mock event is optional. It is worth noting that `ReactWrapper` will pass a `SyntheticEvent` object to the event handler in your code. Keep in mind that if the code you are testing uses properties that are not included in the `SyntheticEvent`, for instance `event.target.value`, you will need to provide a mock event like so `.simulate("change", { target: { value: "foo" }})` for it to work.
================================================
FILE: docs/api/ReactWrapper/simulateError.md
================================================
# `.simulateError(error) => Self`
Simulate a component throwing an error as part of its rendering lifecycle.
This is particularly useful in combination with React 16 error boundaries (ie, the `componentDidCatch` and `static getDerivedStateFromError` lifecycle methods).
#### Arguments
1. `error` (`Any`): The error to throw.
#### Returns
`ReactWrapper`: Returns itself.
#### Example
```jsx
function Something() {
// this is just a placeholder
return null;
}
class ErrorBoundary extends React.Component {
static getDerivedStateFromError(error) {
return {
hasError: true,
};
}
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
const { spy } = this.props;
spy(error, info);
}
render() {
const { children } = this.props;
const { hasError } = this.state;
return (
{hasError ? 'Error' : children}
);
}
}
ErrorBoundary.propTypes = {
children: PropTypes.node.isRequired,
spy: PropTypes.func.isRequired,
};
const spy = sinon.spy();
const wrapper = mount(`): The node or array of nodes whose presence you are detecting in the current instance's
render tree.
#### Returns
`Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that match
the ones passed in.
#### Example
```jsx
const wrapper = shallow((
));
expect(wrapper.contains(
));
expect(wrapper.contains(`): The array of nodes whose presence you are detecting in the current instance's
render tree.
#### Returns
`Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that looks
like the nodes passed in.
#### Example
```jsx
const style = { fontSize: 13 };
const wrapper = shallow((
`): The array of nodes whose presence you are detecting in the current instance's
render tree.
#### Returns
`Boolean`: whether or not the current wrapper has a node anywhere in its render tree that looks
like one of the array passed in.
#### Example
```jsx
const style = { fontSize: 13 };
const wrapper = shallow((
));
expect(wrapper.containsMatchingElement(
```
```jsx
const wrapper = shallow((
`](getElements.md)
================================================
FILE: docs/api/ShallowWrapper/getElements.md
================================================
# `.getElements() => Array`
Returns the wrapped ReactElements
If the current wrapper is wrapping the root component, returns the root component's latest render output wrapped in an array.
#### Returns
`Array`: The retrieved ReactElements.
#### Examples
```jsx
const one = ;
const two = ;
function Test() {
return (
{children}
);
}
MyProvider.propTypes = {
children: PropTypes.node,
customStore: PropTypes.shape({}),
};
MyProvider.defaultProps = {
children: null,
customStore: null,
};
const wrapper = shallow(
`,
);
});
});
describe('.mount()', () => {
it('calls componentWillUnmount()', () => {
const willMount = sinon.spy();
const didMount = sinon.spy();
const willUnmount = sinon.spy();
class Foo extends React.Component {
constructor(props) {
super(props);
this.componentWillUnmount = willUnmount;
this.componentWillMount = willMount;
this.componentDidMount = didMount;
}
render() {
const { id } = this.props;
return (
this.onIncrement()} />
);
}
}
const wrapper = mount( this.onIncrement()} />
);
}
};
});
const wrapper = mount(
1
));
const children = wrapper.childAt(0).children();
expect(children).to.have.lengthOf(2);
const span = children.at(0);
expect(span.is('span')).to.equal(true);
const spanProps = span.props();
expect(spanProps).to.have.keys({
children: 1,
'data-foo': 1,
onClick: spanProps.onClick,
});
expect(spanProps.onClick).to.be.a('function');
const div = children.at(1);
expect(div.is('div')).to.equal(true);
const divProps = div.props();
expect(divProps).to.have.keys({
children: 2,
'data-bar': 2,
onClick: divProps.onClick,
});
expect(divProps.onClick).to.be.a('function');
});
});
});
================================================
FILE: packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import wrap from 'mocha-wrap';
import inspect from 'object-inspect';
import {
shallow,
ShallowWrapper,
} from 'enzyme';
import shallowEntry from 'enzyme/shallow';
import ShallowWrapperEntry from 'enzyme/ShallowWrapper';
import {
withSetStateAllowed,
} from 'enzyme/build/Utils';
import getAdapter from 'enzyme/build/getAdapter';
import { fakeDynamicImport } from 'enzyme-adapter-utils';
import './_helpers/setupAdapters';
import {
createClass,
createContext,
createPortal,
forwardRef,
Fragment,
lazy,
memo,
Profiler,
Suspense,
useCallback,
} from './_helpers/react-compat';
import {
describeIf,
itIf,
} from './_helpers';
import describeMethods from './_helpers/describeMethods';
import describeLifecycles from './_helpers/describeLifecycles';
import describeHooks from './_helpers/describeHooks';
import {
is,
} from './_helpers/version';
describe('shallow', () => {
describe('top level entry points', () => {
expect(shallowEntry).to.equal(shallow);
expect(ShallowWrapperEntry).to.equal(ShallowWrapper);
});
describe('top level wrapper', () => {
it('does what i expect', () => {
class Box extends React.Component {
render() {
const { children } = this.props;
return
);
}
}
const wrapper = shallow(
);
}
}
class MyComponent extends React.Component {
render() {
const {
testContext,
renderMore = true,
renderStateTester,
explicitContext,
} = this.context;
return (
{children}
);
}
function Component() {
return (
{(value1) => (
{(value2) => (
)}
);
}
it('renders', () => {
const wrapper = shallow({(value) => {value}}
);
}
}
class Provides extends React.Component {
render() {
return (
{(value) =>
,
);
expect(wrapper.debug()).to.eql(`
[function]
`.trim());
});
it('supports changing the value', () => {
const wrapper = shallow(
{(value) =>
,
);
wrapper.setProps({ value: 'world' });
expect(wrapper.find(Context.Consumer).dive().text()).to.eql('world');
});
});
describe('
{(value) => {value} }
,
);
expect(wrapper.debug()).to.eql(`
cool
`.trim());
});
it('supports changing the children', () => {
const wrapper = shallow(
{(value) => {value} }
,
);
wrapper.setProps({ children: (value) => Changed: {value} });
expect(wrapper.find(DivRenderer).dive().text()).to.eql('Changed: cool');
});
});
});
describe('dive() on Provider and Consumer', () => {
let Provider;
let Consumer;
beforeEach(() => {
({ Provider, Consumer } = React.createContext('howdy!'));
});
class Consumes extends React.Component {
render() {
return (
{(value) => {value}}
);
}
}
class Provides extends React.Component {
render() {
const { children } = this.props;
return (
{(value) => {value}}
);
}
}
class Provides extends React.Component {
render() {
const { children } = this.props;
return (
);
}
}
let fooProviderSpy;
let barProviderSpy;
beforeEach(() => {
fooProviderSpy = sinon.spy(FooProvider.prototype, 'getChildContext');
barProviderSpy = sinon.spy(BarProvider.prototype, 'getChildContext');
});
afterEach(() => {
fooProviderSpy.restore();
barProviderSpy.restore();
});
describeIf(is('<= 0.13'), 'owner-based context', () => {
it('is not implemented', () => {
const wrapper = shallow(
))).to.throw('FaultyFooProvider.getChildContext(): key "foo" is not defined in childContextTypes');
});
it('allows overriding context with the context option', () => {
const wrapper = shallow(
`);
});
it('shows portal container in shallow debug tree', () => {
const Foo = () => (
`);
});
it('shows nested portal children in shallow debug tree', () => {
const Bar = () => null;
const Foo = () => (
`);
});
it('has top level portals in debug tree', () => {
const Foo = () => (
createPortal(
`);
});
});
describeIf(is('>= 16.4'), 'Profiler', () => {
function SomeComponent() {
return (
{}}>
);
}
wrap()
.withConsoleThrows()
.it('mounts without complaint', () => {
expect(() => shallow(
`);
});
it('finds elements through Profiler elements', () => {
const wrapper = shallow(
);
}
const wrapper = shallow(
);
}
const wrapper = shallow(
));
expect(wrapper).to.throw('ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`.');
});
const Wrap = shallow;
const Wrapper = ShallowWrapper;
describeMethods(
{ Wrap, Wrapper },
'deprecatedInstanceProperties',
'@@iterator',
'at',
'childAt',
'children',
'closest',
'contains',
'containsAllMatchingElements',
'containsAnyMatchingElements',
'containsMatchingElement',
'context',
'debug',
'equals',
'every',
'everyWhere',
'exists',
'filter',
'filterWhere',
'find',
'findWhere',
'first',
'flatMap',
'forEach',
'get',
'getElement',
'getElements',
'getNode',
'getNodes',
'getWrappingComponent',
'hasClass',
'hostNodes',
'html',
'instance',
'invoke',
'is',
'isEmpty',
'isEmptyRender',
'key',
'last',
'map',
'matchesElement',
'name',
'not',
'parent',
'parents',
'prop',
'props',
'reduce',
'reduceRight',
'render',
'renderProp',
'root',
'setContext',
'setProps',
'setState',
'simulate',
'simulateError',
'single',
'slice',
'some',
'someWhere',
'state',
'tap',
'text',
'unmount',
'wrap',
);
describeLifecycles(
{ Wrap, Wrapper },
'componentDidCatch',
'componentDidMount',
'componentDidUpdate',
'componentWillUnmount',
'getDerivedStateFromError',
'getDerivedStateFromProps',
'getSnapshotBeforeUpdate',
'misc',
);
describeHooks(
{ Wrap, Wrapper },
'useCallback',
'useContext',
'useDebugValue',
'useEffect',
'useImperativeHandle',
'useLayoutEffect',
'useMemo',
'useReducer',
'useRef',
'useState',
'custom',
);
describe('.shallow()', () => {
it('returns a shallow rendered instance of the current node', () => {
class Bar extends React.Component {
render() {
return (
);
}
}
class Foo extends React.Component {
render() {
return (
`);
});
it('works with Suspense with multiple children if options.suspenseFallback=false', () => {
const wrapper = shallow((
`);
});
it('finds LazyComponent when render component wrapping lazy component', () => {
const LazyComponent = lazy(() => fakeDynamicImport(DynamicComponent));
const SuspenseComponent = () => (
`);
});
it('renders lazy component when render Suspense without option', () => {
const LazyComponent = lazy(() => fakeDynamicImport(DynamicComponent));
const wrapper = shallow((
`);
});
it('replaces LazyComponent with Fallback when render Suspense if options.suspenseFallback=true', () => {
const LazyComponent = lazy(() => fakeDynamicImport(DynamicComponent));
const wrapper = shallow((
`);
});
it('throws if options.suspenseFallback is not boolean or undefined', () => {
const LazyComponent = lazy(() => fakeDynamicImport(DynamicComponent));
const SuspenseComponent = () => (
hello world {requiredString}
);
}
}
MyComponent.propTypes = {
fallback: PropTypes.node.isRequired,
requiredString: PropTypes.string.isRequired,
};
function MySFC({ fallback, requiredString }) {
return (
hello world {requiredString}
);
}
MySFC.propTypes = MyComponent.propTypes;
wrap()
.withConsoleThrows()
.it('renders with no propType errors with a string fallback', () => {
shallow(
);
}
}
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showTable: false,
};
}
componentDidMount() {
this.setState({ showTable: true });
}
render() {
const { showTable } = this.state;
return ( this.onIncrement()} />
);
}
}
const wrapper = shallow( this.onIncrement()} />
);
}
};
});
const wrapper = shallow(
1
));
const children = wrapper.children();
expect(children).to.have.lengthOf(2);
const span = children.at(0);
expect(span.is('span')).to.equal(true);
const spanProps = span.props();
expect(spanProps).to.have.keys({
children: 1,
'data-foo': 1,
onClick: spanProps.onClick,
});
expect(spanProps.onClick).to.be.a('function');
const div = children.at(1);
expect(div.is('div')).to.equal(true);
const divProps = div.props();
expect(divProps).to.have.keys({
children: 2,
'data-bar': 2,
onClick: divProps.onClick,
});
expect(divProps.onClick).to.be.a('function');
});
});
});
================================================
FILE: packages/enzyme-test-suite/test/Utils-spec.jsx
================================================
import React from 'react';
import { expect } from 'chai';
import wrap from 'mocha-wrap';
import sinon from 'sinon-sandbox';
import {
childrenToSimplifiedArray,
nodeEqual,
nodeMatches,
displayNameOfNode,
spyMethod,
spyProperty,
nodeHasType,
isCustomComponentElement,
makeOptions,
isEmptyValue,
renderedDive,
isCustomComponent,
loadCheerioRoot,
AND,
} from 'enzyme/build/Utils';
import getAdapter from 'enzyme/build/getAdapter';
import EnzymeAdapter from 'enzyme/build/EnzymeAdapter';
import {
flatten,
mapNativeEventNames,
propFromEvent,
} from 'enzyme-adapter-utils';
import { get, reset, merge as configure } from 'enzyme/build/configuration';
import './_helpers/setupAdapters';
import { describeIf } from './_helpers';
import { is } from './_helpers/version';
describe('Utils', () => {
describe('nodeEqual', () => {
it('matches empty elements of same tag', () => {
expect(nodeEqual(
,
,
)).to.equal(true);
});
it('does not match empty elements of different type', () => {
expect(nodeEqual(
,
,
)).to.equal(false);
});
it('matches basic prop types', () => {
expect(nodeEqual(
,
,
)).to.equal(true);
expect(nodeEqual(
,
,
)).to.equal(true);
expect(nodeEqual(
,
,
)).to.equal(false);
});
it('skips undefined props', () => {
expect(nodeEqual(
,
,
)).to.equal(true);
});
it('checks children as well', () => {
expect(nodeEqual(
,
,
)).to.equal(false);
expect(nodeEqual(
,
,
)).to.equal(true);
expect(nodeEqual(
,
,
)).to.equal(true);
expect(nodeEqual(
,
,
)).to.equal(false);
});
it('tests deepEquality with object props', () => {
expect(nodeEqual(
,
,
)).to.equal(true);
expect(nodeEqual(
,
,
)).to.equal(false);
});
describe('children props', () => {
it('matches equal nodes', () => {
expect(nodeEqual(
important
);
expect(wrapper.html()).to.equal('important
');
```
#### Related Methods
[`.text() => String`](text.md)
================================================
FILE: docs/api/ReactWrapper/instance.md
================================================
# `.instance() => ReactComponent`
Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.
NOTE: can only be called on a wrapper instance that is also the root instance. With React `16` and above, `instance()` returns `null` for functional components, regardless of [hooks](https://reactjs.org/docs/hooks-intro.html) usage.
#### Returns
`ReactComponent|DOMComponent`: The retrieved instance.
#### Example
```jsx
function SFC() {
return MyFunction
;
}
class Stateful extends React.Component {
render() {
return MyClass
;
}
}
```
#### React 16.x
```jsx
test('wrapper instance is null', () => {
const wrapper = mount(-
{['foo', 'bar'].map((s) =>
- {s} )}
bax
bar
baz
{id}
);
}
}
Foo.propTypes = {
id: PropTypes.string.isRequired,
};
const wrapper = mount(Hello
);
}
MyComponent.propTypes = {
includedProp: PropTypes.string.isRequired,
};
const wrapper = mount(
First
Second
Third
);
}
}
```
```jsx
const wrapper = mount( {
this.setState({
x: event.clientX,
y: event.clientY,
});
}}
>
{render(this.state)}
);
}
}
Mouse.propTypes = {
render: PropTypes.func.isRequired,
};
```
```jsx
function App() {
return (
The mouse position is ({x}, {y})
)} />The mouse position is 0, 0
)).to.equal(true); ``` ##### Testing with multiple arguments ```jsx const wrapper = mount(The mouse position is 10, 20
)).to.equal(true); ``` ================================================ FILE: docs/api/ReactWrapper/setContext.md ================================================ # `.setContext(context) => Self` A method that sets the context of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing contexts. NOTE: can only be called on a wrapper instance that is also the root instance. #### Arguments 1. `context` (`Object`): An object containing new props to merge in with the current state #### Returns `ReactWrapper`: Returns itself. #### Example ```jsx import React from 'react'; import PropTypes from 'prop-types'; function SimpleComponent(props, context) { const { name } = context; return{name}
;
}
SimpleComponent.contextTypes = {
name: PropTypes.string,
};
```
```jsx
const context = { name: 'foo' };
const wrapper = mount(
{count} clicks
{ this.setState({ count: count + 1 }); }}>
Increment
- xxx
- yyy
- zzz
important
);
expect(wrapper.text()).to.equal('important');
```
```jsx
function Foo() {
return This is
;
}
const wrapper = mount(
{id}
);
}
}
Foo.propTypes = {
id: PropTypes.string.isRequired,
};
const wrapper = mount(Hello
Hello
)).to.equal(true);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains(Hello
)).to.equal(false);
expect(wrapper.contains()).to.equal(false);
```
```jsx
const wrapper = shallow((
Hello
));
expect(wrapper.contains([
Hello,
Goodbye
Again
Goodbye
,
])).to.equal(true);
expect(wrapper.contains([
Hello,
World
,
])).to.equal(false);
```
```jsx
const calculatedValue = 2 + 2;
const wrapper = shallow((
{calculatedValue}
{4}
)).to.equal(true);
```
#### Common Gotchas
- `.contains()` expects a ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with a ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
================================================
FILE: docs/api/ShallowWrapper/containsAllMatchingElements.md
================================================
# `.containsAllMatchingElements(patternNodes) => Boolean`
Returns whether or not all of the given react elements in `patternNodes` match an element in the wrapper's render tree. Every single element of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.
#### Arguments
1. `patternNodes` (`Array
Hello
));
expect(wrapper.containsAllMatchingElements([
Hello,
Goodbye
Again
Goodbye
,
])).to.equal(true);
```
#### Common Gotchas
- `.containsAllMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with an array of ReactElement or a JSX expression.
- Keep in mind that this method determines matching based on the matching of the node's children as
well.
#### Related Methods
- [`.matchesElement() => ShallowWrapper`](matchesElement.md) - rules for matching each node
- [`.containsMatchingElement() => ShallowWrapper`](containsMatchingElement.md) - rules for matching whole wrapper
- [`.containsAnyMatchingElements() => ShallowWrapper`](containsAnyMatchingElements.md) - must match at least one in patternNodes
================================================
FILE: docs/api/ShallowWrapper/containsAnyMatchingElements.md
================================================
# `.containsAnyMatchingElements(patternNodes) => Boolean`
Returns whether or not at least one of the given react elements in `patternNodes` matches an element in the wrapper's render tree. One or more elements of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.
#### Arguments
1. `patternNodes` (`Array
Hello
));
expect(wrapper.containsAnyMatchingElements([
Bonjour,
Goodbye
Again
Goodbye
,
])).to.equal(true);
```
#### Common Gotchas
- `.containsAnyMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with an array ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
#### Related Methods
- [`.matchesElement() => ShallowWrapper`](matchesElement.md) - rules for matching each node
- [`.containsMatchingElement() => ShallowWrapper`](containsMatchingElement.md) - rules for matching whole wrapper
- [`.containsAllMatchingElements() => ShallowWrapper`](containsAllMatchingElements.md) - must match all nodes in patternNodes
================================================
FILE: docs/api/ShallowWrapper/containsMatchingElement.md
================================================
# `.containsMatchingElement(patternNode) => Boolean`
Returns whether or not a `patternNode` react element matches any element in the render tree.
* the matches can happen anywhere in the wrapper's contents
* the wrapper can contain more than one node; all are searched
Otherwise, the match follows the same rules as `matchesElement`.
#### Arguments
1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the current instance's
render tree.
#### Returns
`Boolean`: whether or not the current wrapper has a node anywhere in its render tree that matches
the one passed in.
#### Example
```jsx
const wrapper = shallow((
Hello
Hello
)).to.equal(true);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(true);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(false);
expect(wrapper.containsMatchingElement(Hello
)).to.equal(false);
expect(wrapper.containsMatchingElement()).to.equal(false);
```
#### Common Gotchas
- `.containsMatchingElement()` expects a ReactElement, not a selector (like many other methods). Make sure that
when you are calling it you are calling it with a ReactElement or a JSX expression.
- Keep in mind that this method determines equality based on the equality of the node's children as
well.
#### Related Methods
- [`.containsAllMatchingElements() => ShallowWrapper`](containsAllMatchingElements.md) - must match all nodes in patternNodes
- [`.containsAnyMatchingElements() => ShallowWrapper`](containsAnyMatchingElements.md) - must match at least one in patternNodes
================================================
FILE: docs/api/ShallowWrapper/context.md
================================================
# `.context([key]) => Any`
Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it
will return just that value.
#### Arguments
1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the
root component instance.
#### Example
```jsx
const wrapper = shallow(
{title}
{pages && (Huckleberry Finn
Huckleberry Finn
Huckleberry Finn
Huckleberry Finn
{one}
{two}
);
}
const wrapper = shallow(` versus ``.
#### Returns
`ShallowWrapper`: A new wrapper that wraps the filtered nodes.
#### Examples
The following code takes a wrapper with two nodes, one a `` React component, and the other a ``, and filters out the React component.
```jsx
const wrapper = shallow((
`
Maps the current array of nodes to another array. Each node is passed in as a `ShallowWrapper`
to the map function.
#### Arguments
1. `fn` (`Function ( ShallowWrapper node, Number index ) => Any`): A mapping function to be run for every node in
the collection, the results of which will be mapped to the returned array. Should expect a ShallowWrapper as the first argument, and will be run with a context of
the original instance.
#### Returns
`Array`: Returns an array of the returned values from the mapping function..
#### Example
```jsx
const wrapper = shallow((
));
const texts = wrapper.find('.foo').map((node) => node.text());
expect(texts).to.eql(['bax', 'bar', 'baz']);
```
#### Related Methods
- [`.forEach(fn) => ShallowWrapper`](forEach.md)
- [`.reduce(fn[, initialValue]) => Any`](reduce.md)
- [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
================================================
FILE: docs/api/ShallowWrapper/matchesElement.md
================================================
# `.matchesElement(patternNode) => Boolean`
Returns whether or not a given react element `patternNode` matches the wrapper's render tree. It must be a single-node wrapper, and only the root node is checked.
The `patternNode` acts like a wildcard. For it to match a node in the wrapper:
* tag names must match
* contents must match: In text nodes, leading and trailing spaces are ignored, but not space in the middle. Child elements must match according to these rules, recursively.
* `patternNode` props (attributes) must appear in the wrapper's nodes, but not the other way around. Their values must match if they do appear.
* `patternNode` style CSS properties must appear in the wrapper's node's style, but not the other way around. Their values must match if they do appear.
#### Arguments
1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the wrapper's single node.
#### Returns
`Boolean`: whether or not the current wrapper match the one passed in.
#### Example
```jsx
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// ...
}
render() {
return (
);
}
}
const wrapper = shallow(`](map.md)
================================================
FILE: docs/api/ShallowWrapper/reduceRight.md
================================================
# `.reduceRight(fn[, initialValue]) => Any`
Applies the provided reducing function to every node in the wrapper to reduce to a single value.
Each node is passed in as a `ShallowWrapper`, and is processed from right to left.
#### Arguments
1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
following arguments:
- `value` (`T`): The value returned by the previous invocation of this function
- `node` (`ShallowWrapper`): A single-node wrapper around the node being processed
- `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.
#### Returns
`T`: Returns an array of the returned values from the mapping function...
#### Example
```jsx
function Foo() {
return (
`](map.md)
================================================
FILE: docs/api/ShallowWrapper/render.md
================================================
# `.render() => CheerioWrapper`
Returns a CheerioWrapper around the rendered HTML of the single node's subtree.
It must be a single-node wrapper.
#### Returns
`CheerioWrapper`: The resulting Cheerio object
#### Examples
```jsx
function Foo() {
return ();
}
```
```jsx
function Bar() {
return (
`):
This essentially calls `wrapper.prop(propName)(...args)`.
#### Returns
`ShallowWrapper`: A new wrapper that wraps the node returned from the render prop.
#### Examples
##### Test Setup
```jsx
class Mouse extends React.Component {
constructor() {
super();
this.state = { x: 0, y: 0 };
}
render() {
const { render } = this.props;
return (
(
);
}
```
##### Testing with no arguments
```jsx
const wrapper = shallow( {
testState[e.target.name] = e.target.value;
}}
/>
));
expect(wrapper.find('input').at(0).prop('value')).toEqual(10);
expect(wrapper.find('input').at(1).prop('value')).toEqual(20);
wrapper.find('input').at(0).simulate('change', { target: { name: 'width', value: 50 } });
wrapper.find('input').at(1).simulate('change', { target: { name: 'height', value: 70 } });
expect(testState.width).toEqual(50);
expect(testState.height).toEqual(70);
```
#### Common Gotchas
- Currently, event simulation for the shallow renderer does not propagate as one would normally
expect in a real environment. As a result, one must call `.simulate()` on the actual node that has
the event handler set.
- Even though the name would imply this simulates an actual event, `.simulate()` will in fact
target the component's prop based on the event you give it. For example, `.simulate('click')` will
actually get the `onClick` prop and call it.
- As noted in the function signature above passing a mock event is optional. Keep in mind that if the code you are testing uses the event for something like, calling `event.preventDefault()` or accessing any of its properties you must provide a mock event object with the properties your code requires.
================================================
FILE: docs/api/ShallowWrapper/simulateError.md
================================================
# `.simulateError(error) => Self`
Simulate a component throwing an error as part of its rendering lifecycle.
This is particularly useful in combination with React 16 error boundaries (ie, the `componentDidCatch` and `static getDerivedStateFromError` lifecycle methods).
#### Arguments
1. `error` (`Any`): The error to throw.
#### Returns
`ShallowWrapper`: Returns itself.
#### Example
```jsx
function Something() {
// this is just a placeholder
return null;
}
class ErrorBoundary extends React.Component {
static getDerivedStateFromError(error) {
return {
hasError: true,
};
}
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
const { spy } = this.props;
spy(error, info);
}
render() {
const { children } = this.props;
const { hasError } = this.state;
return (
{hasError ? 'Error' : children}
);
}
}
ErrorBoundary.propTypes = {
children: PropTypes.node.isRequired,
spy: PropTypes.func.isRequired,
};
const spy = sinon.spy();
const wrapper = shallow(`](ReactWrapper/getElements.md)
Returns the wrapped ReactElements.
#### [`.at(index) => ReactWrapper`](ReactWrapper/at.md)
Returns a wrapper of the node at the provided index of the current wrapper.
#### [`.first() => ReactWrapper`](ReactWrapper/first.md)
Returns a wrapper of the first node of the current wrapper.
#### [`.last() => ReactWrapper`](ReactWrapper/last.md)
Returns a wrapper of the last node of the current wrapper.
#### [`.state([key]) => Any`](ReactWrapper/state.md)
Returns the state of the root component.
#### [`.context([key]) => Any`](ReactWrapper/context.md)
Returns the context of the root component.
#### [`.props() => Object`](ReactWrapper/props.md)
Returns the props of the root component.
#### [`.prop(key) => Any`](ReactWrapper/prop.md)
Returns the named prop of the root component.
#### [`.invoke(propName)(...args) => Any`](ReactWrapper/invoke.md)
Invokes a prop function on the current node and returns the function's return value.
#### [`.key() => String`](ReactWrapper/key.md)
Returns the key of the root component.
#### [`.simulate(event[, mock]) => ReactWrapper`](ReactWrapper/simulate.md)
Simulates an event on the current node.
#### [`.setState(nextState) => ReactWrapper`](ReactWrapper/setState.md)
Manually sets state of the root component.
#### [`.setProps(nextProps[, callback]) => ReactWrapper`](ReactWrapper/setProps.md)
Manually sets props of the root component.
#### [`.setContext(context) => ReactWrapper`](ReactWrapper/setContext.md)
Manually sets context of the root component.
#### [`.instance() => ReactComponent|DOMComponent`](ReactWrapper/instance.md)
Returns the wrapper's underlying instance.
#### [`.getWrappingComponent() => ReactWrapper`](ReactWrapper/getWrappingComponent.md)
Returns a wrapper representing the `wrappingComponent`, if one was passed.
#### [`.unmount() => ReactWrapper`](ReactWrapper/unmount.md)
A method that un-mounts the component.
#### [`.mount() => ReactWrapper`](ReactWrapper/mount.md)
A method that re-mounts the component.
#### [`.update() => ReactWrapper`](ReactWrapper/update.md)
Syncs the enzyme component tree snapshot with the react component tree.
#### [`.debug() => String`](ReactWrapper/debug.md)
Returns a string representation of the current render tree for debugging purposes.
#### [`.type() => String|Function`](ReactWrapper/type.md)
Returns the type of the current node of the wrapper.
#### [`.name() => String`](ReactWrapper/name.md)
Returns the name of the current node of the wrapper.
#### [`.forEach(fn) => ReactWrapper`](ReactWrapper/forEach.md)
Iterates through each node of the current wrapper and executes the provided function
#### [`.map(fn) => Array`](ReactWrapper/map.md)
Maps the current array of nodes to another array.
#### [`.matchesElement(node) => Boolean`](ReactWrapper/matchesElement.md)
Returns whether or not a given react element matches the current render tree.
#### [`.reduce(fn[, initialValue]) => Any`](ReactWrapper/reduce.md)
Reduces the current array of nodes to a value
#### [`.reduceRight(fn[, initialValue]) => Any`](ReactWrapper/reduceRight.md)
Reduces the current array of nodes to a value, from right to left.
#### [`.slice([begin[, end]]) => ReactWrapper`](ReactWrapper/slice.md)
Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.
#### [`.tap(intercepter) => Self`](ReactWrapper/tap.md)
Taps into the wrapper method chain. Helpful for debugging.
#### [`.some(selector) => Boolean`](ReactWrapper/some.md)
Returns whether or not any of the nodes in the wrapper match the provided selector.
#### [`.someWhere(predicate) => Boolean`](ReactWrapper/someWhere.md)
Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
#### [`.every(selector) => Boolean`](ReactWrapper/every.md)
Returns whether or not all of the nodes in the wrapper match the provided selector.
#### [`.everyWhere(predicate) => Boolean`](ReactWrapper/everyWhere.md)
Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
#### [`.ref(refName) => ReactComponent | HTMLElement`](ReactWrapper/ref.md)
Returns the node that matches the provided reference name.
#### [`.detach() => void`](ReactWrapper/detach.md)
Unmount the component from the DOM node it's attached to.
================================================
FILE: docs/api/render.md
================================================
# Static Rendering API
Use enzyme's `render` function to generate HTML from your React tree, and analyze the resulting HTML structure.
`render` returns a wrapper very similar to the other renderers in enzyme, [`mount`](mount.md) and
[`shallow`](shallow.md); however, `render` uses a third party HTML parsing and traversal library
[Cheerio](https://cheerio.js.org). We believe that Cheerio handles parsing and
traversing HTML extremely well, and duplicating this functionality ourselves would be a
disservice.
For the purposes of this documentation, we will refer to Cheerio's constructor as
`CheerioWrapper`, which is to say that it is analogous to our `ReactWrapper` and `ShallowWrapper`
constructors. You can reference the [Cheerio API docs](https://github.com/cheeriojs/cheerio#api) for methods available on a `CheerioWrapper` instance.
### Example Usage
```jsx
import React from 'react';
import { render } from 'enzyme';
import PropTypes from 'prop-types';
describe('
));
expect(wrapper.contains()).to.equal(true);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(`](ShallowWrapper/getElements.md)
Returns the wrapped ReactElements.
#### [`.at(index) => ShallowWrapper`](ShallowWrapper/at.md)
Returns a wrapper of the node at the provided index of the current wrapper.
#### [`.first() => ShallowWrapper`](ShallowWrapper/first.md)
Returns a wrapper of the first node of the current wrapper.
#### [`.last() => ShallowWrapper`](ShallowWrapper/last.md)
Returns a wrapper of the last node of the current wrapper.
#### [`.state([key]) => Any`](ShallowWrapper/state.md)
Returns the state of the root component.
#### [`.context([key]) => Any`](ShallowWrapper/context.md)
Returns the context of the root component.
#### [`.props() => Object`](ShallowWrapper/props.md)
Returns the props of the current node.
#### [`.prop(key) => Any`](ShallowWrapper/prop.md)
Returns the named prop of the current node.
#### [`.key() => String`](ShallowWrapper/key.md)
Returns the key of the current node.
#### [`.invoke(propName)(...args) => Any`](ShallowWrapper/invoke.md)
Invokes a prop function on the current node and returns the function's return value.
#### [`.simulate(event[, data]) => ShallowWrapper`](ShallowWrapper/simulate.md)
Simulates an event on the current node.
#### [`.setState(nextState) => ShallowWrapper`](ShallowWrapper/setState.md)
Manually sets state of the root component.
#### [`.setProps(nextProps[, callback]) => ShallowWrapper`](ShallowWrapper/setProps.md)
Manually sets props of the root component.
#### [`.setContext(context) => ShallowWrapper`](ShallowWrapper/setContext.md)
Manually sets context of the root component.
#### [`.getWrappingComponent() => ShallowWrapper`](ShallowWrapper/getWrappingComponent.md)
Returns a wrapper representing the `wrappingComponent`, if one was passed.
#### [`.instance() => ReactComponent`](ShallowWrapper/instance.md)
Returns the instance of the root component.
#### [`.update() => ShallowWrapper`](ShallowWrapper/update.md)
Syncs the enzyme component tree snapshot with the react component tree.
#### [`.debug() => String`](ShallowWrapper/debug.md)
Returns a string representation of the current shallow render tree for debugging purposes.
#### [`.type() => String|Function|null`](ShallowWrapper/type.md)
Returns the type of the current node of the wrapper.
#### [`.name() => String`](ShallowWrapper/name.md)
Returns the name of the current node of the wrapper.
#### [`.forEach(fn) => ShallowWrapper`](ShallowWrapper/forEach.md)
Iterates through each node of the current wrapper and executes the provided function
#### [`.map(fn) => Array`](ShallowWrapper/map.md)
Maps the current array of nodes to another array.
#### [`.reduce(fn[, initialValue]) => Any`](ShallowWrapper/reduce.md)
Reduces the current array of nodes to a value
#### [`.reduceRight(fn[, initialValue]) => Any`](ShallowWrapper/reduceRight.md)
Reduces the current array of nodes to a value, from right to left.
#### [`.slice([begin[, end]]) => ShallowWrapper`](ShallowWrapper/slice.md)
Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.
#### [`.tap(intercepter) => Self`](ShallowWrapper/tap.md)
Taps into the wrapper method chain. Helpful for debugging.
#### [`.some(selector) => Boolean`](ShallowWrapper/some.md)
Returns whether or not any of the nodes in the wrapper match the provided selector.
#### [`.someWhere(predicate) => Boolean`](ShallowWrapper/someWhere.md)
Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
#### [`.every(selector) => Boolean`](ShallowWrapper/every.md)
Returns whether or not all of the nodes in the wrapper match the provided selector.
#### [`.everyWhere(predicate) => Boolean`](ShallowWrapper/everyWhere.md)
Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
#### [`.dive([options]) => ShallowWrapper`](ShallowWrapper/dive.md)
Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.
================================================
FILE: docs/common-issues.md
================================================
# Common Issues
This list aims to be comprehensive. If you find an issue that has been frequently brought up in GitHub *Issues* that is not here, please open a PR to add it.
### Query Selector fails
###### Reason
This could be due to a regression, or the feature is not yet implemented. If you are wanting to use a
certain query syntax, make sure it is implemented first before raising an issue. Here is the list of
selectors we currently support: https://github.com/enzymejs/enzyme/blob/master/docs/api/selector.md
### Nested component may not be updated after wrapper updates
Assume we have a simple component with an `` and a ` `);
});
it('shows nested portal children in debug tree', () => {
const Bar = () => null;
const containerDiv = global.document.createElement('div');
const Foo = () => (
`);
});
it('has top level portals in debug tree', () => {
const containerDiv = global.document.createElement('div');
const Foo = () => createPortal(
`);
});
});
describeIf(is('>= 16.4'), 'Profiler', () => {
function SomeComponent() {
return (
{}}>
);
}
wrap()
.withConsoleThrows()
.it('mounts without complaint', () => {
expect(() => mount(
`);
});
it('finds elements through Profiler elements', () => {
const wrapper = mount(
);
}
const wrapper = mount(
);
}
const wrapper = mount(
));
expect(wrapper).to.have.lengthOf(2);
});
const Wrap = mount;
const Wrapper = ReactWrapper;
describeMethods(
{ Wrap, Wrapper },
'deprecatedInstanceProperties',
'@@iterator',
'at',
'childAt',
'children',
'closest',
'contains',
'containsAllMatchingElements',
'containsAnyMatchingElements',
'containsMatchingElement',
'context',
'debug',
'equals',
'every',
'everyWhere',
'exists',
'filter',
'filterWhere',
'find',
'findWhere',
'first',
'flatMap',
'forEach',
'get',
'getElement',
'getElements',
'getNode',
'getNodes',
'getWrappingComponent',
'hasClass',
'hostNodes',
'html',
'instance',
'invoke',
'is',
'isEmpty',
'isEmptyRender',
'key',
'last',
'map',
'matchesElement',
'name',
'not',
'parent',
'parents',
'prop',
'props',
'reduce',
'reduceRight',
'render',
'renderProp',
'root',
'setContext',
'setProps',
'setState',
'simulate',
'simulateError',
'single',
'slice',
'some',
'someWhere',
'state',
'tap',
'text',
'unmount',
'wrap',
);
describeLifecycles(
{ Wrap, Wrapper },
'componentDidCatch',
'componentDidMount',
'componentDidUpdate',
'componentWillUnmount',
'getDerivedStateFromError',
'getDerivedStateFromProps',
'getSnapshotBeforeUpdate',
'misc',
);
describeHooks(
{ Wrap, Wrapper },
'useCallback',
'useContext',
'useDebugValue',
'useEffect',
'useImperativeHandle',
'useLayoutEffect',
'useMemo',
'useReducer',
'useRef',
'useState',
'custom',
);
describeIf(is('>= 16.6'), 'Suspense & lazy', () => {
class DynamicComponent extends React.Component {
render() {
return (
);
const wrapper = mount(
`);
});
it('throws with Suspense with multiple children if options.suspenseFallback=false', () => {
const SuspenseComponent = () => (
`);
});
it('return wrapped component when given loaded lazy component in initial mount', () => {
const LazyComponent = getLoadedLazyComponent(DynamicComponent);
const SuspenseComponent = () => (
`);
});
it('throws if options.suspenseFallback is specified', () => {
const LazyComponent = lazy(fakeDynamicImport(DynamicComponent));
const SuspenseComponent = () => (
loading
}>
important
);
expect(wrapper.html()).to.equal('important
');
```
#### Related Methods
- [`.text() => String`](text.md)
- [`.debug() => String`](debug.md)
================================================
FILE: docs/api/ShallowWrapper/instance.md
================================================
# `.instance() => ReactComponent`
Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.
NOTE: can only be called on a wrapper instance that is also the root instance. With React `16` and above, `instance()` returns `null` for functional components, regardless of [hooks](https://reactjs.org/docs/hooks-intro.html) usage.
#### Returns
`ReactComponent|DOMComponent`: The retrieved instance.
#### Example
```jsx
function SFC() {
return MyFunction
;
}
class Stateful extends React.Component {
render() {
return MyClass
;
}
}
```
#### React 16.x
```jsx
test('wrapper instance is null', () => {
const wrapper = shallow(-
{['foo', 'bar'].map((s) =>
- {s} )}
bax
bar
baz
Hello
);
}
MyComponent.propTypes = {
includedProp: PropTypes.string.isRequired,
};
const wrapper = shallow( {
this.setState({
x: event.clientX,
y: event.clientY,
});
}}
>
{render(this.state)}
);
}
}
Mouse.propTypes = {
render: PropTypes.func.isRequired,
};
```
```jsx
function App() {
return (
The mouse position is ({x}, {y})
)} />The mouse position is 0, 0
)).to.equal(true); ``` ##### Testing with multiple arguments ```jsx const wrapper = shallow(The mouse position is 10, 20
)).to.equal(true); ``` ================================================ FILE: docs/api/ShallowWrapper/setContext.md ================================================ # `.setContext(context) => Self` A method that sets the context of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing contexts. NOTE: can only be called on a wrapper instance that is also the root instance. #### Arguments 1. `context` (`Object`): An object containing new props to merge in with the current state #### Returns `ShallowWrapper`: Returns itself. #### Example ```jsx import React from 'react'; import PropTypes from 'prop-types'; function SimpleComponent(props, context) { const { name } = context; return{name}
;
}
SimpleComponent.contextTypes = {
name: PropTypes.string,
};
```
```jsx
const context = { name: 'foo' };
const wrapper = shallow(
{count} clicks
{ this.setState({ count: count + 1 }); }}>
Increment
- xxx
- yyy
- zzz
important
);
expect(wrapper.text()).to.equal('important');
```
```jsx
const wrapper = shallow(
{id}
);
}
}
Foo.propTypes = {
id: PropTypes.string.isRequired,
};
const wrapper = shallow({name}
;
}
SimpleComponent.contextTypes = {
name: PropTypes.string,
};
const context = { name: 'foo' };
const wrapper = render(
{createPortal(
);
const wrapper = mount(InPortal
,
containerDiv,
);
const wrapper = mount(
InPortal
hello
booDynamic Component
);
}
}
class Fallback extends React.Component {
render() {
return (
Fallback
);
}
}
it('finds Suspense and its children when no lazy component', () => {
class Component extends React.Component {
render() {
return (
test
);
}
}
const SuspenseComponent = () => (
Fallback
Dynamic Component
loading
{id}
);
}
}
const wrapper = mount(
First
Second
Third
);
}
}
const wrapper = mount(hi
;
}
}
it('throws on non-root', () => {
const div = global.document.createElement('div');
global.document.body.appendChild(div);
const wrapper = mount(
{this.state && this.state.showSpan && }
);
/* eslint-enable react/destructuring-assignment */
}
}
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), 'has updated output after an asynchronous setState', () => {
const wrapper = mount({count}
{count}
{mappedChildren}
);
}
}
it('merges cloned element props', () => {
const wrapper = mount((
2
{children}
;
}
}
class Foo extends React.Component {
render() {
return (
{50}
);
expect(wrapper.debug()).to.equal(`
50
`);
});
describe('wrapping invalid elements', () => {
it('throws with combined dangerouslySetInnerHTML and children on host nodes', () => {
/* eslint react/no-danger-with-children: 0 */
expect(() => shallow((
child
))).to.throw(Error, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.');
});
itIf(is('>= 16'), 'throws when shallow rendering Portals', () => {
const portal = createPortal(
,
{ nodeType: 1 },
);
expect(() => shallow(portal)).to.throw(
Error,
'ShallowWrapper can only wrap valid elements',
);
});
it('throws when shallow rendering plain text', () => {
expect(() => shallow('Foo')).to.throw(
Error,
'ShallowWrapper can only wrap valid elements',
);
});
it('throws when shallow rendering multiple elements', () => {
expect(() => shallow([])).to.throw(
TypeError,
'ShallowWrapper can only wrap valid elements',
);
});
});
it('shallow renders built in components', () => {
expect(() => shallow()).not.to.throw();
});
it('shallow renders composite components', () => {
class Foo extends React.Component {
render() {
return ;
}
}
expect(() => shallow(
{typeof this.state}
{JSON.stringify(this.state)}
);
}
}
const wrapper = shallow(
object
null
`.trim());
expect(() => wrapper.state('key')).to.throw('ShallowWrapper::state("key") requires that `state` not be `null` or `undefined`');
});
describeIf(is('>= 0.14'), 'wrappingComponent', () => {
class More extends React.Component {
render() {
return null;
}
}
class StateTester extends React.Component {
render() {
return null;
}
}
class TestProvider extends React.Component {
getChildContext() {
const { value, renderMore, renderStateTester } = this.props;
return {
testContext: value || 'Hello world!',
renderMore: renderMore || false,
renderStateTester: renderStateTester || false,
};
}
render() {
const { children } = this.props;
return {children};
}
}
TestProvider.childContextTypes = {
testContext: PropTypes.string,
renderMore: PropTypes.bool,
renderStateTester: PropTypes.bool,
};
class MyWrappingComponent extends React.Component {
constructor() {
super();
this.state = { renderStateTester: false };
}
render() {
const { children, contextValue, renderMore } = this.props;
const { renderStateTester } = this.state;
return (
{children}
Context says: {testContext}{explicitContext}
{renderMore && Value 1: {value1}; Value 2: {value2}
)}
Context says:${' '}
{name}
;
},
});
const context = { name: 'foo' };
const wrapper = shallow({name}
;
},
});
const context = { name: 'foo' };
expect(() => shallow({name}
;
},
});
const context = { name: 'foo' };
const wrapper = shallow({value}
}
{value}
}
{children}
;
}
it('can be rendered as the root', () => {
const wrapper = shallow(
{children}
{children}
{name}
);
SimpleComponent.contextTypes = { name: PropTypes.string };
const context = { name: 'foo' };
const wrapper = shallow({name}
);
const context = { name: 'foo' };
expect(() => shallow({name}
);
SimpleComponent.contextTypes = { name: PropTypes.string };
const context = { name: 'foo' };
const wrapper = shallow({name}
);
SimpleComponent.contextTypes = { name: PropTypes.string };
const wrapper = shallow({inspect(this.context)}
;
}
}
// react 0.14 and 15 throw an invariant exception in this case
itIf(is('0.13 || > 15'), 'warns and works but provides no context, without childContextTypes', () => {
const stub = sinon.stub(console, 'warn');
const wrapper = shallow(
{}
`);
expect(stub).to.have.property('callCount', 1);
expect(stub.args).to.eql([['Provider.getChildContext(): childContextTypes must be defined in order to use getChildContext().']]);
});
wrap()
.withConsoleThrows()
.it('warns if childContextTypes is not defined', () => {
class FaultyFooProvider extends React.Component {
getChildContext() {
const { value } = this.props;
return {
foo: value,
};
}
render() {
return null;
}
}
expect(() => shallow((
bar
{foo}
{createPortal(
);
const wrapper = shallow(InPortal
,
{ nodeType: 1 },
)}
InPortal
{createPortal(
);
const wrapper = shallow(InPortal
,
{ nodeType: 1 },
)}
InPortal
{createPortal(
);
const wrapper = shallow(InPortal
,
{ nodeType: 1 },
)
);
const wrapper = shallow(
InPortal
hello
boo{name}
;
}
}
Bar.contextTypes = {
name: PropTypes.string,
};
class Foo extends React.Component {
render() {
return (
{name}
;
}
}
class Foo extends React.Component {
render() {
return (
{name}
;
}
}
Bar.contextTypes = {
name: PropTypes.string,
};
class Foo extends React.Component {
render() {
return (
{name}
);
Bar.contextTypes = { name: PropTypes.string };
const Foo = () => (
{name}
);
const Foo = () => (
{name}
);
Bar.contextTypes = { name: PropTypes.string };
const Foo = () => (
{name}
);
Bar.contextTypes = { name: PropTypes.string };
const Foo = () => (
;
}
}
class RendersNull extends React.Component {
render() {
return null;
}
}
class RendersMultiple extends React.Component {
render() {
return (
Guest
;
const AppMemoized = memo && Object.assign(memo(App), { displayName: 'AppMemoized' });
const RendersApp = () =>
Guest
`);
expect(() => wrapper.dive().dive()).to.throw(TypeError);
});
it('works with memoizing', () => {
const wrapper = shallow(
Guest
`);
expect(() => wrapper.dive().dive()).to.throw(TypeError);
});
});
});
describeIf(is('>= 16.6'), 'Suspense & lazy', () => {
class DynamicComponent extends React.Component {
render() {
return (
Dynamic Component
);
}
}
class Fallback extends React.Component {
render() {
return (
Fallback
);
}
}
it('finds Suspense and its children when no lazy component', () => {
class Component extends React.Component {
render() {
return (
test
);
}
}
const SuspenseComponent = () => (
foo
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const options = {
disableLifecycleMethods: true,
context: {
foo: 'foo',
},
};
beforeEach(() => {
spy.resetHistory();
});
it('does not call componentDidMount when mounting', () => {
shallow(foo
;
}
}
shallow({showTable ?
: null}
);
}
}
const wrapper = shallow({foo}
;
}
}
const wrapper = shallow(
{this.state && this.state.showSpan && }
);
/* eslint-enable react/destructuring-assignment */
}
}
it('has updated output after an asynchronous setState', () => {
const wrapper = shallow({count}
{count}
{mappedChildren}
);
}
}
it('merges cloned element props', () => {
const wrapper = shallow((
2
child
,
child
,
)).to.equal(true);
});
it('does not match not equal nodes', () => {
expect(nodeEqual(
child
,
,
)).to.equal(false);
expect(nodeEqual(
,
child
,
)).to.equal(false);
});
it('matches children before and after interpolation', () => {
expect(nodeEqual(
{2}{' children'}{} abc {'hey'}
,
2 children abc hey
,
)).to.equal(true);
});
it('skips null children', () => {
expect(nodeEqual(
{null}
,
,
)).to.equal(true);
});
it('skips undefined children', () => {
expect(nodeEqual(
{undefined}
,
,
)).to.equal(true);
});
it('skips empty children', () => {
expect(nodeEqual(
{[]}
,
,
)).to.equal(true);
});
it('skips array of null children', () => {
expect(nodeEqual(
{[null, null, null]}
,
,
)).to.equal(true);
});
});
describe('basic props and children mixed', () => {
it('matches equal nodes', () => {
expect(nodeEqual(
child
,
child
,
)).to.equal(true);
});
it('does not match when basic props are not equal', () => {
expect(nodeEqual(
child
,
child
,
)).to.equal(false);
expect(nodeEqual(
child
,
child
,
)).to.equal(false);
});
it('does not match when children are not equal', () => {
expect(nodeEqual(
child
,
other child
,
)).to.equal(false);
expect(nodeEqual(
child
,
other child
,
)).to.equal(false);
});
it('matches nodes when children are different but falsy', () => {
expect(nodeEqual(
{null}
,
,
)).to.equal(true);
expect(nodeEqual(
, // eslint-disable-line react/no-children-prop
,
)).to.equal(true);
});
});
});
describe('nodeMatches', () => {
function nodesMatchTwoWays(aProps, bProps, LeftTag = 'div', RightTag = 'div', matches = true) {
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(true);
expect(nodeMatches(
child
,
child
,
)).to.equal(true);
});
it('does not match not equal nodes', () => {
expect(nodeMatches(
child
,
,
)).to.equal(false);
expect(nodeMatches(
,
child
,
)).to.equal(false);
});
it('skips null children', () => {
expect(nodeMatches(
{null}
,
,
)).to.equal(true);
});
it('skips undefined children', () => {
expect(nodeMatches(
{undefined}
,
,
)).to.equal(true);
});
it('skips empty children', () => {
expect(nodeMatches(
{[]}
,
,
)).to.equal(true);
});
it('skips array of null children', () => {
expect(nodeMatches(
{[null, null, null]}
,
,
)).to.equal(true);
});
});
describe('basic props and children mixed', () => {
it('matches equal nodes', () => {
expect(nodeMatches(
child
,
child
,
)).to.equal(true);
});
it('does not match when basic props are not equal', () => {
expect(nodeMatches(
child
,
child
,
)).to.equal(false);
expect(nodeMatches(
child
,
child
,
)).to.equal(false);
});
it('does not match when children are not equal', () => {
expect(nodeMatches(
child
,
other child
,
)).to.equal(false);
expect(nodeMatches(
child
,
other child
,
)).to.equal(false);
});
it('matches nodes when children are different but falsy', () => {
expect(nodeMatches(
{null}
,
,
)).to.equal(true);
expect(nodeMatches(
, // eslint-disable-line react/no-children-prop
,
)).to.equal(true);
expect(nodeMatches(
,
,
)).to.equal(false);
expect(nodeMatches(
{''}
,
{0}
,
)).to.equal(false);
});
});
});
describe('propFromEvent', () => {
it('works', () => {
expect(propFromEvent('click')).to.equal('onClick');
expect(propFromEvent('mouseenter')).to.equal('onMouseEnter');
});
describe('conditionally supported events', () => {
it('transforms animation events when supported', () => {
expect(propFromEvent('animationiteration', { animation: false })).to.equal('onAnimationiteration');
expect(propFromEvent('animationiteration', { animation: true })).to.equal('onAnimationIteration');
});
it('transforms pointer events when supported', () => {
expect(propFromEvent('pointerover', { pointerEvents: false })).to.equal('onPointerover');
expect(propFromEvent('pointerover', { pointerEvents: true })).to.equal('onPointerOver');
});
it('transforms aux click events when supported', () => {
expect(propFromEvent('auxclick', { auxClick: false })).to.equal('onAuxclick');
expect(propFromEvent('auxclick', { auxClick: true })).to.equal('onAuxClick');
});
});
});
describe('mapNativeEventNames', () => {
describe('given an event that isn‘t a mapped', () => {
it('returns the original event', () => {
const result = mapNativeEventNames('click');
expect(result).to.equal('click');
});
});
describe('given a React capitalised mouse event', () => {
it('returns the original event', () => {
const result = mapNativeEventNames('mouseEnter');
expect(result).to.equal('mouseEnter');
});
});
describe('given a native lowercase event', () => {
it('transforms it into the React capitalised event', () => {
const result = mapNativeEventNames('dragenter');
expect(result).to.equal('dragEnter');
});
});
describe('conditionally supported events', () => {
it('ignores unsupported events', () => {
const result = mapNativeEventNames('animationiteration');
expect(result).to.equal('animationiteration');
});
it('transforms animation events when supported', () => {
const result = mapNativeEventNames('animationiteration', { animation: true });
expect(result).to.equal('animationIteration');
});
it('transforms pointer events when supported', () => {
const result = mapNativeEventNames('pointerover', { pointerEvents: true });
expect(result).to.equal('pointerOver');
});
});
});
describe('displayNameOfNode', () => {
describe('given a node with displayName', () => {
it('returns the displayName', () => {
class Foo extends React.Component {
render() { return ; }
}
Foo.displayName = 'CustomWrapper';
expect(displayNameOfNode(bar
')).to.have.property('cheerio', '[cheerio object]');
expect(loadCheerioRoot('leading text')).to.have.property('cheerio', '[cheerio object]');
expect(loadCheerioRoot('malformed< {
it('throws on a non-array', () => {
expect(() => AND({})).to.throw(TypeError);
});
it('does not mutate the array', () => {
const fn1 = () => {};
const fn2 = () => {};
const arr = [fn1, fn2];
AND(arr);
expect(arr).to.eql([fn1, fn2]);
});
it('returns a thunk that calls each function in reverse order', () => {
const spy = sinon.spy();
const fn1 = (...args) => {
spy(1, args);
return true;
};
const fn2 = (...args) => {
spy(2, args);
return true;
};
const thunk = AND([fn1, fn2]);
expect(thunk).to.be.a('function');
expect(thunk()).to.equal(true);
expect(spy).to.have.property('callCount', 2);
const { args } = spy;
expect(args).to.eql([
[2, [undefined]],
[1, [undefined]],
]);
});
it('matches `every`', () => {
expect(AND([() => true, () => false])()).to.equal(false);
expect(AND([() => true, () => true])()).to.equal(true);
});
});
});
================================================
FILE: packages/enzyme-test-suite/test/_helpers/adapter.js
================================================
/* eslint global-require: 0, import/no-extraneous-dependencies: 0, import/no-unresolved: 0 */
/**
* This file is needed only because we run our unit tests on multiple
* versions of React at a time. This file basically figures out which
* version of React is loaded, and exports the correct adapter for configuring.
*/
const { is } = require('./version');
let Adapter = null;
if (process.env.ADAPTER) {
// eslint-disable-next-line import/no-dynamic-require
Adapter = require(`enzyme-adapter-react-${process.env.ADAPTER}`);
} else if (is('^0.13')) {
Adapter = require('enzyme-adapter-react-13');
} else if (is('^0.14')) {
Adapter = require('enzyme-adapter-react-14');
} else if (is('^15.5')) {
Adapter = require('enzyme-adapter-react-15');
} else if (is('^15') && is('< 15.5')) {
Adapter = require('enzyme-adapter-react-15.4');
} else if (is('~16.0.0-0 || ~16.1')) {
Adapter = require('enzyme-adapter-react-16.1');
} else if (is('~16.2')) {
Adapter = require('enzyme-adapter-react-16.2');
} else if (is('~16.3.0-0')) {
Adapter = require('enzyme-adapter-react-16.3');
} else if (is('^16.4.0-0')) {
Adapter = require('enzyme-adapter-react-16');
}
module.exports = Adapter;
================================================
FILE: packages/enzyme-test-suite/test/_helpers/beforeEach.js
================================================
import sinon from 'sinon-sandbox';
beforeEach(() => { // eslint-disable-line mocha/no-top-level-hooks
sinon.restore();
});
================================================
FILE: packages/enzyme-test-suite/test/_helpers/describeHooks.js
================================================
import { is } from './version';
export default function describeHooks({
Wrap,
Wrapper,
}, ...hooks) {
const WrapperName = Wrapper.name;
const isShallow = WrapperName === 'ShallowWrapper';
const isMount = WrapperName === 'ReactWrapper';
const hasDOM = isMount;
const makeDOMElement = () => (hasDOM ? global.document.createElement('div') : { nodeType: 1 });
hooks.forEach((hook) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`../shared/hooks/${hook}`)({
hasHooks: is('>= 16.8'),
Wrap,
WrapRendered: isShallow ? Wrap : (...args) => Wrap(...args).children(),
Wrapper,
WrapperName,
isShallow,
isMount,
hasDOM,
makeDOMElement,
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/_helpers/describeLifecycles.js
================================================
export default function describeLifecycles({
Wrap,
Wrapper,
}, ...lifecycles) {
const WrapperName = Wrapper.name;
const isShallow = WrapperName === 'ShallowWrapper';
const isMount = WrapperName === 'ReactWrapper';
const hasDOM = isMount;
const makeDOMElement = () => (hasDOM ? global.document.createElement('div') : { nodeType: 1 });
lifecycles.forEach((lifecycle) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`../shared/lifecycles/${lifecycle}`)({
Wrap,
WrapRendered: isShallow ? Wrap : (...args) => Wrap(...args).children(),
Wrapper,
WrapperName,
isShallow,
isMount,
hasDOM,
makeDOMElement,
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/_helpers/describeMethods.js
================================================
export default function describeMethods({
Wrap,
Wrapper,
}, ...methods) {
const WrapperName = Wrapper.name;
const isShallow = WrapperName === 'ShallowWrapper';
const isMount = WrapperName === 'ReactWrapper';
const hasDOM = isMount;
const makeDOMElement = () => (hasDOM ? global.document.createElement('div') : { nodeType: 1 });
methods.forEach((method) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`../shared/methods/${method}`)({
Wrap,
WrapRendered: isShallow ? Wrap : (...args) => Wrap(...args).children(),
Wrapper,
WrapperName,
isShallow,
isMount,
hasDOM,
makeDOMElement,
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/_helpers/getLoadedLazyComponent.js
================================================
import { fakeDynamicImport } from 'enzyme-adapter-utils';
import { lazy } from './react-compat';
import { is, VERSION } from './version';
function fakeSyncThenable(result) {
return {
then(resolve) {
return resolve({ default: result });
},
};
}
export default function getLoadedLazyComponent(wrappedComponent) {
if (is('>= 16.8')) {
return lazy(() => fakeSyncThenable(wrappedComponent));
}
if (is('>= 16.6')) {
const LazyComponent = lazy(() => fakeDynamicImport(wrappedComponent));
/**
* Before React v16.8 there's no public api to synchronously / await
* loaded lazy component.
* So we have to hack this by setting `_result` and `_status` implementation.
*/
/* eslint-disable no-underscore-dangle */
LazyComponent._result = wrappedComponent;
/* eslint-disable no-underscore-dangle */
LazyComponent._status = 1;
return LazyComponent;
}
throw Error(`Current React version ${VERSION} doesn't support \`lazy()\` api.`);
}
================================================
FILE: packages/enzyme-test-suite/test/_helpers/index.jsx
================================================
/* globals jsdom */
import React from 'react';
import { Memo } from 'react-is';
import { compareNodeTypeOf } from 'enzyme-adapter-utils';
import sinon from 'sinon-sandbox';
import { expect } from 'chai';
/**
* Simple wrapper around mocha describe which allows a boolean to be passed in first which
* determines whether or not the test will be run
*/
export function describeIf(test, a, b) {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
if (test) {
describe(a, b);
} else {
describe.skip(a, b);
}
}
describeIf.only = (test, a, b) => {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
if (test) {
describe.only(a, b);
} else {
describe.only('only:', () => {
describe.skip(a, b);
});
}
};
describeIf.skip = (test, a, b) => {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
describeIf(false, a, b);
};
/**
* Simple wrapper around mocha it which allows a boolean to be passed in first which
* determines whether or not the test will be run
*/
export function itIf(test, a, b) {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
if (test) {
it(a, b);
} else {
it.skip(a, b);
}
}
itIf.only = (test, a, b) => {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
if (test) {
it.only(a, b);
} else {
it.skip(a, b);
}
};
itIf.skip = (test, a, b) => {
if (typeof test !== 'boolean') {
throw new TypeError(`a boolean is required, you passed a ${typeof test}`);
}
itIf(false, a, b);
};
/**
* Simple wrapper around mocha it which allows an array of possible values to test against.
* Each test will be wrapped in a try/catch block to handle any errors.
*
* @param {Object[]} data
* @param {String} message
* @param {Function} factory
*/
export function itWithData(data, message, factory) {
data.forEach((testCase) => {
it(`${message} ${testCase.message}`, () => factory(testCase));
});
}
function only(a, b) {
describe('(uses jsdom)', () => {
if (typeof jsdom === 'function') {
jsdom();
describe.only(a, b);
} else {
// if jsdom isn't available, skip every test in this describe context
describe.skip(a, b);
}
});
}
function skip(a, b) {
describe('(uses jsdom)', () => {
if (typeof jsdom === 'function') {
jsdom();
describe.skip(a, b);
} else {
// if jsdom isn't available, skip every test in this describe context
describe.skip(a, b);
}
});
}
export function describeWithDOM(a, b) {
describe('(uses jsdom)', () => {
if (global.document) {
describe(a, b);
} else {
// if jsdom isn't available, skip every test in this describe context
describe.skip(a, b);
}
});
}
describeWithDOM.only = only;
describeWithDOM.skip = skip;
/**
* React component used for testing.
*/
class TestHelper extends React.Component {
render() {
return ;
}
}
/**
* Possible values for React render() checks.
*/
export function generateEmptyRenderData() {
return [
// Returns true for empty
{ message: 'false', value: false, expectResponse: true },
{ message: 'null', value: null, expectResponse: true },
// Returns false for empty, valid returns
{ message: 'React component', value: yep )).not.to.throw();
});
});
describe('findElement', () => {
class Target extends React.Component { render() { return null; } }
class Other extends React.Component { render() { return null; } }
class Unfound extends React.Component { render() { return null; } }
const other = elementToTree(
{target}
,
);
expect(getNodeFromRootFinder(
isCustomComponent,
tree,
{ wrappingComponent: WrappingComponent },
)).to.eql(elementToTree(target));
});
it('throws an error if wrappingComponent is passed but RootFinder is not found', () => {
const treeMissing = elementToTree((
{target}
));
expect(() => getNodeFromRootFinder(
isCustomComponent,
treeMissing,
{ wrappingComponent: WrappingComponent },
)).to.throw(
'`wrappingComponent` must render its children!',
);
});
it('returns the node if there is no wrapping component and rootFinder can‘t be found', () => {
const treeMissing = elementToTree((
{target}
));
expect(getNodeFromRootFinder(
isCustomComponent,
treeMissing,
{},
)).to.eql(treeMissing.rendered);
});
});
describe('wrapWithWrappingComponent', () => {
class Target extends React.Component { render() { return null; } }
class WrappingComponent extends React.Component { render() { return null; } }
it('wraps the node in the wrappingComponent and RootFinder', () => {
const node =
{node}
);
expect(wrapWithWrappingComponent(React.createElement, node, {
wrappingComponent: WrappingComponent,
wrappingComponentProps: { hello: 'world' },
})).to.eql(expected);
});
it('handles no wrappingComponentProps', () => {
const node =
{node}
);
expect(wrapWithWrappingComponent(React.createElement, node, {
wrappingComponent: WrappingComponent,
})).to.eql(expected);
});
it('handles no wrappingComponent', () => {
const node =
));
expect(complexWrapper.find('div ExampleComponent')).to.have.lengthOf(2);
expect(complexWrapper.find('div div ExampleComponent')).to.have.lengthOf(1);
if (name === 'shallow') {
expect(complexWrapper.find('div ExampleComponent nav')).to.have.lengthOf(1);
expect(complexWrapper.find('div ExampleComponent main')).to.have.lengthOf(2);
} else { // shallow does not render the contents of components
expect(complexWrapper.find('div ExampleComponent span')).to.have.lengthOf(2);
expect(complexWrapper.find('div div ExampleComponent span')).to.have.lengthOf(1);
expect(complexWrapper.find('div span')).to.have.lengthOf(2);
expect(complexWrapper.find('div div span')).to.have.lengthOf(1);
}
});
it('direct descendent', () => {
const wrapper = renderMethod((
));
expect(wrapper.find('.to-find')).to.have.lengthOf(3);
const descendent = wrapper.find('.container > .to-find');
expect(descendent).to.have.lengthOf(1);
expect(descendent.text()).to.equal('Direct');
});
it('simple adjacent', () => {
const wrapper = renderMethod((
));
expect(wrapper.find('.sibling')).to.have.lengthOf(2);
const toFind = wrapper.find('.to-find + .sibling');
expect(toFind).to.have.lengthOf(1);
expect(toFind.text()).to.equal('Adjacent');
});
it('simple adjacent with arrays', () => {
const wrapper = renderMethod((
));
expect(wrapper.find('.to-find')).to.have.lengthOf(3);
const toFind = wrapper.find('.to-find + .sibling');
expect(toFind).to.have.lengthOf(2);
toFind.map((found) => expect(found.text()).to.equal('Adjacent'));
});
it('simple general siblings', () => {
const wrapper = renderMethod((
));
expect(wrapper.find('.to-find ~ span')).to.have.lengthOf(3);
});
it('nested general siblings', () => {
const wrapper = renderMethod((
, '[src^="foo"]', true);
expectAttributeMatch(, '[src^="foo-bar"]', true);
expectAttributeMatch(, '[src^="foo-bar.jpg"]', true);
expectAttributeMatch(, '[src^="bar"]', false);
expectAttributeMatch(, '[src^=""]', false);
expectAttributeMatch(
, '[src^=1]', false);
expectAttributeMatch(
, '[src^=1]', false);
});
it('suffix attribute operator', () => {
expectAttributeMatch(, '[src$=".jpg"]', true);
expectAttributeMatch(, '[src$="bar.jpg"]', true);
expectAttributeMatch(, '[src$="foo-bar.jpg"]', true);
expectAttributeMatch(, '[src$="foo"]', false);
expectAttributeMatch(, '[src$=""]', false);
expectAttributeMatch(, '[src$=1]', false);
expectAttributeMatch(, '[src$=1]', false);
});
it('substring attribute operator', () => {
expectAttributeMatch(, '[id*="foo"]', true);
expectAttributeMatch(, '[id*="foo bar"]', true);
expectAttributeMatch(, '[id*="foo bar baz"]', true);
expectAttributeMatch(, '[id*="foo "]', true);
expectAttributeMatch(, '[id*="fo"]', true);
expectAttributeMatch(, '[id*="foz"]', false);
expectAttributeMatch(, '[id*=1]', false);
expectAttributeMatch(, '[id*=1]', false);
expectAttributeMatch(, '[id*=1]', false);
});
itIf(name === 'mount', 'works with an element constructor', () => {
/* eslint-env browser */
const wrapper = renderMethod((
![]()
));
expect(wrapper.find(HTMLButtonElement)).to.have.lengthOf(1);
});
});
});
================================================
FILE: packages/enzyme-test-suite/test/shared/hooks/_hook.template
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import wrap from 'mocha-wrap';
import sinon from 'sinon-sandbox';
import { Portal } from 'react-is';
import { render } from 'enzyme';
import getAdapter from 'enzyme/build/getAdapter';
import {
describeIf,
itIf,
} from '../../_helpers';
import {
is,
REACT16,
} from '../../_helpers/version';
import {
useCallback,
useContext,
useEffect,
useLayoutEffect,
useMemo,
useReducer,
useState,
act,
} from '../../_helpers/react-compat';
export default function describe$Hook({
hasHooks,
Wrap,
WrapRendered,
Wrapper,
WrapperName,
isShallow,
isMount,
makeDOMElement,
}) {
describeIf(hasHooks, 'hooks: $Hook', () => {
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/hooks/custom.jsx
================================================
import React from 'react';
import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import {
describeIf,
} from '../../_helpers';
import {
useEffect,
useState,
} from '../../_helpers/react-compat';
export default function describeCustomHooks({
hasHooks,
Wrap,
isShallow,
}) {
describeIf(hasHooks, 'hooks: custom', () => {
describe('custom hook : useCounter', () => {
function useCounter({ initialCount = 0, step = 1 } = {}) {
const [count, setCount] = useState(initialCount);
const increment = () => setCount((c) => c + step);
const decrement = () => setCount((c) => c - step);
return { count, increment, decrement };
}
// testing custom hooks with renderProps
// may be we can think of adding in utils
// will be repeated
const Counter = ({ children, ...rest }) => children(useCounter(rest));
function setupTest(props) {
const returnVal = {};
Wrap(
{(val) => {
Object.assign(returnVal, val);
return null;
}}
,
);
return returnVal;
}
it('useCounter', () => {
const counterData = setupTest();
counterData.increment();
expect(counterData).to.have.property('count', 1);
counterData.decrement();
expect(counterData).to.have.property('count', 0);
});
it('useCounter with initialCount', () => {
const counterData = setupTest({ initialCount: 2 });
counterData.increment();
expect(counterData).to.have.property('count', 3);
counterData.decrement();
expect(counterData).to.have.property('count', 2);
});
it('useCounter with step', () => {
const counterData = setupTest({ step: 2 });
counterData.increment();
expect(counterData).to.have.property('count', 2);
counterData.decrement();
expect(counterData).to.have.property('count', 0);
});
it('useCounter with step and initialCount', () => {
const counterData = setupTest({ step: 2, initialCount: 5 });
counterData.increment();
expect(counterData).to.have.property('count', 7);
counterData.decrement();
expect(counterData).to.have.property('count', 5);
});
});
// todo: enable shallow when useEffect works in the shallow renderer. see https://github.com/facebook/react/issues/15275
describeIf(!isShallow, 'custom hook: formInput invoke props', () => {
function useFormInput(initialValue = '') {
const [value, setValue] = useState(initialValue);
return {
value,
onChange(e) {
setValue(e.target.value);
},
};
}
function Input(props) {
return (
);
}
function ControlledInputWithEnhancedInput({ searchSomething }) {
const search = useFormInput();
useEffect(
() => {
searchSomething(search.value);
},
[search.value],
);
return ;
}
function ControlledInputWithNativeInput({ searchSomething }) {
const search = useFormInput();
useEffect(
() => {
searchSomething(search.value);
},
[search.value],
);
return ;
}
it('work with native input', () => {
const spy = sinon.spy();
const wrapper = Wrap(
);
}
it('render ui component with initial context value', () => {
const wrapper = Wrap(
);
}
it('test render, get and set context value ', () => {
const wrapper = Wrap(
`,
);
setTimeout(() => {
wrapper.update();
expect(wrapper.debug()).to.equal(
isShallow
? `
`,
);
done();
}, timeout + 1);
});
describe('with mount effect', () => {
const didMountCount = 9;
function FooCounterWithMountEffect({ initialCount = 0 }) {
const [count, setCount] = useState(+initialCount);
useEffect(() => {
setCount(didMountCount);
}, []);
return (
{count}
);
}
it('initial render after did mount effect', () => {
const wrapper = Wrap(
`,
);
setTimeout(() => {
wrapper.update();
expect(wrapper.debug()).to.equal(
isShallow
? `
`,
);
done();
}, timeout + 1);
});
});
it('will receive Props', () => {
function Foo(props) {
const [fooVal, setFooVal] = useState('');
const { initialFooVal } = props;
useEffect(() => {
setFooVal(initialFooVal);
}, [initialFooVal]);
return (
);
}
const wrapper = Wrap(
Loading...
`,
);
expect(wrapper.html()).to.eql('Loading...');
expect(ChatAPI.subscribeToFriendStatus.calledOnceWith(friend.id)).to.equal(true);
});
it('simulate status Change', () => {
const wrapper = Wrap( { this.ref = ref; }} {...this.props} />;
}
}
it('able to call method with imperative handle', () => {
const compute = sinon.spy();
Wrap(
`);
setTimeout(() => {
wrapper.update();
expect(wrapper.debug()).to.equal(isShallow
? `
`);
done();
}, 100);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/hooks/useMemo.jsx
================================================
import React from 'react';
import { expect } from 'chai';
import {
describeIf,
} from '../../_helpers';
import {
useMemo,
} from '../../_helpers/react-compat';
export default function describeUseMemo({
hasHooks,
Wrap,
}) {
describeIf(hasHooks, 'hooks: useMemo', () => {
function RendersNull() {
return null;
}
it('get same value when using `useMemo` and rerender with same prop in dependencies', () => {
function ComponentUsingMemoHook(props) {
const { count } = props;
const memoized = useMemo(() => ({ result: count * 2 }), [count]);
return (
{count}
);
}
const initialCount = 5;
it('initial render', () => {
const wrapper = Wrap(
{count}
);
}
// TODO: fixme when useEffect works in the shallow renderer, see https://github.com/facebook/react/issues/15275
itIf(!isShallow, 'initial render & new Props', () => {
const wrapper = Wrap(
{
);
}
}
ErrorBoundary.defaultProps = {
ThrowerComponent: Thrower,
};
function ErrorSFC(props) {
return
`);
});
});
describe('Own PureComponent implementation', () => {
it('does not update when state and props did not change', () => {
const spy = argSpy();
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'init',
};
}
shouldComponentUpdate(nextProps, nextState) {
spy('shouldComponentUpdate');
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
}
componentDidUpdate() {
spy('componentDidUpdate');
}
render() {
spy('render');
const { foo } = this.state;
return
);
}
};
}
function ErrorSFC({ component }) {
return component();
}
describe('Thrower', () => {
it('does not throw when `throws` is `false`', () => {
expect(() => Wrap( 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 }) => (
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 (
));
expect(wrapper.children().map((x) => x.debug())).to.eql([
`
));
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);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/contains.jsx
================================================
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((
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);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/context.jsx
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import {
itIf,
} from '../../_helpers';
import {
is,
} from '../../_helpers/version';
import {
createClass,
} from '../../_helpers/react-compat';
export default function describeContext({
Wrap,
WrapperName,
isShallow,
}) {
describe('.context()', () => {
const contextTypes = {
name: PropTypes.string,
};
const SimpleComponent = createClass({
contextTypes,
render() {
const { name } = this.context;
return
`;
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()));
});
});
describeIf(is('>= 16.6'), 'React.memo', () => {
describe('display names', () => {
function SFC() { return null; }
function SFCwithDisplayName() { return null; }
SFCwithDisplayName.displayName = 'SFC!';
const SFCMemo = memo && memo(SFC);
const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName);
const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), {
displayName: 'SFCMemoWithDisplayName!',
});
const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), {
displayName: 'SFCMemoWitDoubleDisplayName!',
});
it('displays the expected display names', () => {
expect(SFCMemoWithDisplayName).to.have.property('displayName');
const wrapper = Wrap((
{}} />);
expect(wrapper.debug()).to.equal(`
`);
});
});
});
describe('defaultProps vs no defaultProps', () => {
function Child({ children }) {
return {children} ;
}
function LazyC({ type }) {
return (
);
}
const ComponentWithDefaultProps = React.memo && Object.assign(
React.memo(LazyC),
{
defaultProps: {
type: 'block',
},
propTypes: {
type: PropTypes.oneOf(['block', 'inline']),
},
},
);
const ComponentWithoutDefaultProps = React.memo && Object.assign(
React.memo(LazyC),
{
propTypes: {
type: PropTypes.oneOf(['block', 'inline']),
},
},
);
[ComponentWithDefaultProps, ComponentWithoutDefaultProps].forEach((C) => {
const isWithout = C === ComponentWithoutDefaultProps;
// TODO: remove this ternary, pick either variant
// see https://github.com/enzymejs/enzyme/issues/2471 for details
const Name = isWithout || is('~16.6') ? 'Memo(LazyC)' : 'LazyC';
it(`produces the expected tree ${isWithout ? 'without' : 'with'} defaultProps, no prop provided`, () => {
const wrapper = Wrap(
${isWithout
? ''
: ` `
: `<${Name}${isWithout ? '' : ' type="block"'}>
${isWithout
? ''
: `
`);
});
it(`produces the expected tree ${isWithout ? 'without' : 'with'} defaultProps, prop provided`, () => {
const wrapper = Wrap(
`
: `<${Name} type="inline">
`);
});
});
});
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/deprecatedInstanceProperties.jsx
================================================
import React from 'react';
import { expect } from 'chai';
export default function describeDeprecatedInstanceProperties({
Wrap,
isShallow,
}) {
class Foo extends React.Component {
render() {
return (
);
}
}
describe('deprecated instance properties', () => {
let wrapper;
beforeEach(() => {
wrapper = Wrap(
A span
B span
C span
D span
);
it('finds descendant span inside React.Fragment', () => {
const wrapper = Wrap(
);
const wrapper = WrapRendered(
));
});
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 (
`;
expect(wrapper.debug()).to.equal(expectedDebug);
const inner = wrapper.find('InnerComp');
expect(inner).to.have.lengthOf(1);
const memoInner = wrapper.find('Memo(InnerComp)');
expect(memoInner).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(1);
expect(wrapper.find('.qoo').text()).to.equal('qux');
expect(wrapper.find(InnerMemo)).to.have.lengthOf(inner.length + memoInner.length); // 2
});
it('works with a class component', () => {
class InnerComp extends React.Component {
render() {
return
`;
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');
});
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/findWhere.jsx
================================================
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 selector = 'blah';
const wrapper = Wrap(
{emptyString && }
);
}
}
const selector = 'blah';
const wrapper = Wrap(
`;
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(
`;
expect(wrapper.debug()).to.equal(expectedDebug);
});
context('works with a nested SFC', () => {
const Bar = realArrowFunction(
));
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
['
));
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
['
{children}
);
}
}
class MyComponent extends React.Component {
render() {
const {
testContext,
renderMore,
renderStateTester,
explicitContext,
} = this.context;
return (
{children}
);
}
const wrapper = Wrap((
{(value) =>
), {
wrappingComponent: WrappingComponent,
wrappingComponentProps: { value: 'hello!' },
});
const wrappingComponent = wrapper.getWrappingComponent();
expect(wrapper.text()).to.equal('hello!');
wrappingComponent.setProps({ value: 'goodbye!' });
expect(wrapper.text()).to.equal('goodbye!');
});
itIf(!isShallow, 'handles a partial prop update', () => {
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 FragmentConstExample = () => (
);
class ClassChild extends React.Component {
render() {
return
);
}
}
it('correctly renders html for both children for class', () => {
const classWrapper = 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((
));
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((
));
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(
));
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);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/prop.jsx
================================================
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( );
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( {}} />);
expect(() => wrapper.renderProp()).to.throw(
TypeError,
`${WrapperName}::renderProp(): \`propName\` must be a string`,
);
});
it('throws on a missing prop', () => {
const wrapper = Wrap( {}} />);
expect(() => wrapper.renderProp('nope')).to.throw(
Error,
`${WrapperName}::renderProp(): no prop called “nope“ found`,
);
});
it('throws on a non-function render prop value', () => {
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(is('>= 16.3'), 'calls componentWillReceiveProps and UNSAFE_componentWillReceiveProps when context is updated', () => {
const spy = sinon.spy();
const updatedProps = { foo: 'baz' };
class Foo extends React.Component {
componentWillReceiveProps() {
spy('componentWillReceiveProps');
}
UNSAFE_componentWillReceiveProps() { // eslint-disable-line camelcase
spy('UNSAFE_componentWillReceiveProps');
}
render() {
spy('render');
const { foo } = this.context;
return
`);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/setProps.jsx
================================================
import React from 'react';
import PropTypes from 'prop-types';
import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import {
sym,
} from 'enzyme/build/Utils';
import {
describeIf,
itIf,
} from '../../_helpers';
import { is } from '../../_helpers/version';
export default function describeSetProps({
Wrap,
WrapperName,
isShallow,
isMount,
}) {
describe('.setProps(newProps[, callback)', () => {
class RendersNull extends React.Component {
render() {
return null;
}
}
class Foo extends React.Component {
render() {
const { id, foo } = this.props;
return (
);
}
}
it('throws on a non-function callback', () => {
const wrapper = Wrap(
`.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
? `
`.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', () => {
const wrapper = Wrap(
`.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
? `
`.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 FooNoUpdate extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
const { id, foo } = this.props;
return (
`.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 FooWithLifecycles 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 (
`;
expect(wrapper.debug()).to.equal(expectedDebug);
return new Promise((resolve) => {
wrapper.setState({ childProp: 2 }, () => {
const expectedPostDebug = isShallow
? '
`;
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(abc,
def,
hij,
]}
/>
));
});
context('composite components', () => {
class Foo extends React.Component {
render() { return
abc,
def,
hij,
]}
/>
));
});
const FooSFC = () => (
);
}
}
const FragmentConstExample = () => (
);
it('correctly gets text for both children for class', () => {
const classWrapper = Wrap(
Foo
Bar
);
const wrapper = Wrap(
Foo
Bar
`
: `
<span>
Foo
</span>
Bar
`;
expect(wrapper.debug()).to.equal(expectedDebug);
expect(text).to.equal(isShallow ? '
nope
)).to.throw();
expect(() => elementToTree(
{other}
,
);
it('finds an element in the render tree using a predicate', () => {
expect(findElement(tree, (node) => node.type === Target)).to.eql(target);
});
it('returns undefined if the element cannot be found', () => {
expect(findElement(tree, (node) => node.type === Unfound)).to.equal(undefined);
});
it('returns undefined if some non-element is passed', () => {
expect(findElement({}, (node) => node.type === Target)).to.equal(undefined);
});
});
describe('getNodeFromRootFinder', () => {
const isCustomComponent = (component) => typeof component === 'function';
class Target extends React.Component { render() { return null; } }
class WrappingComponent extends React.Component { render() { return null; } }
const target =
{target}
{foo}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
it('returns a component', () => {
const node =
inside top div
inside top div
inside top div
inside top div
inside top div
inside top div
inside top div
heading
heading
heading
heading
heading
Direct
Nested
Outside
Adjacent
Not Adjacent
{[
));
const toFind = wrapper.find('.to-find + .sibling');
expect(toFind).to.have.lengthOf(1);
expect(toFind.text()).to.equal('Adjacent');
});
it('nested adjacent', () => {
const wrapper = renderMethod((
Adjacent
]}
Adjacent
Not Adjacent
Adjacent
Not Adjacent
Top
));
const spans = wrapper.find('span');
const siblings = wrapper.find('span ~ span');
expect(spans.length - 2).to.equal(siblings.length);
siblings.map((sibling) => expect(sibling.text()).to.not.equal('Top'));
});
it('handles using general siblings on root', () => {
const wrapper = renderMethod();
expect(wrapper.find('.foo ~ .bar')).to.have.lengthOf(0);
});
it('not() pseudo selector', () => {
const wrapper = renderMethod((
Top
first
));
expect(wrapper.find('span:not(.foo, .bar)')).to.have.lengthOf(3);
});
it(':empty pseudo selector', () => {
const wrapper = renderMethod((
first
));
expect(wrapper.find('.foo:empty')).to.have.lengthOf(1);
expect(wrapper.find('.bar:empty')).to.have.lengthOf(0);
});
it('first-child pseudo', () => {
const wrapper = renderMethod((
first
));
expect(wrapper.find('span:first-child').text()).to.equal('first');
});
it('last-child pseudo', () => {
const wrapper = renderMethod((
last
));
expect(wrapper.find('span:last-child').text()).to.equal('last');
});
describeIf(name !== 'mount', ':focus pseudo selector', () => {
// TODO: remove this withGlobal once withDOM is fixed
wrap().withGlobal('document', () => {}).it('throws', () => {
const wrapper = renderMethod((
));
const inputNode = wrapper.find('input');
expect(() => inputNode.is(':focus')).to.throw('Enzyme::Selector does not support the ":focus" pseudo-element without a global `document`.');
});
});
describeIf(name === 'mount', ':focus pseudo selector', () => {
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), 'works in mount with directly focused DOM node', () => {
const wrapper = renderMethod((
));
const inputNode = wrapper.find('input');
expect(inputNode.is(':focus')).to.equal(false);
const inputDOMNode = wrapper.getDOMNode();
inputDOMNode.focus();
expect(inputNode.is(':focus')).to.equal(true);
});
it('works on component in mount', () => {
class ClassComponent extends React.Component {
render() {
return (
);
}
}
const wrapper = renderMethod((
foo1
foo2
foo3
, '[src^="foo"]', true);
expectAttributeMatch(, '[src^="foo-bar"]', true);
expectAttributeMatch(, '[src^="foo-bar.jpg"]', true);
expectAttributeMatch(, '[src^="bar"]', false);
expectAttributeMatch(, '[src^=""]', false);
expectAttributeMatch(, '[src$=".jpg"]', true);
expectAttributeMatch(, '[src$="bar.jpg"]', true);
expectAttributeMatch(, '[src$="foo-bar.jpg"]', true);
expectAttributeMatch(, '[src$="foo"]', false);
expectAttributeMatch(, '[src$=""]', false);
expectAttributeMatch(
{title}
);
}
const customTitle = 'CustomTitle';
function App() {
return (
{myContextVal.state}
);
}
function MyChild() {
return (
{value}
);
}
function ComponentUsingDebugValueAndCallback({ value, fn = (x) => `debug value: ${x}` }) {
useDebugValue(value, fn);
return ({value}
);
}
it('can render component using useDebugValue', () => {
const value = 'foo';
const wrapper = Wrap(
{ctr}
);
}
it('works', (done) => {
const wrapper = Wrap(
1
`
: `
1
2
`
: `
2
1
`
: `
1
2
`
: `
2
{fooVal}
You clicked {count} times
{ctr}
);
}
// TODO: enable when https://github.com/facebook/react/issues/15275 is fixed
itIf(!isShallow, 'works with `useLayoutEffect`', (done) => {
const wrapper = Wrap(
1
`
: `
1
2
`
: `
2
{text}
))}{id.current}
);
}
it('`current` should be the same between two renders', () => {
const wrapper = Wrap({count}
;
}
const wrapper = Wrap( setCount(count + 1)}>{count}
;
}
const wrapper = Wrap(
{didThrow ? 'HasThrown' : 'HasNotThrown'}
{foo}
);
}
}
const wrapper = Wrap({foo}
;
}
}
const wrapper = Wrap(
{foo}
);
}
}
const wrapper = Wrap({foo}
;
}
}
const wrapper = Wrap({foo}
;
}
}
const wrapper = Wrap({c}
;
}
}
it('rerenders on setState when new state is !==, but deeply equal to existing state', () => {
const updateSpy = sinon.spy();
const wrapper = Wrap({`${a} ${b} ${this.renders}`}
;
}
}
const wrapper = Wrap(
false false 1
`
: `
false false 1
{foo}
;
}
}
const wrapper = Wrap(foo
;
}
}
const wrapper = Wrap(
{didThrow ? 'HasThrown' : 'HasNotThrown'}
foo
;
}
}
const wrapper = Wrap({counter} {state}
); } } it('with no state changes, calls both methods with a sync and async setProps', () => { const wrapper = Wrap(
{foo}
);
}
}
const wrapper = Wrap({foo}
;
}
}
const wrapper = Wrap({foo}
;
}
}
const wrapper = Wrap(
{foo}
);
}
}
const wrapper = Wrap(
{didThrow ? 'HasThrown' : 'HasNotThrown'}
foo
;
}
}
Wrap({count}
;
}
}
const result = Wrap({foo}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
foo
;
}
}
const wrapper = Wrap({foo}
;
}
}
const result = Wrap({foo}
;
}
}
const result = Wrap({foo}
;
}
}
const result = Wrap({foo}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
{foo}
;
}
}
const wrapper = Wrap({name}
;
}
}
const result = Wrap({name}
;
}
}
const result = Wrap({foo}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
foo
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
{name}
;
}
}
const result = Wrap(
{name}
;
}
}
const result = Wrap(
BC
).children();
expect(wrapper).to.have.lengthOf(3);
});
it('does not attempt to get an instance for text nodes', () => {
const wrapper = WrapRendered(BC
);
expect(wrapper).to.have.lengthOf(isShallow ? 1 : 3);
});
it('skips the falsy children', () => {
const wrapper = Wrap((
{false}
{[false, false]}
foo
{undefined}
{[undefined, undefined]}
bar
{null}
{[null, null]}
baz
{items.map((x) => x)}
);
}
}
const wrapper = WrapRendered((
{items.map((x) => x)}
);
const wrapper = WrapRendered((
{foo} Bar {foo} Bar {foo}
);
}
}
const wrapper = Wrap({justifiedChildren}
;
}
}
const wrapper = WrapRendered((
foo
bar
baz
foo
`,
' ',
`
bar
`,
' ',
`
baz
`,
]);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/closest.jsx
================================================
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((
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((
{5}
foo
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
));
const fails = [
wrong,
Goodbye
More
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((
{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((
Hello
Goodbye
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);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/containsAnyMatchingElements.jsx
================================================
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);
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/containsMatchingElement.jsx
================================================
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((
{name}
;
},
});
function SimpleComponentSFC(props, { name }) {
return {name}
;
}
SimpleComponentSFC.contextTypes = contextTypes;
it('throws when not called on the root', () => {
const context = { name: };
const wrapper = Wrap(hi
;
}
}
it('throws on non-instance', () => {
const wrapper = Wrap({children}
;
}
}
it('throws on non-root', () => {
const wrapper = Wrap({String(a)}|{String(b)}|{String(c)}
;
}
Add.defaultProps = {
b: 2,
c: 3,
};
const MemoAdd = memo && memo(Add);
it('applies defaultProps to the component', () => {
const wrapper = WrapRendered(
undefined
|
2
|
3
`);
});
it('applies defaultProps to the memoized component', () => {
const wrapper = WrapRendered(
undefined
|
2
|
3
`);
});
it('applies defaultProps to the memoized component and does not override real props', () => {
const wrapper = WrapRendered(
10
|
20
|
3
`);
});
describeIf(is('>= 16.8'), 'full tree', () => {
function TransitionGroup({ children }) { return children; }
function CSSTransition({ children }) { return children; }
function Body({ imageToShow, switchImage }) {
const handlerClick = useCallback(
() => {
if (imageToShow === 1) {
return switchImage(2);
}
return switchImage(1);
},
[imageToShow, switchImage],
);
return (
{type}
block
`}
block
`}
inline
inline
{[]}
);
}
}
const twoChildren = WrapRendered(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((
Text
Text
Text
Text
Text
Text
{a}
{b}
{a}
{b}
{arrayOfComponents}
);
}
}
const wrapper = Wrap(Hello
World
{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(A div
{createPortal(
);
const wrapper = Wrap(InPortal
,
containerDiv,
)}
Successful Portal!
{count}
;
};
const wrapper = Wrap( setCount(count + 1)}>{count}
;
};
const wrapper = Wrap( setCount(count + 1)}>{count}
;
};
const wrapper = Wrap({message}
;
}
const InnerMemo = memo(InnerComp);
const InnerFoo = ({ foo }) => (
bar
{foo}
bar
qux
Hello
find me?
bar
qux
Hello
;
}
}
class Foo extends React.Component {
render() {
const { foo } = this.props;
return (
bar
{foo}
bar
qux
Hello
bar
qux
{''}
;
}
}
const wrapper = WrapRendered(
{selector === 'baz' ? : null}
);
}
}
const selector = 'blah';
const wrapper = Wrap(
Test
Test Component
);
}
}
it('returns props object when props() is called', () => {
const content = 'blah';
const wrapper = WrapRendered(
Test Component
`
: `
Test Component
{selector === 'baz' ? : null}
);
};
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
Hello
);
class Foo extends React.Component {
render() { return foo bar
{null}
{false}
\n foo bar\n
', 'foo bar'], // second div
['foo bar', 'foo bar'], // second div's contents
];
expect(textContents).to.eql(expected);
});
// FIXME: figure out why this fails on 15.0, 15.1 and 15.4
itIf(!is('~15.0 || ~15.1 || ~15.2 || ~15.3 || ~15.4'), 'does not pass in null or false nodes', () => {
const wrapper = Wrap((
foo bar
{null}
{false}
\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((
{null}
{false}
));
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(
);
const wrapper = Wrap(InPortal
,
containerDiv,
)}
{one}
{two}
);
}
}
const wrapper = Wrap(Context says: {testContext}{explicitContext}
{renderMore && {value}
}
{[]}
);
}
}
const twoChildren = WrapRendered(
Hello World!
));
expect(wrapper.html()).to.equal('Hello World!
');
});
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), 'renders out nested composite components', () => {
class Foo extends React.Component {
render() {
return ();
}
}
class Bar extends React.Component {
render() {
return (
Foo
Bar
Foo
Bar
Class child
;
}
}
function SFCChild() {
return SFC child
;
}
class FragmentWithCustomChildClass extends React.Component {
render() {
return (
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
');
});
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/instance.jsx
================================================
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(Hello
Hello
-
{['foo', 'bar', ''].map((s) =>
- {s} )}
- foo
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Bonjour le monde
Hello World
Hello World
Hello World
test
; } } const wrapper = WrapRendered(test
)).to.equal(true); }); }); } ================================================ FILE: packages/enzyme-test-suite/test/shared/methods/name.jsx ================================================ 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() { returnA child
B child
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(`
B child
A child
{counter}
;
}
}
it('child component props should update after call to setState in async handler', () => {
const wrapper = Wrap(
{one}
{two}
{three}
));
const counter = ();
const result = wrapper
.find('.foo')
.reduce((acc, n) => [].concat(acc, n, new Wrapper(counter)))
.map(getWrapperPropSelector('id'));
expect(result).to.eql([one, two, counter, three, counter].map(getElementPropSelector('id')));
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/reduceRight.jsx
================================================
import React from 'react';
import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import { getElementPropSelector, getWrapperPropSelector } from '../../_helpers/selectors';
export default function describeReduceRight({
Wrap,
Wrapper,
}) {
describe('.reduceRight(fn[, initialValue])', () => {
it('has the right length', () => {
expect(Wrapper.prototype.reduceRight).to.have.lengthOf(1);
});
it('calls a function with a wrapper for each node in the wrapper in reverse', () => {
const wrapper = Wrap((
{one}
{two}
{three}
));
const counter = ();
const result = wrapper
.find('.foo')
.reduceRight((acc, n) => [].concat(acc, n, new Wrapper(counter)))
.map(getWrapperPropSelector('id'));
expect(result).to.eql([three, two, counter, one, counter].map(getElementPropSelector('id')));
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/render.jsx
================================================
import React from 'react';
import { expect } from 'chai';
import {
describeIf, itIf,
} from '../../_helpers';
import { is } from '../../_helpers/version';
export default function describeRender({
Wrap,
}) {
describe('.render()', () => {
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), 'returns a cheerio wrapper around the current node', () => {
class Foo extends React.Component {
render() {
return ();
}
}
class Bar extends React.Component {
render() {
return (
{typeof r === 'function' && r()}
;
}
}
class RendersBar extends React.Component {
render() {
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`', () => {
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}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
baz
`
: `
baz
{foo}
;
}
}
Foo.contextTypes = {
foo: PropTypes.string,
};
const wrapper = Wrap(
baz
`
: `
baz
{foo}
);
}
}
function FooSFC({ id, foo }) {
return (
{foo}
);
}
class RendersFoo extends React.Component {
render() {
return (
bar
`.trim()
: `
bar
bar
`.trim()
: `
bar
bar
`.trim()
: `
bar
bar
`.trim()
: `
bar
{foo}
);
}
}
const wrapper = Wrap(
bar
`.trim()
: `
bar
{String(val)}
);
}
}
FooWithLifecycles.contextTypes = {
foo() { return null; },
};
const cWRP = sinon.stub(FooWithLifecycles.prototype, 'componentWillReceiveProps');
// eslint-disable-next-line camelcase
const U_cWRP = sinon.stub(FooWithLifecycles.prototype, 'UNSAFE_componentWillReceiveProps');
const nextProps = { id: 'bar', foo: 'bla' };
const context = { foo: 'bar' };
const wrapper = Wrap({x}
);
}
}
HasContextX.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(
myProp: {myProp}
someState: {someState}
);
}
}
const spy = sinon.spy(Dummy.prototype, 'componentDidUpdate');
const wrapper = Wrap({x}
);
HasContextXSFC.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({count}
);
}
}
class WithSetStateInCWRP extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentWillReceiveProps(nextProps) {
spy('componentWillReceiveProps', this.props, nextProps);
this.setState(({ count }) => ({ count: count + 1 }));
}
componentDidUpdate(prevProps, prevState) {
spy('componentDidUpdate', prevProps, this.props, prevState, this.state);
}
render() {
spy('render', this.props, this.state);
const { count } = this.state;
return ({count}
);
}
}
const oldProps = { a: 'old a', b: 'old b' };
const newProps = { a: 'old a', b: 'new b', d: 'new d' };
const oldState = { count: 0 };
const newState = { count: 1 };
it('calls componentDidUpdate when componentWillReceiveProps without setting state', () => {
const wrapper = Wrap({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(, { disableLifecycleMethods: true });
wrapper.setState({ a: 2 });
expect(wrapper.state('a')).to.equal(2);
expect(spy).to.have.property('callCount', 0);
wrapper.setProps({});
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);
});
});
it('does not call componentWillReceiveProps with multiple keys in props', () => {
class B extends React.Component {
constructor(props) {
super(props);
this.state = { a: 0, b: 1 };
}
componentWillReceiveProps() {
this.setState({ b: 0, a: 1 });
}
render() {
const { a, b } = this.state;
return (
{a + b}
);
}
}
const spy = sinon.spy(B.prototype, 'componentWillReceiveProps');
const wrapper = Wrap(, { 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({});
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 = 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
2
-${' '}
a
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(
click me
));
});
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!isShallow && !is('~15.0 || ~15.1'), 'child should fire onClick', () => {
wrapper.find('.child-elem').simulate('click');
expect(onClick).to.have.property('callCount', 1);
});
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), 'parents should fire onClick', () => {
wrapper.find('.child-elem').parents('.parent-elem').simulate('click');
expect(onClick).to.have.property('callCount', 1);
});
// FIXME: figure out why this fails on 15.0 and 15.1
itIf(!is('~15.0 || ~15.1'), '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);
});
});
describeIf(is('>= 16.6'), 'React.memo', () => {
itIf(isMount, 'can simulate events', () => {
function Child({ onClick }) {
return ;
}
const MemoizedChild = memo(Child);
function Parent(props) {
const { onClick } = props;
return {children}
;
}
}
class Spans extends React.Component {
render() {
return ;
}
}
class Nested extends React.Component {
render() {
return
).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('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__')]);
});
});
});
}
================================================
FILE: packages/enzyme-test-suite/test/shared/methods/slice.jsx
================================================
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((
{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 - xxx
- yyy
- zzz
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(foo
; }
}
itIf(isShallow, 'renders dumbly', () => {
const wrapper = Wrap((
test
test
>
);
});
it('handles spaces the same between shallow and mount', () => {
/* eslint no-multiple-empty-lines: 0 */
const Space = (
test
Hello
World
Hello World
Hello
World
Hello World
{items.map((x) => x)}
);
matchesRender(foo
);
itIf(isShallow, 'renders composite components dumbly', () => {
const wrapper = Wrap((
test
test
{x}
);
expect(wrapper.text()).to.equal(String(x));
});
});
describe('text content with curly braces', () => {
it('handles literal strings', () => {
const wrapper = Wrap({'{}'}
Foo
Bar
Foo
Bar
{id}
);
}
}
it('calls componentWillUnmount()', () => {
const spy = sinon.spy(WillUnmount.prototype, 'componentWillUnmount');
const wrapper = Wrap({name}
;
},
});
const context = { name: 'foo' };
const wrapper = render(foo
');
});
it('can pass context to the child of mounted component', () => {
const SimpleComponent = createClass({
contextTypes: {
name: PropTypes.string,
},
render() {
const { name } = this.context;
return {name};
},
});
const ComplexComponent = createClass({
render() {
return foo
');
expect(String(children)).to.equal('foo');
});
it('does not throw if context is passed in but contextTypes is missing', () => {
const SimpleComponent = createClass({
render() {
const { name } = this.context;
return {name}
;
},
});
const context = { name: 'foo' };
expect(() => render(Dynamic Component
);
}
}
const LazyComponent = lazy(fakeDynamicImport(DynamicComponent));
expect(() => render(