get toMatchElement() to work with mount

enzymejs · May 31, 2017 · 3e2ad19 · 3e2ad19
1 parent bc19037
commit 3e2ad19
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -459,7 +459,7 @@ expect(wrapper.find('input').at(1)).toHaveValue('bar');
 
 | render | mount | shallow |
 | -------|-------|-------- |
-| no     | no    | yes     |
+| no     | yes   | yes     |
 
 Assert the wrapper matches the provided react instance. This is a matcher form of Enzyme's wrapper.matchesElement(), which returns a bool with no indication of what caused a failed match. This matcher includes the actual and expected debug trees as contextual information when it fails. NOTE: The semantics are slightly different than enzyme's wrapper.matchesElement(), which ignores props. This matcher does consider props when comparing the actual to the expected values.
 
@@ -478,9 +478,7 @@ const wrapper = shallow(<Fixture />); // mount/render/shallow when applicable
 
 expect(wrapper).toMatchElement(<Fixture />);
 expect(wrapper.find('span')).toMatchElement(
-  <div>
-    <span id="foo" className="bar" />
-  </div>
+  <span id="foo" className="bar" />
 );
 expect(wrapper).not.toMatchElement(<div />);
 ```

diff --git a/...ages/enzyme-matchers/src/assertions/__tests__/__snapshots__/toMatchElement--tests.js.snap b/...ages/enzyme-matchers/src/assertions/__tests__/__snapshots__/toMatchElement--tests.js.snap
@@ -1,20 +1,60 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`toMatchElement provides contextual information for the message 1`] = `
+exports[`toMatchElement mount provides contextual information for the message 1`] = `
+"
+actual:
+<Fixture>
+  <div>
+    <span id=\\"child\\" className=\\"foo\\" />
+  </div>
+</Fixture>
+
+expected:
+<Fixture>
+  <div>
+    <span id=\\"child\\" className=\\"foo\\" />
+  </div>
+</Fixture>
+"
+`;
+
+exports[`toMatchElement mount provides contextual information for the message 2`] = `
 "
 actual:
-<div>
 <span id=\\"child\\" className=\\"foo\\" />
-</div>
 
 expected:
-<div>
 <span id=\\"child\\" className=\\"foo\\" />
-</div>
 "
 `;
 
-exports[`toMatchElement provides contextual information for the message 2`] = `
+exports[`toMatchElement mount provides contextual information for the message 3`] = `
+"
+actual:
+<Fixture>
+  <div>
+    <span id=\\"child\\" className=\\"foo\\" />
+  </div>
+</Fixture>
+
+expected:
+<div />
+"
+`;
+
+exports[`toMatchElement mount returns the message with the proper fail verbage 1`] = `"Did not expect actual value to match the expected value."`;
+
+exports[`toMatchElement mount returns the message with the proper fail verbage 2`] = `"Did not expect actual value to match the expected value."`;
+
+exports[`toMatchElement mount returns the message with the proper fail verbage 3`] = `"Did not expect actual value to match the expected value."`;
+
+exports[`toMatchElement mount returns the message with the proper pass verbage 1`] = `"Expected actual value to match the expected value."`;
+
+exports[`toMatchElement mount returns the message with the proper pass verbage 2`] = `"Expected actual value to match the expected value."`;
+
+exports[`toMatchElement mount returns the message with the proper pass verbage 3`] = `"Expected actual value to match the expected value."`;
+
+exports[`toMatchElement shallow provides contextual information for the message 1`] = `
 "
 actual:
 <div>
@@ -28,7 +68,17 @@ expected:
 "
 `;
 
-exports[`toMatchElement provides contextual information for the message 3`] = `
+exports[`toMatchElement shallow provides contextual information for the message 2`] = `
+"
+actual:
+<span id=\\"child\\" className=\\"foo\\" />
+
+expected:
+<span id=\\"child\\" className=\\"foo\\" />
+"
+`;
+
+exports[`toMatchElement shallow provides contextual information for the message 3`] = `
 "
 actual:
 <div>
@@ -40,20 +90,14 @@ expected:
 "
 `;
 
-exports[`toMatchElement provides contextual information for the message 4`] = `Object {}`;
-
-exports[`toMatchElement returns the message with the proper fail verbage 1`] = `"Did not expect actual value to match the expected value."`;
-
-exports[`toMatchElement returns the message with the proper fail verbage 2`] = `"Did not expect actual value to match the expected value."`;
-
-exports[`toMatchElement returns the message with the proper fail verbage 3`] = `"Did not expect actual value to match the expected value."`;
+exports[`toMatchElement shallow returns the message with the proper fail verbage 1`] = `"Did not expect actual value to match the expected value."`;
 
-exports[`toMatchElement returns the message with the proper fail verbage 4`] = `"toMatchElement must be called on a ShallowWrapper"`;
+exports[`toMatchElement shallow returns the message with the proper fail verbage 2`] = `"Did not expect actual value to match the expected value."`;
 
-exports[`toMatchElement returns the message with the proper pass verbage 1`] = `"Expected actual value to match the expected value."`;
+exports[`toMatchElement shallow returns the message with the proper fail verbage 3`] = `"Did not expect actual value to match the expected value."`;
 
-exports[`toMatchElement returns the message with the proper pass verbage 2`] = `"Expected actual value to match the expected value."`;
+exports[`toMatchElement shallow returns the message with the proper pass verbage 1`] = `"Expected actual value to match the expected value."`;
 
