question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

wrapper.instance() throws error after wrapper.unmount()

See original GitHub issue

When calling wrapper.instance() after wrapper.unmount() it throws TypeError: component.getPublicInstance is not a function

The use-case for accessing the React component instance after the unmount is to check that any possible teardown in componentWillUnmount() has been successful. In my particular use-case I want to check that an RxJS Subscription has been unsubscribed.

Code to reproduce:

import React from 'react';
import Rx from 'rxjs';
import { mount } from 'enzyme';

class MyComponent extends React.Component {

  constructor() {
    super();
    this.state = {
      foo: 'initial'
    };
  }

  componentDidMount() {
    this.subscription = this.props.subject.subscribe(
      value => this.setState({ foo: value })
    );
  }

  componentWillUnmount() {
    this.subscription.unsubscribe();
  }

  render() {
    return <div>{ this.state.foo }</div>;
  }
}

it('unsubscribes on unmount', () => {
  const subject = new Rx.BehaviorSubject('new value');

  const wrapper = mount(
    <MyComponent subject={subject} />,
  );
  expect(wrapper.instance()).toHaveProperty('subscription.closed', false);
  wrapper.unmount();
  expect(wrapper.instance()).toHaveProperty('subscription.closed', true);
});

Test output:

FAIL  src/ui/memo/__tests__/AfterUnmount.test.js
  ● unsubscribes on unmount

    TypeError: component.getPublicInstance is not a function
      
      at WrapperComponent.getInstance (node_modules/enzyme/build/ReactWrapperComponent.js:81:32)
      at ReactWrapper.instance (node_modules/enzyme/build/ReactWrapper.js:219:31)
      at Object.<anonymous>.it (src/ui/memo/__tests__/AfterUnmount.test.js:37:18)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:103:7)

There is a workaround by using wrapper.node instead of wrapper.instance() in the last expect: expect(wrapper.node).toHaveProperty('subscription.closed', true);. But this feels dirty because .node is an undocumented feature.

Used versions: enzyme: 2.8.2 jest: 20.0.3 react: 15.5.4 react-scripts: 1.0.5 rxjs: 5.4.0 enzyme-to-json: 1.5.1 (I don’t think this affects this particular test, but I had it installed anyway)

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
ljharbcommented, May 25, 2017

const instance = wrapper.instance(); and then refer to instance after that?

1reaction
kwngocommented, Jun 2, 2017

I could try to take a crack at this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unmount and then wrapper.mount() again does not work ...
mount(), the component is not mounted properly. I can see an empty console output after mounting again. Simple plain example as follows class ......
Read more >
Enzyme cheatsheet - Devhints
wrap = mount(<MyComponent />). Shallow wrapping doesn't descend down to sub-components. A full mount also mounts sub-components.
Read more >
React.Component
Unmounting. This method is called when a component is being removed from the DOM: componentWillUnmount(). Error Handling.
Read more >
Destroying wrapper in Jest (w/ vue-test-utils) properly - GitLab
describe('thing', () => { let wrapper; const createWrapper = () => { . ... so VTU can check _isDestroyed property and throw an...
Read more >
Migrating from Vue Test Utils v1
Vue 3 renamed the vm.$destroy to vm.$unmount . Vue Test Utils has followed suit; wrapper.destroy() is now wrapper.unmount() .
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found