Enzyme: Potential regression with `shallow.find()`

[willdurand]

Given this test case:

    it('does not reset state when unmounting', () => {
      const NonResettingOverlay = withUIState({
        fileName: __filename,
        extractId: (props) => props.id,
        initialState: { isOpen: true },
      })(OverlayBase);

      const dispatchSpy = sinon.spy(store, 'dispatch');
      const root = shallow(
        <NonResettingOverlay store={store} id="some-component-id" />,
      )
        .find('WithUIState')
        .dive();

      root.unmount();

      sinon.assert.notCalled(dispatchSpy);
    });

where WithUIState is the name of a class inside a HOC:

const withUIState = (/* ... */): ((React.ComponentType<any>) => React.ComponentType<any>) => {
  // ...

  return (WrappedComponent) => {
    class WithUIState extends React.Component<any> {
      componentWillUnmount() {
        if (resetOnUnmount) {
          this.props.setUIState(initialState);
        }
      }

      render() {
        return <WrappedComponent {...this.props} />;
      }
    }

    WithUIState.displayName = `WithUIState(${getDisplayName(
      WrappedComponent,
    )})`;

    return connect(
      mapStateToProps,
      undefined,
      mergeUIStateProps,
    )(WithUIState);
  };
};

The test case now fails:

 FAIL  tests/unit/core/test_withUIState.js
  ● /Users/williamdurand/projects/mozilla/addons-frontend/tests/unit/core/test_withUIState.js › withUIState › does not reset state when unmounting

    Method “dive” is only meant to be run on a single node. 0 found instead.

      130 |       )
      131 |         .find('WithUIState')
    > 132 |         .dive();
          |          ^
      133 |
      134 |       root.unmount();
      135 |

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1815:17)
      at ShallowWrapper.dive (node_modules/enzyme/build/ShallowWrapper.js:1908:21)
      at Object.<anonymous> (tests/unit/core/test_withUIState.js:132:10)

It was not failing before with Enzyme 3.3.

ℹ️ The fix is to use the full component's displayName, but it was working without it before:

diff --git a/tests/unit/core/test_withUIState.js b/tests/unit/core/test_withUIState.js
index 919c3e113..eb5d49131 100644
--- a/tests/unit/core/test_withUIState.js
+++ b/tests/unit/core/test_withUIState.js
@@ -128,7 +128,7 @@ describe(__filename, () => {
       const root = shallow(
         <NonResettingOverlay store={store} id="some-component-id" />,
       )
-        .find('WithUIState')
+        .find('WithUIState(OverlayBase)')
         .dive();

       root.unmount();
@@ -150,7 +150,7 @@ describe(__filename, () => {
       const root = shallow(
         <AutoResettingOverlay store={store} id="some-component-id" />,
       )
-        .find('WithUIState')
+        .find('WithUIState(OverlayBase)')
         .dive();

       const { uiStateID } = root.instance().props;

[ljharb]

    WithUIState.displayName = `WithUIState(${getDisplayName(
      WrappedComponent,
    )})`;

This means that the only name on the component is the displayName, WithUIState is not the name.

You should never have been able to find it by the function name when it had a different displayName set - in other words, this isn't a regression, it's a bug fix.

[willdurand]

Sorry, I forgot to close this issue. That makes sense, thanks!