[New] add `componentDidCatch` support, and `simulateError` #1797

ljharb · 2018-08-28T00:06:13Z

This PR adds a .simulateError API to shallow and mount wrappers, along with support for componentDidCatch.

…to `shallow` and `mount` renderers

jgzuke · 2018-08-28T00:07:51Z

package.json

@@ -90,6 +90,7 @@
    "gitbook-plugin-github": "^2.0.0",
    "in-publish": "^2.0.0",
    "istanbul": "^1.0.0-alpha.2",
+    "istanbul-api": "~1.2",


Where is this being used?

it's a dep of istanbul itself; see istanbuljs/istanbuljs#216

jgzuke · 2018-08-28T00:34:57Z

packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js

@@ -262,6 +263,19 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
      getNode() {
        return instance ? toTree(instance._reactInternalFiber).rendered : null;
      },
+      simulateError(nodeHierarchy, rootNode, error) {
+        const { instance: catchingInstance } = nodeHierarchy
+          .find(x => x.instance && x.instance.componentDidCatch) || {};


If I have multiple error boundary components in my tree, will this throw on the closest one to the current node?

It should throw on the first one it finds as it traverses upwards.

calinoracation

Changes look great! Will this PR need to update the API documentation as well?

calinoracation · 2018-08-28T00:14:59Z

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

+    describeIf(is('>= 16'), 'componentDidCatch', () => {
+      describe('errors inside an error boundary', () => {
+        const errorToThrow = new EvalError('threw an error!');
+        // in React 16.0 - 16.2, and sole older nodes, the actual error thrown isn't reported.


I don't fully understand this comment: in React 16.0 - 16.2, and sole older nodes.

oops, typo for “some”

calinoracation · 2018-08-28T00:27:31Z

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

+          render() {
+            const { throws } = this.state;
+            return (
+              <div>


Why the span nested in the div here?

To ensure that the hierarchy logic works properly :-)

calinoracation · 2018-08-28T00:38:57Z

packages/enzyme-adapter-utils/src/Utils.js

+    getDisplayName,
+  );
+
+  componentDidCatch.call(catchingInstance, error, { componentStack });


Why is componentStack an object here?

React passes an “info” object with a componentStack property

calinoracation · 2018-08-28T00:40:22Z

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

+          render() {
+            const { throws } = this.state;
+            return (
+              <div>


Are the div and span here needed / helpful?

I think the more common pattern that we use would be along the lines of:

return ( <React.Fragment> <Thrower throws={throws} /> </React.Fragment> );

True, but by adding them, i was able to find bugs in the hierarchy logic.

I’ll add another test for fragments.

calinoracation · 2018-08-28T00:43:40Z

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

+
+          expect(spy.args).to.be.an('array').and.have.lengthOf(1);
+          const [[actualError, info]] = spy.args;
+          expect(() => { throw actualError; }).to.throw(errorToThrow);


Any reason you use a different syntax to test between this one and the mount test, whereas here you rethrow the actualError but don't in the mount one?

Here, it checks the exception type and the message.

I can't do that in ReactWrapper, unfortunately, because the error thrown is replaced in some nodes and some Reacts :-/

ljharb · 2018-08-28T06:35:24Z

@calinoracation thanks for the reminder on the docs; I've added some.

a15n · 2018-08-28T21:52:08Z

docs/api/ReactWrapper/simulateError.md

+
+  render() {
+    const { children } = this.props;
+    const { throws } = this.state;


a15n · 2018-08-28T21:54:24Z

docs/api/ShallowWrapper/simulateError.md

+
+  render() {
+    const { children } = this.props;
+    const { throws } = this.state;


- [new] add `simulateError` to `shallow` and `mount` renderers (#1797)

- [new] add `simulateError` (#1797)

GreenGremlin · 2018-09-05T17:44:17Z

This is great! I was just trying to write a test for an error boundary and this made it possible. Thank you!

GreenGremlin · 2018-09-12T00:57:59Z

packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js

@@ -327,6 +342,16 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
            : elementToTree(output),
        };
      },
+      simulateError(nodeHierarchy, rootNode, error) {
+        simulateError(


Why not check the nodeHierarchy for error boundaries in a shallow renderer? Should this scenario require a mount renderer?

// ErrorBoundary is a component with a componentDidCatch method that renders null // if an error is encountered. function MyComponent({children}) { return ( <div> <h3>My component is cool!</h3> <ErrorBoundary> {children} </ErrorBoundary> </div> ); } const BadChild = () => null; const wrapper = shallow( <MyComponent> <BadChild /> </MyComponent> ); wrapper.find(BadChild).simulateError(new Error('That was bad')); expect(wrapper.find('h3')).toExist();

In a shallow render, there can't ever be any other error boundaries, since only the root node is actually rendered.

Sure, but if simulateError is called on an element in shallow render tree, it seems reasonable to render any error boundaries found above that element.

This actually seems to work:

const wrapper = shallow( <MyComponent> <BadChild /> </MyComponent> ); const errorBoundary = wrapper.find('ErrorBoundary').shallow(); errorBoundary.find(BadChild).simulateError(new Error('That was bad')); expect(wrapper.find('h3')).toExist();

...but it doesn't really feel intuitive. I can see people trying my previous example and being confused when it doesn't work, especially since I did just that :\

It's not reasonable or possible, because of how shallow rendering works. In shallow rendering, everything that's not the root node is treated as if it's a div - ie, as if the component implementation is ({ children }) => children. Thus, there's no componentDidCatch anywhere, except the top.

ljharb added 3 commits August 26, 2018 23:57

[enzyme-adapter-utils] [new] add simulateError

6803727

[enzyme-adapter-react-{16,16.3,16.2,16.1}] [new] add simulateError …

66f27e9

…to `shallow` and `mount` renderers

[New] shallow/mount: add simulateError

944f9e0

ljharb added API: shallow API: mount semver: minor New stuff. package: react adapter: 16 package: react adapter: 16.1 package: react adapter: 16.2 package: react adapter: 16.3 labels Aug 28, 2018

ljharb requested review from madicap, jgzuke and calinoracation August 28, 2018 00:06

jgzuke reviewed Aug 28, 2018

View reviewed changes

calinoracation reviewed Aug 28, 2018

View reviewed changes

ljharb force-pushed the componentDidCatch branch from e408e68 to e1f596c Compare August 28, 2018 06:34

ljharb force-pushed the componentDidCatch branch from e1f596c to 936abdb Compare August 28, 2018 07:31

madicap approved these changes Aug 28, 2018

View reviewed changes

ljharb added this to Lifecycles in React 16 Aug 28, 2018

a15n approved these changes Aug 28, 2018

View reviewed changes

ljharb force-pushed the componentDidCatch branch 3 times, most recently from f9cd6e0 to 1626578 Compare August 29, 2018 17:14

ljharb mentioned this pull request Aug 29, 2018

Enzyme 3 couldn't test component when ComponentDidCatch happend #1255

Closed

ljharb force-pushed the componentDidCatch branch from 1626578 to 944f9e0 Compare September 3, 2018 21:01

ljharb merged commit 944f9e0 into master Sep 4, 2018

ljharb deleted the componentDidCatch branch September 4, 2018 04:34

ljharb added a commit that referenced this pull request Sep 4, 2018

[enzyme-adapter-react-{16.3,16.2,16.1}] v1.2.0

34abce5

- [new] add `simulateError` to `shallow` and `mount` renderers (#1797)

ljharb added a commit that referenced this pull request Sep 4, 2018

[enzyme-adapter-react-16] v1.4.0

5cc0c32

- [new] add `simulateError` to `shallow` and `mount` renderers (#1797)

ljharb added a commit that referenced this pull request Sep 4, 2018

[enzyme-adapter-utils] v1.7.0

caf40a7

- [new] add `simulateError` (#1797)

This was referenced Sep 5, 2018

Update enzyme in / from 3.1.0 to 3.6.0 pcardune/redux-firebase-mirror#214

Open

Update enzyme in /packages/generator/app/templates from 3.5.1 to 3.6.0 JetBrains/ring-ui#393

Merged

Update 3 dependencies from npm JetBrains/ring-ui#394

Merged

GreenGremlin reviewed Sep 12, 2018

View reviewed changes

This was referenced Oct 1, 2018

Update enzyme in /modules/frontend from 3.3.0 to 3.6.0 project-accelerate/accelerate#265

Open

Update enzyme in / from 3.3.0 to 3.6.0 leonardofaria/leozera-ui#234

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[New] add `componentDidCatch` support, and `simulateError` #1797

[New] add `componentDidCatch` support, and `simulateError` #1797

ljharb commented Aug 28, 2018 •

edited

jgzuke Aug 28, 2018

ljharb Aug 28, 2018 •

edited

jgzuke Aug 28, 2018

ljharb Aug 28, 2018

calinoracation left a comment

calinoracation Aug 28, 2018

ljharb Aug 28, 2018

calinoracation Aug 28, 2018

ljharb Aug 28, 2018

calinoracation Aug 28, 2018

ljharb Aug 28, 2018

calinoracation Aug 28, 2018

calinoracation Aug 28, 2018

ljharb Aug 28, 2018

calinoracation Aug 28, 2018

ljharb Aug 28, 2018

ljharb commented Aug 28, 2018

a15n Aug 28, 2018

a15n Aug 28, 2018

GreenGremlin commented Sep 5, 2018

GreenGremlin Sep 12, 2018

ljharb Sep 12, 2018

GreenGremlin Sep 12, 2018 •

edited

ljharb Sep 12, 2018

[New] add componentDidCatch support, and simulateError #1797

[New] add componentDidCatch support, and simulateError #1797

Conversation

ljharb commented Aug 28, 2018 • edited

Choose a reason for hiding this comment

ljharb Aug 28, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calinoracation left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb commented Aug 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GreenGremlin commented Sep 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GreenGremlin Sep 12, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

[New] add `componentDidCatch` support, and `simulateError` #1797

[New] add `componentDidCatch` support, and `simulateError` #1797

ljharb commented Aug 28, 2018 •

edited

ljharb Aug 28, 2018 •

edited

GreenGremlin Sep 12, 2018 •

edited