22 | );
23 |
24 | function MyComponent() {
25 | return element;
26 | }
27 |
28 | const wrapper = shallow();
29 | expect(wrapper.getElement()).to.equal(element);
30 | ```
31 |
32 |
33 |
34 | #### Related Methods
35 |
36 | - [`.getElements() => Array`](getElements.md)
37 |
--------------------------------------------------------------------------------
/packages/enzyme-example-mocha/src/Foo.spec.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { shallow, mount } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { expect } from 'chai';
5 | import Foo from './Foo';
6 |
7 | Enzyme.configure({ adapter: new Adapter() });
8 |
9 | describe('A suite', () => {
10 | it('contains spec with an expectation', () => {
11 | expect(shallow().contains()).to.equal(true);
12 | });
13 |
14 | it('contains spec with an expectation', () => {
15 | expect(shallow().is('.foo')).to.equal(true);
16 | });
17 |
18 | it('contains spec with an expectation', () => {
19 | expect(mount().find('.foo').length).to.equal(1);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/findWhere.md:
--------------------------------------------------------------------------------
1 | # `.findWhere(fn) => ReactWrapper`
2 |
3 | Finds every node in the render tree that returns true for the provided predicate function.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `predicate` (`ReactWrapper => Boolean`): A predicate function called with the passed in wrapped
9 | nodes.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `ReactWrapper`: A new wrapper that wraps the found nodes.
16 |
17 |
18 |
19 | #### Example
20 |
21 | ```jsx
22 | const wrapper = mount();
23 | const complexComponents = wrapper.findWhere((n) => typeof n.type() !== 'string');
24 | expect(complexComponents).to.have.lengthOf(8);
25 | ```
26 |
27 |
28 | #### Related Methods
29 |
30 | - [`.find(selector) => ReactWrapper`](find.md)
31 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/findWhere.md:
--------------------------------------------------------------------------------
1 | # `.findWhere(fn) => ShallowWrapper`
2 |
3 | Finds every node in the render tree that returns true for the provided predicate function.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function called with the passed in wrapped
9 | nodes.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `ShallowWrapper`: A new wrapper that wraps the found nodes.
16 |
17 |
18 |
19 | #### Example
20 |
21 | ```jsx
22 | const wrapper = shallow();
23 | const complexComponents = wrapper.findWhere((n) => n.type() !== 'string');
24 | expect(complexComponents).to.have.lengthOf(8);
25 | ```
26 |
27 |
28 | #### Related Methods
29 |
30 | - [`.find(selector) => ShallowWrapper`](find.md)
31 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/childAt.md:
--------------------------------------------------------------------------------
1 | # `.childAt(index) => ReactWrapper`
2 |
3 | Returns a new wrapper with child at the specified index.
4 |
5 | #### Arguments
6 |
7 | 1. `index` (`number`): A zero-based integer indicating which node to retrieve.
8 |
9 |
10 | #### Returns
11 |
12 | `ReactWrapper`: A new wrapper that wraps the resulting node.
13 |
14 |
15 |
16 | #### Examples
17 |
18 | ```jsx
19 | const wrapper = mount();
20 | expect(wrapper.find('ul').childAt(0).type()).to.equal('li');
21 | ```
22 |
23 | #### Related Methods
24 |
25 | - [`.parents([selector]) => ReactWrapper`](parents.md)
26 | - [`.parent() => ReactWrapper`](parent.md)
27 | - [`.closest(selector) => ReactWrapper`](closest.md)
28 | - [`.children([selector]) => ReactWrapper`](children.md)
29 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/context.md:
--------------------------------------------------------------------------------
1 | # `.context([key]) => Any`
2 |
3 | Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it
4 | will return just that value.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the
10 | root component instance.
11 |
12 |
13 |
14 | #### Example
15 |
16 |
17 | ```jsx
18 | const wrapper = mount(
19 | ,
20 | { context: { foo: 10 } },
21 | );
22 |
23 | expect(wrapper.context().foo).to.equal(10);
24 | expect(wrapper.context('foo')).to.equal(10);
25 | ```
26 |
27 |
28 | #### Related Methods
29 |
30 | - [`.state([key]) => Any`](state.md)
31 | - [`.props() => Object`](props.md)
32 | - [`.prop(key) => Any`](prop.md)
33 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/context.md:
--------------------------------------------------------------------------------
1 | # `.context([key]) => Any`
2 |
3 | Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it
4 | will return just that value.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the
10 | root component instance.
11 |
12 |
13 |
14 | #### Example
15 |
16 |
17 | ```jsx
18 | const wrapper = shallow(
19 | ,
20 | { context: { foo: 10 } },
21 | );
22 | expect(wrapper.context().foo).to.equal(10);
23 | expect(wrapper.context('foo')).to.equal(10);
24 | ```
25 |
26 |
27 | #### Related Methods
28 |
29 | - [`.props() => Object`](props.md)
30 | - [`.prop(key) => Any`](prop.md)
31 | - [`.state([key]) => Any`](state.md)
32 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/at.md:
--------------------------------------------------------------------------------
1 | # `.at(index) => ReactWrapper`
2 |
3 | Returns a wrapper around the node at a given index of the current wrapper.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `ReactWrapper`: A new wrapper that wraps the retrieved node.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = mount();
22 | expect(wrapper.find(Foo).at(0).props().foo).to.equal('bar');
23 | ```
24 |
25 |
26 |
27 | #### Related Methods
28 |
29 | - [`.get(index) => ReactElement`](get.md) - same, but returns the React node itself, with no wrapper.
30 | - [`.first() => ReactWrapper`](first.md) - same as at(0)
31 | - [`.last() => ReactWrapper`](last.md)
32 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/hostNodes.md:
--------------------------------------------------------------------------------
1 | # `.hostNodes() => ReactWrapper`
2 |
3 | Returns a new wrapper with only host nodes.
4 | When using `react-dom`, host nodes are HTML elements rather than custom React components, e.g. `
` versus ``.
5 |
6 |
7 | #### Returns
8 |
9 | `ReactWrapper`: A new wrapper that wraps the filtered nodes.
10 |
11 |
12 | #### Examples
13 |
14 | The following code takes a wrapper with two nodes, one a `` React component, and the other a ``, and filters out the React component.
15 |
16 | ```jsx
17 | const wrapper = mount((
18 |
19 |
20 |
21 |
22 | ));
23 | const twoNodes = wrapper.find('.foo');
24 | expect(twoNodes.hostNodes()).to.have.lengthOf(1);
25 | ```
26 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/childAt.md:
--------------------------------------------------------------------------------
1 | # `.childAt(index) => ShallowWrapper`
2 |
3 | Returns a new wrapper with child at the specified index.
4 |
5 | #### Arguments
6 |
7 | 1. `index` (`number`): A zero-based integer indicating which node to retrieve.
8 |
9 |
10 | #### Returns
11 |
12 | `ShallowWrapper`: A new wrapper that wraps the resulting node.
13 |
14 |
15 |
16 | #### Examples
17 |
18 | ```jsx
19 | const wrapper = shallow();
20 | expect(wrapper.find('ul').childAt(0).type()).to.equal('li');
21 | ```
22 |
23 | #### Related Methods
24 |
25 | - [`.parents([selector]) => ShallowWrapper`](parents.md)
26 | - [`.parent() => ShallowWrapper`](parent.md)
27 | - [`.closest(selector) => ShallowWrapper`](closest.md)
28 | - [`.children([selector]) => ShallowWrapper`](children.md)
29 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/getElements.md:
--------------------------------------------------------------------------------
1 | # `.getElements() => Array`
2 |
3 | Returns the wrapped ReactElements
4 |
5 | If the current wrapper is wrapping the root component, returns the root component's latest render output wrapped in an array.
6 |
7 |
8 | #### Returns
9 |
10 | `Array`: The retrieved ReactElements.
11 |
12 |
13 |
14 | #### Examples
15 |
16 | ```jsx
17 | const one = ;
18 | const two = ;
19 |
20 | function Test() {
21 | return (
22 |
23 | {one}
24 | {two}
25 |
26 | );
27 | }
28 |
29 | const wrapper = mount();
30 | expect(wrapper.find('span').getElements()).to.deep.equal([one, two]);
31 | ```
32 |
33 |
34 |
35 | #### Related Methods
36 |
37 | - [`.getElement() => ReactElement`](getElement.md)
38 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/at.md:
--------------------------------------------------------------------------------
1 | # `.at(index) => ShallowWrapper`
2 |
3 | Returns a wrapper around the node at a given index of the current wrapper.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `ShallowWrapper`: A new wrapper that wraps the retrieved node.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = shallow();
22 | expect(wrapper.find(Foo).at(0).props().foo).to.equal('bar');
23 | ```
24 |
25 |
26 |
27 | #### Related Methods
28 |
29 | - [`.get(index) => ReactElement`](get.md) - same, but returns the React node itself, with no wrapper.
30 | - [`.first() => ShallowWrapper`](first.md) - same as at(0)
31 | - [`.last() => ShallowWrapper`](last.md)
32 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/getElements.md:
--------------------------------------------------------------------------------
1 | # `.getElements() => Array`
2 |
3 | Returns the wrapped ReactElements
4 |
5 | If the current wrapper is wrapping the root component, returns the root component's latest render output wrapped in an array.
6 |
7 |
8 | #### Returns
9 |
10 | `Array`: The retrieved ReactElements.
11 |
12 |
13 |
14 | #### Examples
15 |
16 | ```jsx
17 | const one = ;
18 | const two = ;
19 |
20 | function Test() {
21 | return (
22 |
23 | {one}
24 | {two}
25 |
26 | );
27 | }
28 |
29 | const wrapper = shallow();
30 | expect(wrapper.find('span').getElements()).to.deep.equal([one, two]);
31 | ```
32 |
33 |
34 |
35 | #### Related Methods
36 |
37 | - [`.getElement() => ReactElement`](getElement.md)
38 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/hostNodes.md:
--------------------------------------------------------------------------------
1 | # `.hostNodes() => ShallowWrapper`
2 |
3 | Returns a new wrapper with only host nodes.
4 | When using `react-dom`, host nodes are HTML elements rather than custom React components, e.g. `
` versus ``.
5 |
6 |
7 | #### Returns
8 |
9 | `ShallowWrapper`: A new wrapper that wraps the filtered nodes.
10 |
11 |
12 | #### Examples
13 |
14 | The following code takes a wrapper with two nodes, one a `` React component, and the other a ``, and filters out the React component.
15 |
16 | ```jsx
17 | const wrapper = shallow((
18 |
19 |
20 |
21 |
22 | ));
23 | const twoNodes = wrapper.find('.foo');
24 | expect(twoNodes.hostNodes()).to.have.lengthOf(1);
25 | ```
26 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/filterWhere.md:
--------------------------------------------------------------------------------
1 | # `.filterWhere(fn) => ReactWrapper`
2 |
3 | Returns a new wrapper with only the nodes of the current wrapper that, when passed into the
4 | provided predicate function, return true.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `predicate` (`ReactWrapper => Boolean`): A predicate function that is passed a wrapped node.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `ReactWrapper`: A new wrapper that wraps the filtered nodes.
16 |
17 |
18 |
19 | #### Example
20 |
21 | ```jsx
22 | const wrapper = mount();
23 | const complexComponents = wrapper.find('.foo').filterWhere((n) => typeof n.type() !== 'string');
24 | expect(complexComponents).to.have.lengthOf(4);
25 | ```
26 |
27 |
28 | #### Related Methods
29 |
30 | - [`.filter(selector) => ReactWrapper`](filter.md)
31 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/filterWhere.md:
--------------------------------------------------------------------------------
1 | # `.filterWhere(fn) => ShallowWrapper`
2 |
3 | Returns a new wrapper with only the nodes of the current wrapper that, when passed into the
4 | provided predicate function, return true.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function that is passed a wrapped node.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `ShallowWrapper`: A new wrapper that wraps the filtered nodes.
16 |
17 |
18 |
19 | #### Example
20 |
21 | ```jsx
22 | const wrapper = shallow();
23 | const complexFoo = wrapper.find('.foo').filterWhere((n) => typeof n.type() !== 'string');
24 | expect(complexFoo).to.have.lengthOf(4);
25 | ```
26 |
27 |
28 | #### Related Methods
29 |
30 | - [`.filter(selector) => ShallowWrapper`](filter.md)
31 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/someWhere.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 |
4 | export default function describeSomeWhere({
5 | Wrap,
6 | }) {
7 | describe('.someWhere(predicate)', () => {
8 | it('returns if a node matches a predicate', () => {
9 | const wrapper = Wrap((
10 |
11 |
12 |
13 |
14 |
15 | ));
16 | const foo = wrapper.find('.foo');
17 | expect(foo.someWhere((n) => n.hasClass('qoo'))).to.equal(true);
18 | expect(foo.someWhere((n) => n.hasClass('foo'))).to.equal(true);
19 | expect(foo.someWhere((n) => n.hasClass('bar'))).to.equal(false);
20 | });
21 | });
22 | }
23 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/not.md:
--------------------------------------------------------------------------------
1 | # `.not(selector) => ReactWrapper`
2 |
3 | Returns a new wrapper with only the nodes of the current wrapper that don't match the provided
4 | selector.
5 |
6 | This method is effectively the negation or inverse of [`filter`](filter.md).
7 |
8 |
9 | #### Arguments
10 |
11 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ReactWrapper`: A new wrapper that wraps the filtered nodes.
18 |
19 |
20 |
21 | #### Examples
22 |
23 | ```jsx
24 | const wrapper = mount();
25 | expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);
26 | ```
27 |
28 | #### Related Methods
29 |
30 | - [`.filterWhere(predicate) => ReactWrapper`](filterWhere.md)
31 | - [`.filter(selector) => ReactWrapper`](filter.md)
32 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/everyWhere.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 |
4 | export default function describeEveryWhere({
5 | Wrap,
6 | }) {
7 | describe('.everyWhere(predicate)', () => {
8 | it('returns if every node matches a predicate', () => {
9 | const wrapper = Wrap((
10 |
11 |
12 |
13 |
14 |
15 | ));
16 | const foo = wrapper.find('.foo');
17 | expect(foo.everyWhere((n) => n.hasClass('foo'))).to.equal(true);
18 | expect(foo.everyWhere((n) => n.hasClass('qoo'))).to.equal(false);
19 | expect(foo.everyWhere((n) => n.hasClass('bar'))).to.equal(false);
20 | });
21 | });
22 | }
23 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/not.md:
--------------------------------------------------------------------------------
1 | # `.not(selector) => ShallowWrapper`
2 |
3 | Returns a new wrapper with only the nodes of the current wrapper that don't match the provided
4 | selector.
5 |
6 | This method is effectively the negation or inverse of [`filter`](filter.md).
7 |
8 |
9 | #### Arguments
10 |
11 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ShallowWrapper`: A new wrapper that wraps the filtered nodes.
18 |
19 |
20 |
21 | #### Examples
22 |
23 | ```jsx
24 | const wrapper = shallow();
25 | expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);
26 | ```
27 |
28 | #### Related Methods
29 |
30 | - [`.filterWhere(predicate) => ShallowWrapper`](filterWhere.md)
31 | - [`.filter(selector) => ShallowWrapper`](filter.md)
32 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/not.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 |
4 | export default function describeNot({
5 | Wrap,
6 | }) {
7 | describe('.not(selector)', () => {
8 | it('filters to things not matching a selector', () => {
9 | const wrapper = Wrap((
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | ));
18 |
19 | expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);
20 | expect(wrapper.find('.baz').not('.foo')).to.have.lengthOf(2);
21 | expect(wrapper.find('.foo').not('div')).to.have.lengthOf(0);
22 | });
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/closest.md:
--------------------------------------------------------------------------------
1 | # `.closest(selector) => ReactWrapper`
2 |
3 | Returns a wrapper of the first element that matches the selector by traversing up through the
4 | wrapped node's ancestors in the tree, starting with itself. It must be a single-node wrapper.
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 | #### Returns
11 |
12 | `ReactWrapper`: A new wrapper that wraps the resulting node.
13 |
14 |
15 |
16 | #### Examples
17 |
18 | ```jsx
19 | const wrapper = mount();
20 | expect(wrapper.find(Foo).closest('.bar')).to.have.lengthOf(1);
21 | ```
22 |
23 | #### Related Methods
24 |
25 | - [`.children([selector]) => ReactWrapper`](children.md)
26 | - [`.parent() => ReactWrapper`](parent.md)
27 | - [`.parents([selector]) => ReactWrapper`](parents.md)
28 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/_helpers/describeMethods.js:
--------------------------------------------------------------------------------
1 | export default function describeMethods({
2 | Wrap,
3 | Wrapper,
4 | }, ...methods) {
5 | const WrapperName = Wrapper.name;
6 | const isShallow = WrapperName === 'ShallowWrapper';
7 | const isMount = WrapperName === 'ReactWrapper';
8 | const hasDOM = isMount;
9 | const makeDOMElement = () => (hasDOM ? global.document.createElement('div') : { nodeType: 1 });
10 |
11 | methods.forEach((method) => {
12 | // eslint-disable-next-line global-require, import/no-dynamic-require
13 | require(`../shared/methods/${method}`)({
14 | Wrap,
15 | WrapRendered: isShallow ? Wrap : (...args) => Wrap(...args).children(),
16 | Wrapper,
17 | WrapperName,
18 | isShallow,
19 | isMount,
20 | hasDOM,
21 | makeDOMElement,
22 | });
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/closest.md:
--------------------------------------------------------------------------------
1 | # `.closest(selector) => ShallowWrapper`
2 |
3 | Returns a wrapper of the first element that matches the selector by traversing up through the
4 | wrapped node's ancestors in the tree, starting with itself. It must be a single-node wrapper.
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 | #### Returns
11 |
12 | `ShallowWrapper`: A new wrapper that wraps the resulting node.
13 |
14 |
15 |
16 | #### Examples
17 |
18 | ```jsx
19 | const wrapper = shallow();
20 | expect(wrapper.find(Foo).closest('.bar')).to.have.lengthOf(1);
21 | ```
22 |
23 | #### Related Methods
24 |
25 | - [`.children([selector]) => ShallowWrapper`](children.md)
26 | - [`.parent() => ShallowWrapper`](parent.md)
27 | - [`.parents([selector]) => ShallowWrapper`](parents.md)
28 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/lifecycles/componentWillUnmount.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import sinon from 'sinon-sandbox';
3 | import { expect } from 'chai';
4 |
5 | export default function describeCWU({
6 | Wrap,
7 | }) {
8 | describe('componentWillUnmount', () => {
9 | it('calls componentWillUnmount', () => {
10 | const spy = sinon.spy();
11 | class Foo extends React.Component {
12 | componentWillUnmount() {
13 | spy('componentWillUnmount');
14 | }
15 |
16 | render() {
17 | spy('render');
18 | return
foo
;
19 | }
20 | }
21 | const wrapper = Wrap();
22 | wrapper.unmount();
23 | expect(spy.args).to.deep.equal([
24 | ['render'],
25 | ['componentWillUnmount'],
26 | ]);
27 | });
28 | });
29 | }
30 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/text.md:
--------------------------------------------------------------------------------
1 | # `.text() => String`
2 |
3 | Returns a string of the rendered text of the current render tree. This function should be
4 | looked at with skepticism if being used to test what the actual HTML output of the component
5 | will be. If that is what you would like to test, use enzyme's `render` function instead.
6 |
7 | Note: can only be called on a wrapper of a single node.
8 |
9 |
10 | #### Returns
11 |
12 | `String`: The resulting string
13 |
14 |
15 | #### Examples
16 |
17 | ```jsx
18 | const wrapper = shallow(
);
28 | expect(wrapper.text()).to.equal('This is really important');
29 | ```
30 |
31 |
32 | #### Related Methods
33 |
34 | [`.html() => String`](html.md)
35 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/parents.md:
--------------------------------------------------------------------------------
1 | # `.parents([selector]) => ShallowWrapper`
2 |
3 | Returns a wrapper around all of the parents/ancestors of the single node in the wrapper. Does not include the node itself.
4 | Optionally, a selector can be provided and it will filter the parents by this selector. It must be a single-node wrapper.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `selector` ([`EnzymeSelector`](../selector.md) [optional]): The selector to filter the parents by.
10 |
11 |
12 | #### Returns
13 |
14 | `ShallowWrapper`: A new wrapper that wraps the resulting nodes.
15 |
16 |
17 | #### Examples
18 |
19 | ```jsx
20 | const wrapper = shallow();
21 | expect(wrapper.find('ul').parents()).to.have.lengthOf(2);
22 | ```
23 |
24 | #### Related Methods
25 |
26 | - [`.children([selector]) => ShallowWrapper`](children.md)
27 | - [`.parent() => ShallowWrapper`](parent.md)
28 | - [`.closest(selector) => ShallowWrapper`](closest.md)
29 |
--------------------------------------------------------------------------------
/packages/enzyme/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "parser": "@babel/eslint-parser",
4 | "root": true,
5 | "ignorePatterns": ["build/"],
6 | "env": {
7 | "node": true,
8 | "mocha": true
9 | },
10 | "rules": {
11 | "id-length": 0,
12 | "max-classes-per-file": 0,
13 | "new-cap": [2, { "capIsNewExceptions": ["AND"] }],
14 | "react/jsx-pascal-case": [2, { "allowAllCaps": true }],
15 | "react/no-find-dom-node": 1,
16 | "import/first": 0,
17 | "no-underscore-dangle": [2, {
18 | "allowAfterThis": true,
19 | "allow": [
20 | "_context",
21 | "_currentElement",
22 | "_instance",
23 | "_reactInternalComponent",
24 | "_reactInternalInstance",
25 | "_renderedChildren",
26 | "_renderedComponent",
27 | "_renderedNodeType",
28 | "_state",
29 | "_store",
30 | "_stringText",
31 | ],
32 | }],
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/getElements.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 | import { itIf } from '../../_helpers';
4 | import { is } from '../../_helpers/version';
5 |
6 | export default function describeGetElements({
7 | Wrap,
8 | }) {
9 | describe('.getElements()', () => {
10 | // FIXME: figure out why this fails on 15.0, 15.1, 15.2 and 15.3
11 | itIf(!is('~15.0 || ~15.1 || ~15.2 || ~15.3'), 'returns the wrapped elements', () => {
12 | const one = ;
13 | const two = ;
14 |
15 | class Test extends React.Component {
16 | render() {
17 | return (
18 |
19 | {one}
20 | {two}
21 |
22 | );
23 | }
24 | }
25 |
26 | const wrapper = Wrap();
27 | expect(wrapper.find('span').getElements()).to.deep.equal([one, two]);
28 | });
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/name.md:
--------------------------------------------------------------------------------
1 | # `.name() => String|null`
2 |
3 | Returns the name of the current node of this wrapper. If it's a composite component, this will be
4 | the name of the component. If it's a native DOM node, it will be a string of the tag name. If it's
5 | `null`, it will be `null`.
6 |
7 | The order of precedence on returning the name is: `type.displayName` -> `type.name` -> `type`.
8 |
9 | Note: can only be called on a wrapper of a single node.
10 |
11 |
12 | #### Returns
13 |
14 | `String|null`: The name of the current node
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = mount();
22 | expect(wrapper.name()).to.equal('div');
23 | ```
24 |
25 | ```jsx
26 | const wrapper = mount();
27 | expect(wrapper.name()).to.equal('Foo');
28 | ```
29 |
30 | ```jsx
31 | Foo.displayName = 'A cool custom name';
32 | const wrapper = mount();
33 | expect(wrapper.name()).to.equal('A cool custom name');
34 | ```
35 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/invoke.md:
--------------------------------------------------------------------------------
1 | # `.invoke(invokePropName)(...args) => Any`
2 |
3 | Invokes a function prop.
4 |
5 | #### Arguments
6 |
7 | 1. `propName` (`String`): The function prop that is invoked
8 | 2. `...args` (`Any` [optional]): Arguments that is passed to the prop function
9 |
10 | This essentially calls wrapper.prop(propName)(...args).
11 |
12 | #### Returns
13 |
14 | `Any`: Returns the value from the prop function
15 |
16 | #### Example
17 |
18 | ```jsx
19 | class Foo extends React.Component {
20 | loadData() {
21 | return fetch();
22 | }
23 |
24 | render() {
25 | return (
26 |
27 |
33 |
34 | );
35 | }
36 | }
37 | const wrapper = shallow();
38 | wrapper.find('button').invoke('onClick')().then(() => {
39 | // expect()
40 | });
41 | ```
42 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/every.md:
--------------------------------------------------------------------------------
1 | # `.every(selector) => Boolean`
2 |
3 | Returns whether or not all of the nodes in the wrapper match the provided selector.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if every node in the current wrapper matched the provided selector.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = mount((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').every('.foo')).to.equal(true);
29 | expect(wrapper.find('.foo').every('.qoo')).to.equal(false);
30 | expect(wrapper.find('.foo').every('.bar')).to.equal(false);
31 | ```
32 |
33 | #### Related Methods
34 |
35 | - [`.someWhere(predicate) => Boolean`](someWhere.md)
36 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
37 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/every.md:
--------------------------------------------------------------------------------
1 | # `.every(selector) => Boolean`
2 |
3 | Returns whether or not all of the nodes in the wrapper match the provided selector.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if every node in the current wrapper matched the provided selector.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = shallow((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').every('.foo')).to.equal(true);
29 | expect(wrapper.find('.foo').every('.qoo')).to.equal(false);
30 | expect(wrapper.find('.foo').every('.bar')).to.equal(false);
31 | ```
32 |
33 | #### Related Methods
34 |
35 | - [`.someWhere(predicate) => Boolean`](someWhere.md)
36 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
37 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/unmount.md:
--------------------------------------------------------------------------------
1 | # `.unmount() => Self`
2 |
3 | A method that unmounts the component. This can be used to simulate a component going through
4 | an unmount/mount lifecycle.
5 |
6 | #### Returns
7 |
8 | `ShallowWrapper`: Returns itself.
9 |
10 |
11 |
12 | #### Example
13 |
14 | ```jsx
15 | import PropTypes from 'prop-types';
16 | import sinon from 'sinon';
17 |
18 | const spy = sinon.spy();
19 |
20 | class Foo extends React.Component {
21 | constructor(props) {
22 | super(props);
23 | this.componentWillUnmount = spy;
24 | }
25 |
26 | render() {
27 | const { id } = this.props;
28 | return (
29 |
21 | );
22 | }
23 |
24 | it('`current` should be the same between two renders', () => {
25 | const wrapper = Wrap();
26 |
27 | const childBefore = wrapper.find('div').prop('children');
28 | wrapper.setProps({ foo: 'bar' });
29 | const childAfter = wrapper.find('div').prop('children');
30 |
31 | expect(childBefore).to.equal(childAfter);
32 | });
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/hooks/_hook.template:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { expect } from 'chai';
4 | import wrap from 'mocha-wrap';
5 | import sinon from 'sinon-sandbox';
6 | import { Portal } from 'react-is';
7 |
8 | import { render } from 'enzyme';
9 | import getAdapter from 'enzyme/build/getAdapter';
10 |
11 | import {
12 | describeIf,
13 | itIf,
14 | } from '../../_helpers';
15 | import {
16 | is,
17 | REACT16,
18 | } from '../../_helpers/version';
19 |
20 | import {
21 | useCallback,
22 | useContext,
23 | useEffect,
24 | useLayoutEffect,
25 | useMemo,
26 | useReducer,
27 | useState,
28 | act,
29 | } from '../../_helpers/react-compat';
30 |
31 | export default function describe$Hook({
32 | hasHooks,
33 | Wrap,
34 | WrapRendered,
35 | Wrapper,
36 | WrapperName,
37 | isShallow,
38 | isMount,
39 | makeDOMElement,
40 | }) {
41 | describeIf(hasHooks, 'hooks: $Hook', () => {
42 | });
43 | }
44 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/forEach.md:
--------------------------------------------------------------------------------
1 | # `.forEach(fn) => Self`
2 |
3 | Iterates through each node of the current wrapper and executes the provided function with a
4 | wrapper around the corresponding node passed in as the first argument.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function ( ReactWrapper node, Number index )`): A callback to be run for every node in the collection.
10 | Should expect a ReactWrapper as the first argument, and will be run with a context of the original
11 | instance.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ReactWrapper`: Returns itself.
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | const wrapper = mount((
25 |
26 |
27 |
28 |
29 |
30 | ));
31 |
32 | wrapper.find('.foo').forEach((node) => {
33 | expect(node.hasClass('foo')).to.equal(true);
34 | });
35 | ```
36 |
37 |
38 | #### Related Methods
39 |
40 | - [`.map(fn) => ReactWrapper`](map.md)
41 |
--------------------------------------------------------------------------------
/docs/future.md:
--------------------------------------------------------------------------------
1 | # Future Work
2 |
3 | Discussion of additional features and support for enzyme should be initiated by opening a
4 | [GitHub issue](https://github.com/enzymejs/enzyme/issues).
5 |
6 | There are several things we'd like to address with enzyme that often get asked. Here are a couple
7 | of projects that we plan on addressing in the near future:
8 |
9 |
10 | #### Improved event simulation and propagation support
11 |
12 | Event simulation is limited for Shallow rendering. Event propagation is not supported, and one must
13 | supply their own event objects. We would like to provide tools to more fully simulate real
14 | interaction.
15 |
16 |
17 | ### Improved Keyboard + Mouse Simulation
18 |
19 | Many react components involve simulating form input or complex mouse interaction. Simulating this
20 | using the event simulation API that enzyme provides is cumbersome and impractical. We are looking for
21 | an expressive way to solve this problem, even if it is a library that lives outside of enzyme.
22 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/forEach.md:
--------------------------------------------------------------------------------
1 | # `.forEach(fn) => Self`
2 |
3 | Iterates through each node of the current wrapper and executes the provided function with a
4 | wrapper around the corresponding node passed in as the first argument.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function ( ShallowWrapper node, Number index )`): A callback to be run for every node in the collection.
10 | Should expect a ShallowWrapper as the first argument, and will be run with a context of the original
11 | instance.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ShallowWrapper`: Returns itself.
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | const wrapper = shallow((
25 |
26 |
27 |
28 |
29 |
30 | ));
31 |
32 | wrapper.find('.foo').forEach((node) => {
33 | expect(node.hasClass('foo')).to.equal(true);
34 | });
35 | ```
36 |
37 |
38 | #### Related Methods
39 |
40 | - [`.map(fn) => ShallowWrapper`](map.md)
41 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/hasClass.md:
--------------------------------------------------------------------------------
1 | # `.hasClass(className) => Boolean`
2 |
3 | Returns whether or not the wrapped node has a `className` prop including the passed in class name. It must be a single-node wrapper.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `className` (`String` | `RegExp`): A single class name or a regex expression.
9 |
10 |
11 | #### Returns
12 |
13 | `Boolean`: whether or not the wrapped node has the class.
14 |
15 |
16 | #### Example
17 |
18 |
19 | ```jsx
20 | const wrapper = shallow();
21 | expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
22 | ```
23 |
24 | ```jsx
25 | // Searching using RegExp works fine when classes were injected by a jss decorator
26 | const wrapper = shallow();
27 | expect(wrapper.find('.my-button').hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(true);
28 | ```
29 |
30 | ### Common Gotchas
31 |
32 | - `.hasClass()` expects a class name, NOT a CSS selector. `.hasClass('.foo')` should be
33 | `.hasClass('foo')`
34 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/hasClass.md:
--------------------------------------------------------------------------------
1 | # `.hasClass(className) => Boolean`
2 |
3 | Returns whether or not the wrapped node has a `className` prop including the passed in class name. It must be a single-node wrapper.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `className` (`String` | `RegExp`): A single class name or a regex expression.
9 |
10 |
11 | #### Returns
12 |
13 | `Boolean`: whether or not the wrapped node has found the class name.
14 |
15 |
16 | #### Examples
17 |
18 |
19 | ```jsx
20 | const wrapper = mount();
21 | expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);
22 | ```
23 |
24 | ```jsx
25 | // Searching using RegExp works fine when classes were injected by a jss decorator
26 | const wrapper = mount();
27 | expect(wrapper.find('.my-button').hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(true);
28 | ```
29 |
30 | ### Common Gotchas
31 |
32 | - `.hasClass()` expects a class name, NOT a CSS selector. `.hasClass('.foo')` should be
33 | `.hasClass('foo')`
34 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/some.md:
--------------------------------------------------------------------------------
1 | # `.some(selector) => Boolean`
2 |
3 | Returns whether or not any of the nodes in the wrapper match the provided selector.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if at least one of the nodes in the current wrapper matched the provided selector.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = mount((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').some('.qoo')).to.equal(true);
29 | expect(wrapper.find('.foo').some('.foo')).to.equal(true);
30 | expect(wrapper.find('.foo').some('.bar')).to.equal(false);
31 | ```
32 |
33 | #### Related Methods
34 |
35 | - [`.someWhere(predicate) => Boolean`](someWhere.md)
36 | - [`.every(selector) => Boolean`](every.md)
37 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
38 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/some.md:
--------------------------------------------------------------------------------
1 | # `.some(selector) => Boolean`
2 |
3 | Returns whether or not any of the nodes in the wrapper match the provided selector.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `selector` ([`EnzymeSelector`](../selector.md)): The selector to match.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if at least one of the nodes in the current wrapper matched the provided selector.
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = shallow((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').some('.qoo')).to.equal(true);
29 | expect(wrapper.find('.foo').some('.foo')).to.equal(true);
30 | expect(wrapper.find('.foo').some('.bar')).to.equal(false);
31 | ```
32 |
33 | #### Related Methods
34 |
35 | - [`.someWhere(predicate) => Boolean`](someWhere.md)
36 | - [`.every(selector) => Boolean`](every.md)
37 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
38 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/html.md:
--------------------------------------------------------------------------------
1 | # `.html() => String`
2 |
3 | Returns a string of the rendered HTML markup of the current render tree. See also [`.debug()`](debug.md)
4 |
5 | Note: can only be called on a wrapper of a single node.
6 |
7 |
8 | #### Returns
9 |
10 | `String`: The resulting HTML string
11 |
12 |
13 |
14 | #### Examples
15 |
16 | ```jsx
17 | function Foo() {
18 | return ();
19 | }
20 | ```
21 |
22 | ```jsx
23 | function Bar() {
24 | return (
25 |
');
41 | ```
42 |
43 |
44 | #### Related Methods
45 |
46 | [`.text() => String`](text.md)
47 |
--------------------------------------------------------------------------------
/packages/enzyme/src/render.js:
--------------------------------------------------------------------------------
1 | import getAdapter from './getAdapter';
2 | import { loadCheerioRoot } from './Utils';
3 |
4 | /**
5 | * Renders a react component into static HTML and provides a cheerio wrapper around it. This is
6 | * somewhat asymmetric with `mount` and `shallow`, which don't use any external libraries, but
7 | * Cheerio's API is pretty close to what we actually want and has a significant amount of utility
8 | * that would be recreating the wheel if we didn't use it.
9 | *
10 | * I think there are a lot of good use cases to use `render` instead of `shallow` or `mount`, and
11 | * thus I'd like to keep this API in here even though it's not really "ours".
12 | *
13 | * @param node
14 | * @param options
15 | * @returns {Cheerio}
16 | */
17 |
18 | export default function render(node, options = {}) {
19 | const adapter = getAdapter(options);
20 | const renderer = adapter.createRenderer({ mode: 'string', ...options });
21 | const html = renderer.render(node, options.context);
22 | return loadCheerioRoot(html);
23 | }
24 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/everyWhere.md:
--------------------------------------------------------------------------------
1 | # `.everyWhere(fn) => Boolean`
2 |
3 | Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `predicate` (`ReactWrapper => Boolean`): A predicate function to match the nodes.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if every node in the current wrapper passed the predicate function.
15 |
16 |
17 |
18 | #### Example
19 |
20 | ```jsx
21 | const wrapper = mount((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('foo'))).to.equal(true);
29 | expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('qoo'))).to.equal(false);
30 | expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('bar'))).to.equal(false);
31 | ```
32 |
33 |
34 | #### Related Methods
35 |
36 | - [`.some(selector) => Boolean`](some.md)
37 | - [`.every(selector) => Boolean`](every.md)
38 |
39 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/invoke.md:
--------------------------------------------------------------------------------
1 | # `.invoke(propName)(...args) => Any`
2 |
3 | Invokes a function prop.
4 | Note that in React 16.8+, `.invoke` will wrap your handler with [`ReactTestUtils.act`](https://reactjs.org/docs/test-utils.html#act) and call `.update()` automatically.
5 |
6 | #### Arguments
7 |
8 | 1. `propName` (`String`): The function prop that is invoked
9 | 2. `...args` (`Any` [optional]): Arguments that is passed to the prop function
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `Any`: Returns the value from the prop function
16 |
17 | #### Example
18 |
19 | ```jsx
20 | class Foo extends React.Component {
21 | loadData() {
22 | return fetch();
23 | }
24 |
25 | render() {
26 | return (
27 |
28 |
34 |
35 | );
36 | }
37 | }
38 | const wrapper = mount();
39 | wrapper.find('button').invoke('onClick')().then(() => {
40 | // expect()
41 | });
42 | ```
43 |
--------------------------------------------------------------------------------
/docs/guides/lab.md:
--------------------------------------------------------------------------------
1 | # Using enzyme with Lab and Code
2 |
3 | [Lab](https://github.com/hapijs/lab) is a simple test utility for node & part of the [Hapi.js](https://github.com/hapijs/hapi) framework universe. Lab's initial code borrowed heavily from [Mocha](https://github.com/mochajs/mocha). [Code](https://github.com/hapijs/code) is Lab's standard assertion library and was created as a direct rewrite of [Chai](https://github.com/chaijs).
4 |
5 |
6 | # Example Test: enzyme + Lab + Code
7 |
8 | ```jsx
9 | import { shallow, mount, render } from 'enzyme';
10 | import React from 'react';
11 |
12 | const Code = require('code');
13 | const Lab = require('lab');
14 |
15 | const lab = Lab.script();
16 | export { lab };
17 |
18 | lab.suite('A suite', () => {
19 | lab.test('calls componentDidMount', (done) => {
20 | const wrapper = mount();
21 | Code.expect(Foo.prototype.componentDidMount.callCount).to.equal(1);
22 | done();
23 | });
24 | });
25 | ```
26 |
27 |
28 | ## Example Projects
29 |
30 | - [enzyme-example-lab](https://github.com/gattermeier/enzyme-example-lab)
31 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/some.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 |
4 | export default function describeSome({
5 | Wrap,
6 | WrapperName,
7 | }) {
8 | describe('.some(selector)', () => {
9 | it('returns if a node matches a selector', () => {
10 | const wrapper = Wrap((
11 |
27 | ));
28 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('qoo'))).to.equal(true);
29 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('foo'))).to.equal(true);
30 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('bar'))).to.equal(false);
31 | ```
32 |
33 |
34 | #### Related Methods
35 |
36 | - [`.some(selector) => Boolean`](some.md)
37 | - [`.every(selector) => Boolean`](every.md)
38 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
39 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/someWhere.md:
--------------------------------------------------------------------------------
1 | # `.someWhere(fn) => Boolean`
2 |
3 | Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function to match the nodes.
9 |
10 |
11 |
12 | #### Returns
13 |
14 | `Boolean`: True if at least one of the nodes in the current wrapper passed the predicate function.
15 |
16 |
17 |
18 | #### Example
19 |
20 | ```jsx
21 | const wrapper = shallow((
22 |
23 |
24 |
25 |
26 |
27 | ));
28 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('qoo'))).to.equal(true);
29 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('foo'))).to.equal(true);
30 | expect(wrapper.find('.foo').someWhere((n) => n.hasClass('bar'))).to.equal(false);
31 | ```
32 |
33 |
34 | #### Related Methods
35 |
36 | - [`.some(selector) => Boolean`](some.md)
37 | - [`.every(selector) => Boolean`](every.md)
38 | - [`.everyWhere(predicate) => Boolean`](everyWhere.md)
39 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/name.md:
--------------------------------------------------------------------------------
1 | # `.name() => String|null`
2 |
3 | Returns the name of the current node of this wrapper. If it's a composite component, this will be
4 | the name of the top-most rendered component. If it's a native DOM node, it will be a string of the
5 | tag name. If it's `null`, it will be `null`.
6 |
7 | The order of precedence on returning the name is: `type.displayName` -> `type.name` -> `type`.
8 |
9 | Note: can only be called on a wrapper of a single node.
10 |
11 |
12 | #### Returns
13 |
14 | `String|null`: The name of the current node
15 |
16 |
17 |
18 | #### Examples
19 |
20 | ```jsx
21 | const wrapper = shallow();
22 | expect(wrapper.name()).to.equal('div');
23 | ```
24 |
25 | ```jsx
26 | function SomeWrappingComponent() {
27 | return ;
28 | }
29 | const wrapper = shallow();
30 | expect(wrapper.name()).to.equal('Foo');
31 | ```
32 |
33 | ```jsx
34 | Foo.displayName = 'A cool custom name';
35 | function SomeWrappingComponent() {
36 | return ;
37 | }
38 | const wrapper = shallow();
39 | expect(wrapper.name()).to.equal('A cool custom name');
40 | ```
41 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 |
2 | The MIT License (MIT)
3 |
4 | Copyright (c) 2015 Airbnb, Inc. and contributors
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy
7 | of this software and associated documentation files (the "Software"), to deal
8 | in the Software without restriction, including without limitation the rights
9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/equals.md:
--------------------------------------------------------------------------------
1 | # `.equals(node) => Boolean`
2 |
3 | Returns whether or not the current wrapper root node render tree looks like the one passed in.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `node` (`ReactElement`): The node whose presence you are detecting in the current instance's
9 | render tree.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `Boolean`: whether or not the current wrapper has a node anywhere in it's render tree that looks
16 | like the one passed in.
17 |
18 |
19 |
20 | #### Example
21 |
22 |
23 | ```jsx
24 | function MyComponent() {
25 | return ;
26 | }
27 |
28 | const wrapper = shallow();
29 | expect(wrapper.equals()).to.equal(true);
30 | ```
31 |
32 |
33 | #### Common Gotchas
34 |
35 | - `.equals()` expects a ReactElement, not a selector (like many other methods). Make sure that
36 | when you are calling it you are calling it with a ReactElement or a JSX expression.
37 | - Keep in mind that this method determines equality based on the equality of the node's children as
38 | well.
39 | - Following React's behavior, `.equals()` ignores properties whose values are `undefined`.
40 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/_helpers/getLoadedLazyComponent.js:
--------------------------------------------------------------------------------
1 | import { fakeDynamicImport } from 'enzyme-adapter-utils';
2 | import { lazy } from './react-compat';
3 | import { is, VERSION } from './version';
4 |
5 | function fakeSyncThenable(result) {
6 | return {
7 | then(resolve) {
8 | return resolve({ default: result });
9 | },
10 | };
11 | }
12 |
13 | export default function getLoadedLazyComponent(wrappedComponent) {
14 | if (is('>= 16.8')) {
15 | return lazy(() => fakeSyncThenable(wrappedComponent));
16 | }
17 | if (is('>= 16.6')) {
18 | const LazyComponent = lazy(() => fakeDynamicImport(wrappedComponent));
19 | /**
20 | * Before React v16.8 there's no public api to synchronously / await
21 | * loaded lazy component.
22 | * So we have to hack this by setting `_result` and `_status` implementation.
23 | */
24 | /* eslint-disable no-underscore-dangle */
25 | LazyComponent._result = wrappedComponent;
26 | /* eslint-disable no-underscore-dangle */
27 | LazyComponent._status = 1;
28 | return LazyComponent;
29 | }
30 | throw Error(`Current React version ${VERSION} doesn't support \`lazy()\` api.`);
31 | }
32 |
--------------------------------------------------------------------------------
/since.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const { spawnSync } = require('child_process');
6 | const glob = require('glob-gitignore');
7 |
8 | const packagesDir = path.join(__dirname, 'packages');
9 | const docsDir = path.join(__dirname, 'docs');
10 |
11 | const packages = (process.argv.length > 2 ? [process.argv[2]] : glob.sync('*', { cwd: packagesDir }))
12 | .map((name) => JSON.parse(fs.readFileSync(path.join(packagesDir, name, 'package.json'))))
13 | .filter((x) => !x.private && x.name !== 'enzyme-example-mocha');
14 |
15 | packages.forEach((pkg) => {
16 | const tag = `${pkg.name === 'docs' ? 'enzyme' : pkg.name}@${pkg.version}`;
17 | const dir = path.join(packagesDir, pkg.name);
18 | const logArgs = ['--no-pager', 'log', '--oneline', '--grep=\\[\\(dev \\)\\?deps\\]', '--invert-grep', `${tag}..HEAD`, dir, ':!**/.eslintrc'].concat(pkg.name === 'enzyme' ? docsDir : []);
19 | const log = spawnSync('git', logArgs, { stdio: 'pipe' });
20 | if (log.stdout.length > 0 || log.stderr.length > 0) {
21 | console.log(tag);
22 | spawnSync('git', logArgs, { stdio: 'inherit' });
23 | console.log('\n');
24 | }
25 | });
26 |
--------------------------------------------------------------------------------
/packages/enzyme-example-mocha/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Leland Richardson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/equals.md:
--------------------------------------------------------------------------------
1 | # `.equals(node) => Boolean`
2 |
3 | Returns whether or not the current wrapper root node render tree looks like the one passed in.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `node` (`ReactElement`): The node whose presence you are detecting in the current instance's
9 | render tree.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `Boolean`: whether or not the current wrapper has a node anywhere in it's render tree that looks
16 | like the one passed in.
17 |
18 |
19 |
20 | #### Example
21 |
22 |
23 | ```jsx
24 | function MyComponent() {
25 | return ;
26 | }
27 |
28 | const wrapper = mount().childAt(0);
29 | expect(wrapper.equals()).to.equal(true);
30 | ```
31 |
32 |
33 | #### Common Gotchas
34 |
35 | - `.equals()` expects a ReactElement, not a selector (like many other methods). Make sure that
36 | when you are calling it you are calling it with a ReactElement or a JSX expression.
37 | - Keep in mind that this method determines equality based on the equality of the node's children as
38 | well.
39 | - Following React's behavior, `.equals()` ignores properties whose values are `undefined`.
40 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/type.md:
--------------------------------------------------------------------------------
1 | # `.type() => String | Function | null`
2 |
3 | Returns the type of the only node of this wrapper.
4 | If it's a React component, this will be the component constructor.
5 | If it's a native DOM node, it will be a string with the tag name.
6 | If it's `null`, it will be `null`. It must be a single-node wrapper.
7 |
8 |
9 | #### Returns
10 |
11 | `String | Function | null`: The type of the node
12 |
13 |
14 | #### Examples
15 |
16 | ```jsx
17 | function Foo() {
18 | return ;
19 | }
20 | const wrapper = shallow();
21 | expect(wrapper.type()).to.equal('div');
22 | ```
23 |
24 | ```jsx
25 | function Foo() {
26 | return (
27 |
28 |
29 |
30 | );
31 | }
32 | const wrapper = shallow();
33 | expect(wrapper.find('.btn').type()).to.equal('button');
34 | ```
35 |
36 | ```jsx
37 | function Foo() {
38 | return ;
39 | }
40 | const wrapper = shallow();
41 | expect(wrapper.type()).to.equal(Bar);
42 | ```
43 |
44 | ```jsx
45 | function Null() {
46 | return null;
47 | }
48 | const wrapper = shallow();
49 | expect(wrapper.type()).to.equal(null);
50 | ```
51 |
--------------------------------------------------------------------------------
/packages/enzyme/withDom.js:
--------------------------------------------------------------------------------
1 | require('raf/polyfill');
2 |
3 | /* eslint
4 | no-console: 0,
5 | prefer-template: 0,
6 | prefer-destructuring: 0,
7 | */
8 |
9 | if (!global.document) {
10 | try {
11 | // eslint-disable-next-line global-require, import/no-extraneous-dependencies
12 | const jsdom = require('jsdom').jsdom; // could throw
13 |
14 | global.document = jsdom('');
15 | global.window = global.document.defaultView;
16 | Object.keys(global.document.defaultView).forEach((property) => {
17 | if (typeof global[property] === 'undefined') {
18 | global[property] = global.document.defaultView[property];
19 | }
20 | });
21 |
22 | global.navigator = {
23 | userAgent: 'node.js',
24 | };
25 | } catch (e) {
26 | // jsdom is not supported...
27 | if (e.message === "Cannot find module 'jsdom'") {
28 | console.error('[enzyme/withDom] Error: missing required module "jsdom"');
29 | console.error('[enzyme/withDom] To fix this you must run:');
30 | console.error('[enzyme/withDom] npm install jsdom --save-dev');
31 | } else {
32 | console.error('[enzyme withDom] ' + (e.stack || e.message));
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/ref.md:
--------------------------------------------------------------------------------
1 | # `.ref(refName) => ReactComponent | HTMLElement`
2 |
3 | Returns the node that matches the provided reference name.
4 |
5 |
6 | NOTE: can only be called on a wrapper instance that is also the root instance.
7 |
8 | #### Arguments
9 |
10 | 1. `refName` (`String`): The ref attribute of the node
11 |
12 |
13 | #### Returns
14 |
15 | `ReactComponent | HTMLElement`: The node that matches the provided reference name. This can be a react component instance, or an HTML element instance.
16 |
17 |
18 | #### Examples
19 |
20 |
21 | ```jsx
22 | class Foo extends React.Component {
23 | render() {
24 | return (
25 |
26 | First
27 | Second
28 | Third
29 |
30 | );
31 | }
32 | }
33 | ```
34 |
35 | ```jsx
36 | const wrapper = mount();
37 | expect(wrapper.ref('secondRef').innerText).to.equal('Second');
38 | ```
39 |
40 |
41 | #### Related Methods
42 |
43 | - [`.find(selector) => ReactWrapper`](find.md)
44 | - [`.findWhere(predicate) => ReactWrapper`](findWhere.md)
45 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/html.md:
--------------------------------------------------------------------------------
1 | # `.html() => String`
2 |
3 | Returns a string of the rendered HTML markup of the entire current render tree (not just the shallow-rendered part). It uses [static rendering](../render.md) internally. To see only the shallow-rendered part use [`.debug()`](debug.md).
4 |
5 | Note: can only be called on a wrapper of a single node.
6 |
7 |
8 | #### Returns
9 |
10 | `String`: The resulting HTML string
11 |
12 |
13 | #### Examples
14 |
15 | ```jsx
16 | function Foo() {
17 | return ();
18 | }
19 | ```
20 |
21 | ```jsx
22 | function Bar() {
23 | return (
24 |
');
40 | ```
41 |
42 |
43 | #### Related Methods
44 |
45 | - [`.text() => String`](text.md)
46 | - [`.debug() => String`](debug.md)
47 |
--------------------------------------------------------------------------------
/docs/installation/react-013.md:
--------------------------------------------------------------------------------
1 | # Working with React 0.13
2 |
3 | If you are wanting to use enzyme with React 0.13, but don't already have React 0.13 installed, you
4 | should do so:
5 |
6 | ```bash
7 | npm i react@0.13 --save
8 | ```
9 |
10 | Next, to get started with enzyme, you can simply install it with npm:
11 |
12 | ```bash
13 | npm i --save-dev enzyme enzyme-adapter-react-13
14 | ```
15 |
16 | And then you're ready to go! In your test files you can simply `require` or `import` enzyme:
17 |
18 | ES6:
19 | ```js
20 | // setup file
21 | import { configure } from 'enzyme';
22 | import Adapter from 'enzyme-adapter-react-13';
23 |
24 | configure({ adapter: new Adapter() });
25 | ```
26 |
27 | ```js
28 | // test file
29 | import { shallow, mount, render } from 'enzyme';
30 |
31 | const wrapper = shallow();
32 | ```
33 |
34 | ES5:
35 |
36 | ```js
37 | // setup file
38 | var enzyme = require('enzyme');
39 | var Adapter = require('enzyme-adapter-react-13');
40 |
41 | enzyme.configure({ adapter: new Adapter() });
42 | ```
43 |
44 |
45 | ```js
46 | // test file
47 | var enzyme = require('enzyme');
48 |
49 | var wrapper = enzyme.shallow();
50 | ```
51 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/map.md:
--------------------------------------------------------------------------------
1 | # `.map(fn) => Array`
2 |
3 | Maps the current array of nodes to another array. Each node is passed in as a `ReactWrapper`
4 | to the map function.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function ( ReactWrapper node, Number index ) => Any`): A mapping function to be run for every node in
10 | 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
11 | the original instance.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `Array`: Returns an array of the returned values from the mapping function..
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | const wrapper = mount((
25 |
26 |
bax
27 |
bar
28 |
baz
29 |
30 | ));
31 |
32 | const texts = wrapper.find('.foo').map((node) => node.text());
33 | expect(texts).to.eql(['bax', 'bar', 'baz']);
34 | ```
35 |
36 |
37 | #### Related Methods
38 |
39 | - [`.forEach(fn) => ReactWrapper`](forEach.md)
40 | - [`.reduce(fn[, initialValue]) => Any`](reduce.md)
41 | - [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
42 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/map.md:
--------------------------------------------------------------------------------
1 | # `.map(fn) => Array`
2 |
3 | Maps the current array of nodes to another array. Each node is passed in as a `ShallowWrapper`
4 | to the map function.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function ( ShallowWrapper node, Number index ) => Any`): A mapping function to be run for every node in
10 | 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
11 | the original instance.
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `Array`: Returns an array of the returned values from the mapping function..
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | const wrapper = shallow((
25 |
26 |
bax
27 |
bar
28 |
baz
29 |
30 | ));
31 |
32 | const texts = wrapper.find('.foo').map((node) => node.text());
33 | expect(texts).to.eql(['bax', 'bar', 'baz']);
34 | ```
35 |
36 |
37 | #### Related Methods
38 |
39 | - [`.forEach(fn) => ShallowWrapper`](forEach.md)
40 | - [`.reduce(fn[, initialValue]) => Any`](reduce.md)
41 | - [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
42 |
--------------------------------------------------------------------------------
/docs/installation/react-16.md:
--------------------------------------------------------------------------------
1 | # Working with React 16
2 |
3 | If you are wanting to use enzyme with React 16, but don't already have React 16 and react-dom
4 | installed, you should do so:
5 |
6 | ```bash
7 | npm i --save react@16 react-dom@16
8 | ```
9 |
10 | Next, to get started with enzyme, you can simply install it with npm:
11 |
12 | ```bash
13 | npm i --save-dev enzyme enzyme-adapter-react-16
14 | ```
15 |
16 | And then you're ready to go! In your test files you can simply `require` or `import` enzyme:
17 |
18 | ES6:
19 | ```js
20 | // setup file
21 | import { configure } from 'enzyme';
22 | import Adapter from 'enzyme-adapter-react-16';
23 |
24 | configure({ adapter: new Adapter() });
25 | ```
26 |
27 | ```js
28 | // test file
29 | import { shallow, mount, render } from 'enzyme';
30 |
31 | const wrapper = shallow();
32 | ```
33 |
34 | ES5:
35 |
36 | ```js
37 | // setup file
38 | var enzyme = require('enzyme');
39 | var Adapter = require('enzyme-adapter-react-16');
40 |
41 | enzyme.configure({ adapter: new Adapter() });
42 | ```
43 |
44 |
45 | ```js
46 | // test file
47 | var enzyme = require('enzyme');
48 |
49 | var wrapper = enzyme.shallow();
50 | ```
51 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/forEach.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 | import sinon from 'sinon-sandbox';
4 |
5 | export default function describeForEach({
6 | Wrap,
7 | Wrapper,
8 | }) {
9 | describe('.forEach(fn)', () => {
10 | it('calls a function for each node in the wrapper', () => {
11 | const wrapper = Wrap((
12 |
13 |
14 |
15 |
16 |
17 | ));
18 | const spy = sinon.spy();
19 |
20 | wrapper.find('.foo').forEach(spy);
21 |
22 | expect(spy).to.have.property('callCount', 3);
23 | expect(spy.args[0][0]).to.be.instanceOf(Wrapper);
24 | expect(spy.args[0][0].hasClass('bax')).to.equal(true);
25 | expect(spy.args[0][1]).to.equal(0);
26 | expect(spy.args[1][0]).to.be.instanceOf(Wrapper);
27 | expect(spy.args[1][0].hasClass('bar')).to.equal(true);
28 | expect(spy.args[1][1]).to.equal(1);
29 | expect(spy.args[2][0]).to.be.instanceOf(Wrapper);
30 | expect(spy.args[2][0].hasClass('baz')).to.equal(true);
31 | expect(spy.args[2][1]).to.equal(2);
32 | });
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/type.md:
--------------------------------------------------------------------------------
1 | # `.type() => String | Function | null`
2 |
3 | Returns the type of the only node of this wrapper.
4 | If it's a React component, this will be the component constructor.
5 | If it's a native DOM node, it will be a string with the tag name.
6 | If it's `null`, it will be `null`. It must be a single-node wrapper.
7 |
8 |
9 | #### Returns
10 |
11 | `String | Function | null`: The type of the node
12 |
13 |
14 | #### Examples
15 |
16 | ```jsx
17 | function Foo() {
18 | return ;
19 | }
20 | const wrapper = mount().childAt(0);
21 | expect(wrapper.type()).to.equal('div');
22 | ```
23 |
24 | ```jsx
25 | function Foo() {
26 | return (
27 |
28 |
29 |
30 | );
31 | }
32 | const wrapper = mount();
33 | expect(wrapper.find('.btn').type()).to.equal('button');
34 | ```
35 |
36 | ```jsx
37 | function Foo() {
38 | return ;
39 | }
40 | const wrapper = mount();
41 | expect(wrapper.type()).to.equal(Foo);
42 | expect(wrapper.childAt(0).type()).to.equal(Bar);
43 | ```
44 |
45 | ```jsx
46 | function Null() {
47 | return null;
48 | }
49 | const wrapper = mount();
50 | expect(wrapper.type()).to.equal(null);
51 | ```
52 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/getWrappingComponent.md:
--------------------------------------------------------------------------------
1 | # `.getWrappingComponent() => ReactWrapper`
2 |
3 | If a `wrappingComponent` was passed in `options`, this methods returns a `ReactWrapper` around the rendered `wrappingComponent`. This `ReactWrapper` can be used to update the `wrappingComponent`'s props, state, etc.
4 |
5 |
6 | #### Returns
7 |
8 | `ReactWrapper`: A `ReactWrapper` around the rendered `wrappingComponent`
9 |
10 |
11 |
12 | #### Examples
13 |
14 | ```jsx
15 | import { Provider } from 'react-redux';
16 | import { Router } from 'react-router';
17 | import store from './my/app/store';
18 | import mockStore from './my/app/mockStore';
19 |
20 | function MyProvider(props) {
21 | const { children, customStore } = props;
22 |
23 | return (
24 |
25 |
26 | {children}
27 |
28 |
29 | );
30 | }
31 | MyProvider.propTypes = {
32 | children: PropTypes.node,
33 | customStore: PropTypes.shape({}),
34 | };
35 | MyProvider.defaultProps = {
36 | children: null,
37 | customStore: null,
38 | };
39 |
40 | const wrapper = mount(, {
41 | wrappingComponent: MyProvider,
42 | });
43 | const provider = wrapper.getWrappingComponent();
44 | provider.setProps({ customStore: mockStore });
45 | ```
46 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/getWrappingComponent.md:
--------------------------------------------------------------------------------
1 | # `.getWrappingComponent() => ShallowWrapper`
2 |
3 | If a `wrappingComponent` was passed in `options`, this methods returns a `ShallowWrapper` around the rendered `wrappingComponent`. This `ShallowWrapper` can be used to update the `wrappingComponent`'s props, state, etc.
4 |
5 |
6 | #### Returns
7 |
8 | `ShallowWrapper`: A `ShallowWrapper` around the rendered `wrappingComponent`
9 |
10 |
11 |
12 | #### Examples
13 |
14 | ```jsx
15 | import { Provider } from 'react-redux';
16 | import { Router } from 'react-router';
17 | import store from './my/app/store';
18 | import mockStore from './my/app/mockStore';
19 |
20 | function MyProvider(props) {
21 | const { children, customStore } = props;
22 |
23 | return (
24 |
25 |
26 | {children}
27 |
28 |
29 | );
30 | }
31 | MyProvider.propTypes = {
32 | children: PropTypes.node,
33 | customStore: PropTypes.shape({}),
34 | };
35 | MyProvider.defaultProps = {
36 | children: null,
37 | customStore: null,
38 | };
39 |
40 | const wrapper = shallow(, {
41 | wrappingComponent: MyProvider,
42 | });
43 | const provider = wrapper.getWrappingComponent();
44 | provider.setProps({ customStore: mockStore });
45 | ```
46 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/shallow.md:
--------------------------------------------------------------------------------
1 | # `.shallow([options]) => ShallowWrapper`
2 |
3 | Shallow renders the root node and returns a shallow wrapper around it.
4 | It must be a single-node wrapper.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `options` (`Object` [optional]):
10 | - `options.context`: (`Object` [optional]): Context to be passed into the component
11 | - `options.disableLifecycleMethods`: (`Boolean` [optional]): If set to true, `componentDidMount`
12 | is not called on the component, and `componentDidUpdate` is not called after
13 | [`setProps`](ShallowWrapper/setProps.md) and [`setContext`](ShallowWrapper/setContext.md). Default to `false`.
14 |
15 |
16 | #### Returns
17 |
18 | `ShallowWrapper`: A new wrapper that wraps the node after it's been shallow rendered.
19 |
20 |
21 | #### Examples
22 |
23 | ```jsx
24 | function Bar() {
25 | return (
26 |
24 | ));
25 |
26 | const nodes = wrapper.find('.foo').flatMap((w) => w.children().getElements());
27 |
28 | expect(nodes).to.have.lengthOf(6);
29 | expect(nodes.at(0).hasClass('bar')).to.equal(true);
30 | expect(nodes.at(1).hasClass('bar')).to.equal(true);
31 | expect(nodes.at(2).hasClass('baz')).to.equal(true);
32 | expect(nodes.at(3).hasClass('baz')).to.equal(true);
33 | expect(nodes.at(4).hasClass('bax')).to.equal(true);
34 | expect(nodes.at(5).hasClass('bax')).to.equal(true);
35 | });
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/packages/enzyme-adapter-react-helper/src/safeSFC.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import gOPDs from 'object.getownpropertydescriptors';
3 |
4 | import ifReact from './ifReact';
5 |
6 | function assertFunction(fn) {
7 | if (typeof fn !== 'function') {
8 | throw new TypeError('Component must be a function');
9 | }
10 | return fn;
11 | }
12 |
13 | function copyStatics(source, target) {
14 | assertFunction(source);
15 |
16 | // eslint-disable-next-line no-param-reassign
17 | target.displayName = source.displayName || source.name;
18 | const {
19 | prototype: oldProto,
20 | ...descriptors
21 | } = gOPDs(source);
22 | Object.defineProperties(target, descriptors);
23 |
24 | return target;
25 | }
26 |
27 | function nullToNoScript(fn) {
28 | // eslint-disable-next-line prefer-arrow-callback
29 | return copyStatics(fn, function NullHandler(...args) {
30 | const element = fn(...args);
31 | return element === null ? : element;
32 | });
33 | }
34 |
35 | const maybeNullWrapper = ifReact('^0.14', nullToNoScript, assertFunction);
36 |
37 | function safeSFC(fn) {
38 | return copyStatics(fn, class SafeSFC extends React.Component {
39 | render() {
40 | return maybeNullWrapper(fn(this.props, this.context));
41 | }
42 | });
43 | }
44 |
45 | export default ifReact('>= 0.14', maybeNullWrapper, safeSFC);
46 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/_helpers/adapter.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: 0, import/no-extraneous-dependencies: 0, import/no-unresolved: 0 */
2 | /**
3 | * This file is needed only because we run our unit tests on multiple
4 | * versions of React at a time. This file basically figures out which
5 | * version of React is loaded, and exports the correct adapter for configuring.
6 | */
7 | const { is } = require('./version');
8 |
9 | let Adapter = null;
10 |
11 | if (process.env.ADAPTER) {
12 | // eslint-disable-next-line import/no-dynamic-require
13 | Adapter = require(`enzyme-adapter-react-${process.env.ADAPTER}`);
14 | } else if (is('^0.13')) {
15 | Adapter = require('enzyme-adapter-react-13');
16 | } else if (is('^0.14')) {
17 | Adapter = require('enzyme-adapter-react-14');
18 | } else if (is('^15.5')) {
19 | Adapter = require('enzyme-adapter-react-15');
20 | } else if (is('^15') && is('< 15.5')) {
21 | Adapter = require('enzyme-adapter-react-15.4');
22 | } else if (is('~16.0.0-0 || ~16.1')) {
23 | Adapter = require('enzyme-adapter-react-16.1');
24 | } else if (is('~16.2')) {
25 | Adapter = require('enzyme-adapter-react-16.2');
26 | } else if (is('~16.3.0-0')) {
27 | Adapter = require('enzyme-adapter-react-16.3');
28 | } else if (is('^16.4.0-0')) {
29 | Adapter = require('enzyme-adapter-react-16');
30 | }
31 |
32 | module.exports = Adapter;
33 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/at.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 |
4 | export default function describeAt({
5 | Wrap,
6 | }) {
7 | describe('.at(index)', () => {
8 | it('gets a wrapper of the node at the specified index', () => {
9 | const wrapper = Wrap((
10 |
11 |
12 |
13 |
14 |
15 |
16 | ));
17 | const bar = wrapper.find('.bar');
18 | expect(bar.at(0).hasClass('foo')).to.equal(true);
19 | expect(bar.at(1).hasClass('bax')).to.equal(true);
20 | expect(bar.at(2).hasClass('bux')).to.equal(true);
21 | expect(bar.at(3).hasClass('baz')).to.equal(true);
22 | });
23 |
24 | it('`.at()` does not affect the results of `.exists()`', () => {
25 | const wrapper = Wrap((
26 |
27 |
28 |
29 | ));
30 | const bar = wrapper.find('.bar');
31 | expect(bar.exists()).to.equal(false);
32 | expect(bar.at(0).exists()).to.equal(false);
33 |
34 | const foo = wrapper.find('.foo');
35 | expect(foo.exists()).to.equal(true);
36 | expect(foo.at(0).exists()).to.equal(true);
37 | });
38 | });
39 | }
40 |
--------------------------------------------------------------------------------
/docs/installation/react-15.md:
--------------------------------------------------------------------------------
1 | # Working with React 15
2 |
3 | If you are wanting to use Enzyme with React 15, but don't already have React 15 and react-dom
4 | installed, you should do so:
5 |
6 | ```bash
7 | npm i --save react@15 react-dom@15
8 | ```
9 |
10 | Further, enzyme requires the test utilities addon be installed:
11 |
12 | ```bash
13 | npm i --save-dev react-test-renderer@15
14 | ```
15 |
16 | Next, to get started with enzyme, you can simply install it with npm:
17 |
18 | ```bash
19 | npm i --save-dev enzyme enzyme-adapter-react-15
20 | ```
21 |
22 | And then you're ready to go! In your test files you can simply `require` or `import` enzyme:
23 |
24 | ES6:
25 | ```js
26 | // setup file
27 | import { configure } from 'enzyme';
28 | import Adapter from 'enzyme-adapter-react-15';
29 |
30 | configure({ adapter: new Adapter() });
31 | ```
32 |
33 | ```js
34 | // test file
35 | import { shallow, mount, render } from 'enzyme';
36 |
37 | const wrapper = shallow();
38 | ```
39 |
40 | ES5:
41 |
42 | ```js
43 | // setup file
44 | var enzyme = require('enzyme');
45 | var Adapter = require('enzyme-adapter-react-15');
46 |
47 | enzyme.configure({ adapter: new Adapter() });
48 | ```
49 |
50 |
51 | ```js
52 | // test file
53 | var enzyme = require('enzyme');
54 |
55 | var wrapper = enzyme.shallow();
56 | ```
57 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/dive.md:
--------------------------------------------------------------------------------
1 | # `.dive([options]) => ShallowWrapper`
2 |
3 | Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result. It must be a single-node wrapper, and the node must be a React component.
4 |
5 | There is no corresponding `dive` method for ReactWrappers.
6 |
7 | NOTE: can only be called on a wrapper of a single non-DOM component element node, otherwise it will throw an error. If you have to shallow-wrap a wrapper with multiple child nodes, use [`.shallow()`](shallow.md).
8 |
9 |
10 | #### Arguments
11 |
12 | 1. `options` (`Object` [optional]):
13 | - `options.context`: (`Object` [optional]): Context to be passed into the component
14 |
15 |
16 | #### Returns
17 |
18 | `ShallowWrapper`: A new wrapper that wraps the current node after it's been shallow rendered.
19 |
20 |
21 | #### Examples
22 |
23 | ```jsx
24 | function Bar() {
25 | return (
26 |
39 | );
40 | }
41 | ```
42 |
43 | ```jsx
44 | const wrapper = shallow();
45 | expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
46 | expect(wrapper.find(Bar)).to.have.lengthOf(1);
47 | expect(wrapper.find(Bar).dive().find('.in-bar')).to.have.lengthOf(1);
48 | ```
49 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/slice.md:
--------------------------------------------------------------------------------
1 | # `.slice([begin[, end]]) => ReactWrapper`
2 |
3 | Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.
4 |
5 |
6 | #### Arguments
7 |
8 | 1. `begin` (`Number` [optional]): Index from which to slice (defaults to `0`). If negative, this is treated as `length+begin`.
9 | 1. `end` (`Number` [optional]): Index at which to end slicing (defaults to `length`). If negative, this is treated as `length+end`.
10 |
11 |
12 |
13 | #### Returns
14 |
15 | `ReactWrapper`: A new wrapper with the subset of nodes specified.
16 |
17 |
18 |
19 | #### Examples
20 |
21 | ```jsx
22 | const wrapper = mount((
23 |
);
29 | }
30 |
31 | it('can render component using useDebugValue', () => {
32 | const value = 'foo';
33 | const wrapper = Wrap();
34 | expect(wrapper.find('div').prop('children')).to.equal(value);
35 | });
36 |
37 | it('can render component using useDebugValue and callback', () => {
38 | const value = 'foo';
39 | const spy = sinon.spy();
40 | const wrapper = Wrap();
41 | expect(wrapper.find('div').prop('children')).to.equal(value);
42 | expect(spy).to.have.property('callCount', 0);
43 | });
44 | });
45 | }
46 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/reduce.md:
--------------------------------------------------------------------------------
1 | # `.reduce(fn[, initialValue]) => Any`
2 |
3 | Applies the provided reducing function to every node in the wrapper to reduce to a single value.
4 | Each node is passed in as a `ReactWrapper`, and is processed from left to right.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
10 | following arguments:
11 | - `value` (`T`): The value returned by the previous invocation of this function
12 | - `node` (`ReactWrapper`): A wrapper around the node being processed
13 | - `index` (`Number`): The index of the node being processed
14 |
15 | 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.
16 |
17 |
18 | #### Returns
19 |
20 | `T`: Returns an array of the returned values from the mapping function...
21 |
22 |
23 | #### Example
24 |
25 | ```jsx
26 | function Foo() {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 | ```
36 |
37 | ```jsx
38 | const wrapper = mount();
39 | const total = wrapper.find(Bar).reduce((amount, n) => amount + n.prop('amount'), 0);
40 | expect(total).to.equal(14);
41 | ```
42 |
43 |
44 | #### Related Methods
45 |
46 | - [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
47 | - [`.forEach(fn) => ReactWrapper`](forEach.md)
48 | - [`.map(fn) => Array`](map.md)
49 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/reduce.md:
--------------------------------------------------------------------------------
1 | # `.reduce(fn[, initialValue]) => Any`
2 |
3 | Applies the provided reducing function to every node in the wrapper to reduce to a single value.
4 | Each node is passed in as a `ShallowWrapper`, and is processed from left to right.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
10 | following arguments:
11 | - `value` (`T`): The value returned by the previous invocation of this function
12 | - `node` (`ShallowWrapper`): A wrapper around the node being processed
13 | - `index` (`Number`): The index of the node being processed
14 |
15 | 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.
16 |
17 |
18 | #### Returns
19 |
20 | `T`: Returns an array of the returned values from the mapping function...
21 |
22 |
23 | #### Example
24 |
25 | ```jsx
26 | function Foo() {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 | ```
36 |
37 | ```jsx
38 | const wrapper = shallow();
39 | const total = wrapper.find(Bar).reduce((amount, n) => amount + n.prop('amount'), 0);
40 | expect(total).to.equal(14);
41 | ```
42 |
43 |
44 | #### Related Methods
45 |
46 | - [`.reduceRight(fn[, initialValue]) => Any`](reduceRight.md)
47 | - [`.forEach(fn) => ShallowWrapper`](forEach.md)
48 | - [`.map(fn) => Array`](map.md)
49 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/reduceRight.md:
--------------------------------------------------------------------------------
1 | # `.reduceRight(fn[, initialValue]) => Any`
2 |
3 | Applies the provided reducing function to every node in the wrapper to reduce to a single value.
4 | Each node is passed in as a `ReactWrapper`, and is processed from right to left.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
10 | following arguments:
11 | - `value` (`T`): The value returned by the previous invocation of this function
12 | - `node` (`ReactWrapper`): A single-node wrapper around the node being processed
13 | - `index` (`Number`): The index of the node being processed
14 |
15 | 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.
16 |
17 |
18 | #### Returns
19 |
20 | `T`: Returns an array of the returned values from the mapping function...
21 |
22 |
23 | #### Example
24 |
25 | ```jsx
26 | function Foo() {
27 | return (
28 |
59 | `);
60 | done();
61 | }, 100);
62 | });
63 | });
64 | }
65 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/reduceRight.md:
--------------------------------------------------------------------------------
1 | # `.reduceRight(fn[, initialValue]) => Any`
2 |
3 | Applies the provided reducing function to every node in the wrapper to reduce to a single value.
4 | Each node is passed in as a `ShallowWrapper`, and is processed from right to left.
5 |
6 |
7 | #### Arguments
8 |
9 | 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the
10 | following arguments:
11 | - `value` (`T`): The value returned by the previous invocation of this function
12 | - `node` (`ShallowWrapper`): A single-node wrapper around the node being processed
13 | - `index` (`Number`): The index of the node being processed
14 |
15 | 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.
16 |
17 |
18 | #### Returns
19 |
20 | `T`: Returns an array of the returned values from the mapping function...
21 |
22 |
23 | #### Example
24 |
25 | ```jsx
26 | function Foo() {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 | ```
36 |
37 | ```jsx
38 | const wrapper = shallow();
39 | const total = wrapper.find(Bar).reduceRight((amount, n) => amount + n.prop('amount'), 0);
40 | expect(total).to.equal(14);
41 | ```
42 |
43 |
44 | #### Related Methods
45 |
46 | - [`.reduce(fn[, initialValue]) => Any`](reduce.md)
47 | - [`.forEach(fn) => ShallowWrapper`](forEach.md)
48 | - [`.map(fn) => Array`](map.md)
49 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/setContext.md:
--------------------------------------------------------------------------------
1 | # `.setContext(context) => Self`
2 |
3 | A method that sets the context of the root component, and re-renders. Useful for when you are
4 | wanting to test how the component behaves over time with changing contexts.
5 |
6 | NOTE: can only be called on a wrapper instance that is also the root instance.
7 |
8 |
9 | #### Arguments
10 |
11 | 1. `context` (`Object`): An object containing new props to merge in with the current state
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ReactWrapper`: Returns itself.
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | import React from 'react';
25 | import PropTypes from 'prop-types';
26 |
27 | function SimpleComponent(props, context) {
28 | const { name } = context;
29 | return
{name}
;
30 | }
31 | SimpleComponent.contextTypes = {
32 | name: PropTypes.string,
33 | };
34 | ```
35 | ```jsx
36 | const context = { name: 'foo' };
37 | const wrapper = mount(, { context });
38 | expect(wrapper.text()).to.equal('foo');
39 | wrapper.setContext({ name: 'bar' });
40 | expect(wrapper.text()).to.equal('bar');
41 | wrapper.setContext({ name: 'baz' });
42 | expect(wrapper.text()).to.equal('baz');
43 | ```
44 |
45 | #### Common Gotchas
46 |
47 | - `.setContext()` can only be used on a wrapper that was initially created with a call to `mount()`
48 | that includes a `context` specified in the options argument.
49 | - The root component you are rendering must have a `contextTypes` static property.
50 |
51 |
52 | #### Related Methods
53 |
54 | - [`.setState(state[, callback]) => Self`](setState.md)
55 | - [`.setProps(props[, callback]) => Self`](setProps.md)
56 |
57 |
58 |
--------------------------------------------------------------------------------
/docs/api/ShallowWrapper/setContext.md:
--------------------------------------------------------------------------------
1 | # `.setContext(context) => Self`
2 |
3 | A method that sets the context of the root component, and re-renders. Useful for when you are
4 | wanting to test how the component behaves over time with changing contexts.
5 |
6 | NOTE: can only be called on a wrapper instance that is also the root instance.
7 |
8 |
9 | #### Arguments
10 |
11 | 1. `context` (`Object`): An object containing new props to merge in with the current state
12 |
13 |
14 |
15 | #### Returns
16 |
17 | `ShallowWrapper`: Returns itself.
18 |
19 |
20 |
21 | #### Example
22 |
23 | ```jsx
24 | import React from 'react';
25 | import PropTypes from 'prop-types';
26 |
27 | function SimpleComponent(props, context) {
28 | const { name } = context;
29 | return
{name}
;
30 | }
31 | SimpleComponent.contextTypes = {
32 | name: PropTypes.string,
33 | };
34 | ```
35 | ```jsx
36 | const context = { name: 'foo' };
37 | const wrapper = shallow(, { context });
38 | expect(wrapper.text()).to.equal('foo');
39 | wrapper.setContext({ name: 'bar' });
40 | expect(wrapper.text()).to.equal('bar');
41 | wrapper.setContext({ name: 'baz' });
42 | expect(wrapper.text()).to.equal('baz');
43 | ```
44 |
45 | #### Common Gotchas
46 |
47 | - `.setContext()` can only be used on a wrapper that was initially created with a call to `shallow()`
48 | that includes a `context` specified in the options argument.
49 | - The root component you are rendering must have a `contextTypes` static property.
50 |
51 |
52 | #### Related Methods
53 |
54 | - [`.setState(state[, callback]) => Self`](setState.md)
55 | - [`.setProps(props[, callback]) => Self`](setProps.md)
56 |
57 |
58 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/props.md:
--------------------------------------------------------------------------------
1 | # `.props() => Object`
2 |
3 | Returns the props object for the root node of the wrapper. It must be a single-node wrapper.
4 |
5 | This method is a reliable way of accessing the props of a node; `wrapper.instance().props` will work as well, but in React 16+, stateless functional components do not have an instance. See [`.instance() => ReactComponent`](instance.md)
6 |
7 |
8 | #### Example
9 | ```jsx
10 | import PropTypes from 'prop-types';
11 |
12 | function MyComponent(props) {
13 | const { includedProp } = props;
14 | return (
15 |
Hello
16 | );
17 | }
18 | MyComponent.propTypes = {
19 | includedProp: PropTypes.string.isRequired,
20 | };
21 |
22 | const wrapper = mount();
23 | expect(wrapper.props().includedProp).to.equal('Success!');
24 |
25 | // Warning: .props() only returns props that are passed to the root node,
26 | // which does not include excludedProp in this example.
27 | // See the note above about wrapper.instance().props.
28 |
29 | console.log(wrapper.props());
30 | // {children: "Hello", className: "foo bar", includedProp="Success!"}
31 |
32 | console.log(wrapper.instance().props); // React 15.x - working as expected
33 | // {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"}
34 |
35 | console.log(wrapper.instance().props);
36 | // React 16.* - Uncaught TypeError: Cannot read property 'props' of null
37 | ```
38 |
39 | #### Related Methods
40 |
41 | - [`.prop(key) => Any`](prop.md)
42 | - [`.state([key]) => Any`](state.md)
43 | - [`.context([key]) => Any`](context.md)
44 |
--------------------------------------------------------------------------------
/packages/enzyme-adapter-react-helper/src/getAdapterForReactVersion.js:
--------------------------------------------------------------------------------
1 | import semver from 'semver';
2 |
3 | function getValidRange(version) {
4 | return semver.prerelease(version)
5 | // Remove pre-release versions by incrementing them. This works because a pre-release is less
6 | // than the corresponding non-pre-prelease version.
7 | ? semver.inc(version, 'patch')
8 | // Convert partial versions, such as 16 or 16.8, to their corresponding range notation, so that
9 | // they work with the rest of the semver functions.
10 | : semver.validRange(version);
11 | }
12 |
13 | export default function getAdapterForReactVersion(reactVersion) {
14 | const versionRange = getValidRange(reactVersion);
15 |
16 | if (semver.intersects(versionRange, '^16.4.0')) {
17 | return 'enzyme-adapter-react-16';
18 | }
19 | if (semver.intersects(versionRange, '~16.3.0')) {
20 | return 'enzyme-adapter-react-16.3';
21 | }
22 | if (semver.intersects(versionRange, '~16.2')) {
23 | return 'enzyme-adapter-react-16.2';
24 | }
25 | if (semver.intersects(versionRange, '~16.0.0 || ~16.1')) {
26 | return 'enzyme-adapter-react-16.1';
27 | }
28 | if (semver.intersects(versionRange, '^15.5.0')) {
29 | return 'enzyme-adapter-react-15';
30 | }
31 | if (semver.intersects(versionRange, '15.0.0 - 15.4.x')) {
32 | return 'enzyme-adapter-react-15.4';
33 | }
34 | if (semver.intersects(versionRange, '^0.14.0')) {
35 | return 'enzyme-adapter-react-14';
36 | }
37 | if (semver.intersects(versionRange, '^0.13.0')) {
38 | return 'enzyme-adapter-react-13';
39 | }
40 |
41 | throw new RangeError(`No Enzyme adapter could be found for React version “${reactVersion}”`);
42 | }
43 |
--------------------------------------------------------------------------------
/packages/enzyme-test-suite/test/shared/methods/get.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { expect } from 'chai';
3 | import { itIf } from '../../_helpers';
4 | import { is } from '../../_helpers/version';
5 |
6 | export default function describeGet({
7 | Wrap,
8 | }) {
9 | describe('.get(index)', () => {
10 | it('gets the node at the specified index', () => {
11 | const wrapper = Wrap((
12 |
13 |
14 |
15 |
16 |
17 |
18 | ));
19 | const bar = wrapper.find('.bar');
20 | expect(bar.get(0)).to.deep.equal(wrapper.find('.foo').getElement());
21 | expect(bar.get(1)).to.deep.equal(wrapper.find('.bax').getElement());
22 | expect(bar.get(2)).to.deep.equal(wrapper.find('.bux').getElement());
23 | expect(bar.get(3)).to.deep.equal(wrapper.find('.baz').getElement());
24 | });
25 |
26 | // FIXME: figure out why this fails on 15.0 and 15.1
27 | itIf(!is('~15.0 || ~15.1'), 'does not add a "null" key to elements with a ref and no key', () => {
28 | class Foo extends React.Component {
29 | constructor(props) {
30 | super(props);
31 | this.setRef = this.setRef.bind(this);
32 | }
33 |
34 | setRef(node) {
35 | this.node = node;
36 | }
37 |
38 | render() {
39 | return (
40 |
41 | );
42 | }
43 | }
44 | const wrapper = Wrap();
45 | expect(wrapper.get(0)).to.have.property('key', null);
46 | });
47 | });
48 | }
49 |
--------------------------------------------------------------------------------
/docs/guides/tape-ava.md:
--------------------------------------------------------------------------------
1 | # Using enzyme with Tape and AVA
2 |
3 | enzyme works well with [Tape](https://github.com/substack/tape) and [AVA](https://github.com/avajs/ava).
4 | Simply install it and start using it:
5 |
6 | ```bash
7 | npm i --save-dev enzyme enzyme-adapter-react-16
8 | ```
9 |
10 | ## Tape
11 |
12 | ```jsx
13 | import test from 'tape';
14 | import React from 'react';
15 | import { shallow, mount, configure } from 'enzyme';
16 | import Adapter from 'enzyme-adapter-react-16';
17 |
18 | import Foo from '../path/to/foo';
19 |
20 | configure({ adapter: new Adapter() });
21 |
22 | test('shallow', (t) => {
23 | const wrapper = shallow();
24 | t.equal(wrapper.contains(Foo), true);
25 | });
26 |
27 | test('mount', (t) => {
28 | const wrapper = mount();
29 | const fooInner = wrapper.find('.foo-inner');
30 | t.equal(fooInner.is('.foo-inner'), true);
31 | });
32 | ```
33 |
34 | ## AVA
35 |
36 |
37 | ```jsx
38 | import test from 'ava';
39 | import React from 'react';
40 | import { shallow, mount, configure } from 'enzyme';
41 | import Adapter from 'enzyme-adapter-react-16';
42 |
43 | import Foo from '../path/to/foo';
44 |
45 | configure({ adapter: new Adapter() });
46 |
47 | test('shallow', (t) => {
48 | const wrapper = shallow();
49 | t.is(wrapper.contains(Foo), true);
50 | });
51 |
52 | test('mount', (t) => {
53 | const wrapper = mount();
54 | const fooInner = wrapper.find('.foo-inner');
55 | t.is(fooInner.is('.foo-inner'), true);
56 | });
57 | ```
58 |
59 | ## Example Projects
60 |
61 | - [enzyme-example-tape](https://github.com/TaeKimJR/enzyme-example-tape)
62 | - [enzyme-example-ava](https://github.com/mikenikles/enzyme-example-ava)
63 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/mount.md:
--------------------------------------------------------------------------------
1 | # `.mount() => Self`
2 |
3 | A method that re-mounts the component, if it is not currently mounted. This can be used to simulate a component going through
4 | an unmount/mount lifecycle.
5 |
6 | No equivalent for ShallowWrappers.
7 |
8 | #### Returns
9 |
10 | `ReactWrapper`: Returns itself.
11 |
12 |
13 | #### Example
14 |
15 | ```jsx
16 | import PropTypes from 'prop-types';
17 | import sinon from 'sinon';
18 |
19 | const willMount = sinon.spy();
20 | const didMount = sinon.spy();
21 | const willUnmount = sinon.spy();
22 |
23 | class Foo extends React.Component {
24 | constructor(props) {
25 | super(props);
26 | this.componentWillUnmount = willUnmount;
27 | this.componentWillMount = willMount;
28 | this.componentDidMount = didMount;
29 | }
30 |
31 | render() {
32 | const { id } = this.props;
33 | return (
34 |
35 | {id}
36 |
37 | );
38 | }
39 | }
40 | Foo.propTypes = {
41 | id: PropTypes.string.isRequired,
42 | };
43 |
44 | const wrapper = mount();
45 | expect(willMount).to.have.property('callCount', 1);
46 | expect(didMount).to.have.property('callCount', 1);
47 | expect(willUnmount).to.have.property('callCount', 0);
48 | wrapper.unmount();
49 | expect(willMount).to.have.property('callCount', 1);
50 | expect(didMount).to.have.property('callCount', 1);
51 | expect(willUnmount).to.have.property('callCount', 1);
52 | wrapper.mount();
53 | expect(willMount).to.have.property('callCount', 2);
54 | expect(didMount).to.have.property('callCount', 2);
55 | expect(willUnmount).to.have.property('callCount', 1);
56 | ```
57 |
58 |
59 | #### Related Methods
60 |
61 | - [`.unmount() => Self`](unmount.md)
62 |
--------------------------------------------------------------------------------
/docs/api/ReactWrapper/instance.md:
--------------------------------------------------------------------------------
1 | # `.instance() => ReactComponent`
2 |
3 | Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.
4 |
5 | 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.
6 |
7 | #### Returns
8 |
9 | `ReactComponent|DOMComponent`: The retrieved instance.
10 |
11 | #### Example
12 |
13 |
14 |
15 | ```jsx
16 | function SFC() {
17 | return