-exports[`toMatchElement returns the message with the proper pass verbage 3`] = `"Expected actual value to match the expected value."`;
+exports[`toMatchElement shallow returns the message with the proper pass verbage 2`] = `"Expected actual value to match the expected value."`;
 
-exports[`toMatchElement returns the message with the proper pass verbage 4`] = `"toMatchElement must be called on a ShallowWrapper"`;
+exports[`toMatchElement shallow returns the message with the proper pass verbage 3`] = `"Expected actual value to match the expected value."`;
diff --git a/packages/enzyme-matchers/src/assertions/__tests__/toMatchElement--tests.js b/packages/enzyme-matchers/src/assertions/__tests__/toMatchElement--tests.js
@@ -12,41 +12,38 @@ function Fixture() {
 }
 
 describe('toMatchElement', () => {
-  const wrapper = shallow(<Fixture />);
-  const truthyResults = toMatchElement(wrapper, <Fixture />);
-  const truthyResults2 = toMatchElement(wrapper,
-    <div>
-      <span id="child" className="foo" />
-    </div>
-  );
-  const falsyResults = toMatchElement(wrapper, <div />);
-  const badInputResults = toMatchElement(mount(<Fixture />));
+  [shallow, mount].forEach(builder => {
+    describe(builder.name, () => {
+      const wrapper = builder(<Fixture />);
+      const truthyResults = toMatchElement(wrapper, <Fixture />);
+      const truthyResults2 = toMatchElement(wrapper.find('span'),
+        <span id="child" className="foo" />
+      );
+      const falsyResults = toMatchElement(wrapper, <div />);
 
-  it('returns the pass flag properly', () => {
-    expect(truthyResults.pass).toBeTruthy();
-    expect(truthyResults2.pass).toBeTruthy();
-    expect(falsyResults.pass).toBeFalsy();
-    expect(badInputResults.pass).toBeFalsy();
-  });
+      it('returns the pass flag properly', () => {
+        expect(truthyResults.pass).toBeTruthy();
+        expect(truthyResults2.pass).toBeTruthy();
+        expect(falsyResults.pass).toBeFalsy();
+      });
 
-  it('returns the message with the proper pass verbage', () => {
-    expect(truthyResults.message).toMatchSnapshot();
-    expect(truthyResults2.message).toMatchSnapshot();
-    expect(falsyResults.message).toMatchSnapshot();
-    expect(badInputResults.message).toMatchSnapshot();
-  });
+      it('returns the message with the proper pass verbage', () => {
+        expect(truthyResults.message).toMatchSnapshot();
+        expect(truthyResults2.message).toMatchSnapshot();
+        expect(falsyResults.message).toMatchSnapshot();
+      });
 
-  it('returns the message with the proper fail verbage', () => {
-    expect(truthyResults.negatedMessage).toMatchSnapshot();
-    expect(truthyResults2.negatedMessage).toMatchSnapshot();
-    expect(falsyResults.negatedMessage).toMatchSnapshot();
-    expect(badInputResults.negatedMessage).toMatchSnapshot();
-  });
+      it('returns the message with the proper fail verbage', () => {
+        expect(truthyResults.negatedMessage).toMatchSnapshot();
+        expect(truthyResults2.negatedMessage).toMatchSnapshot();
+        expect(falsyResults.negatedMessage).toMatchSnapshot();
+      });
 
-  it('provides contextual information for the message', () => {
-    expect(truthyResults.contextualInformation).toMatchSnapshot();
-    expect(truthyResults2.contextualInformation).toMatchSnapshot();
-    expect(falsyResults.contextualInformation).toMatchSnapshot();
-    expect(badInputResults.contextualInformation).toMatchSnapshot();
+      it('provides contextual information for the message', () => {
+        expect(truthyResults.contextualInformation).toMatchSnapshot();
+        expect(truthyResults2.contextualInformation).toMatchSnapshot();
+        expect(falsyResults.contextualInformation).toMatchSnapshot();
+      });
+    });
   });
 });
diff --git a/packages/enzyme-matchers/src/assertions/toMatchElement.js b/packages/enzyme-matchers/src/assertions/toMatchElement.js
@@ -6,23 +6,20 @@
  * @flow
  */
 
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import type { Matcher } from '../../../../types/Matcher';
 import type { EnzymeObject } from '../../../../types/EnzymeObject';
 import isShallowWrapper from '../utils/isShallowWrapper';
 import single from '../utils/single';
 
 function toMatchElement(actualEnzymeWrapper:EnzymeObject, reactInstance:Object) : Matcher {
+  let expectedWrapper:EnzymeObject;
   if (!isShallowWrapper(actualEnzymeWrapper)) {
-    return {
-      pass: false,
-      message: 'toMatchElement must be called on a ShallowWrapper',
-      negatedMessage: 'toMatchElement must be called on a ShallowWrapper',
-      contextualInformation: {},
-    };
+    expectedWrapper = mount(reactInstance);
+  } else {
+    expectedWrapper = shallow(reactInstance);
   }
 
-  const expectedWrapper:EnzymeObject = shallow(reactInstance);
   const actual = actualEnzymeWrapper.debug();
   const expected = expectedWrapper.debug();
   const pass = actual === expected;