Skip to content

Commit 97af9e0

Browse files
committed
Add equals method to ShallowWrapper.
1 parent 46f4d36 commit 97af9e0

File tree

3 files changed

+99
-0
lines changed

3 files changed

+99
-0
lines changed

docs/api/ShallowWrapper/equals.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
const wrapper = shallow(<MyComponent />);
25+
expect(wrapper.equals(<div className="foo bar" />)).to.equal(true);
26+
```
27+
28+
29+
#### Common Gotchas
30+
31+
- `.equals()` expects a ReactElement, not a selector (like many other methods). Make sure that
32+
when you are calling it you are calling it with a ReactElement or a JSX expression.
33+
- Keep in mind that this method determines equality based on the equality of the node's children as
34+
well.
35+

src/ShallowWrapper.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,22 @@ export default class ShallowWrapper {
205205
return findWhereUnwrapped(this, other => nodeEqual(node, other)).length > 0;
206206
}
207207

208+
/**
209+
* Whether or not a given react element exists in the shallow render tree.
210+
*
211+
* Example:
212+
* ```
213+
* const wrapper = shallow(<MyComponent />);
214+
* expect(wrapper.contains(<div className="foo bar" />)).to.equal(true);
215+
* ```
216+
*
217+
* @param {ReactElement} node
218+
* @returns {Boolean}
219+
*/
220+
equals(node) {
221+
return nodeEqual(this.node, node);
222+
}
223+
208224
/**
209225
* Finds every node in the render tree of the current wrapper that matches the provided selector.
210226
*

src/__tests__/ShallowWrapper-spec.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,54 @@ describe('shallow', () => {
8585

8686
});
8787

88+
describe('.equals(node)', () => {
89+
90+
it('should allow matches on the root node', () => {
91+
const a = <div className="foo" />;
92+
const b = <div className="foo" />;
93+
const c = <div className="bar" />;
94+
expect(shallow(a).equals(b)).to.equal(true);
95+
expect(shallow(a).equals(c)).to.equal(false);
96+
});
97+
98+
it('should NOT allow matches on a nested node', () => {
99+
const wrapper = shallow(
100+
<div>
101+
<div className="foo" />
102+
</div>
103+
);
104+
const b = <div className="foo" />;
105+
expect(wrapper.equals(b)).to.equal(false);
106+
});
107+
108+
it('should match composite components', () => {
109+
class Foo extends React.Component {
110+
render() { return <div />; }
111+
}
112+
const wrapper = shallow(
113+
<div>
114+
<Foo />
115+
</div>
116+
);
117+
const b = <div><Foo /></div>;
118+
expect(wrapper.equals(b)).to.equal(true);
119+
});
120+
121+
it('should not expand `node` content', () => {
122+
class Bar extends React.Component {
123+
render() { return <div />; }
124+
}
125+
126+
class Foo extends React.Component {
127+
render() { return <Bar />; }
128+
}
129+
130+
expect(shallow(<Foo />).equals(<Bar />)).to.equal(true);
131+
expect(shallow(<Foo />).equals(<Foo />)).to.equal(false);
132+
});
133+
134+
});
135+
88136
describe('.find(selector)', () => {
89137

90138
it('should be able to match the root DOM element', () => {

0 commit comments

Comments
 (0)