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() is null on class component

See original GitHub issue

Current behavior

wrapper.instance() and wrapper.state() are not working on a class component.

Expected behavior

wrapper.instance() and wrapper.state() work on a class component.

Your environment

I’m really confused by a component not working with instances. I have many other similar components that have a the same structure that are working. I have broken this down to a very simple component and test to show the problem.

React Component

import React from 'react';

export class EnzymeTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: true
    }
  }

  componentDidMount() {
    this.setState({test: false})
  }

  render() {
    if (this.state.test) return <div>Test is True</div>
    else return <div>Test is False</div>
  }
};

Enzyme Test

import React from 'react';
import { shallow } from 'enzyme';
import { EnzymeTest } from './EnzymeTest.js';

let wrapper;

describe('isOutsideDateRange', () => {
  beforeEach(() => {
    wrapper = shallow(<EnzymeTest /> )
  });

  beforeEach(() => {
    wrapper.unmount();
  });

  test('has state', () => {
    expect(wrapper.state('test')).toBe('blah');
  });

  test('has a wrapper instance', () => {
    expect(wrapper.instance()).toBeTruthy();
  });
});

Both of the above tests fail. The state test shows this error: ShallowWrapper::state() can only be called on class components

and wrapper.instance() in null.

This is a stateful class component so I’m confused about this behavior.

API

  • [ x] shallow
  • mount
  • render

Version

library version
enzyme 3.3
react 16.3.2
react-dom 16.3.2
react-test-renderer 16.3.2
adapter (below)

Adapter

  • [x ] enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:11
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

5reactions
bschmalzcommented, Apr 3, 2019

I’m not trying to test against wrapper.instance(). However, the actual component that I’m trying to test has class methods that I want to unit test, so I want to unit test them via wrapper.instance().someMethod()… bu t I can’t because wrapper.instance() returns null.

What am I doing wrong? How can I run tests against those class methods? I’m doing the same type of testing in plenty of other components so I’m confused why instance() is null in this case.

2reactions
gwhobbscommented, Jan 19, 2021

In case it helps anyone, I was experiencing a similar problem; in my case, the issue was triggered by updating react-redux to v6 or higher, and seems to have been resolved by adding an extra .dive() to shallow wrappers on problematic tests.

Read more comments on GitHub >

github_iconTop Results From Across the Web

enzyme wrapper.instance() is null for connected component
The issue is that for connected components you export the Connect wrapper, not the component itself. There are a few options to deal...
Read more >
instance() => ReactComponent - Enzyme - GitHub Pages
Returns the single-node wrapper's node's underlying class instance; this in its methods. ... instance() returns null for stateless functional components.
Read more >
enzyme wrapper.instance() is null for connected component ...
The issue is that for connected components you export the Connect wrapper, not the component itself. There are a few options to deal...
Read more >
instance() => ReactComponent - Enzyme - W3cubDocs
Returns the single-node wrapper's node's underlying class instance; this in its methods. ... instance() returns null for stateless functional components.
Read more >
Testing stateful components using Enzyme
What if your component contains some class methods? ... const componentInstance = wrapper.instance(); //Accessing react lifecyle methods componentInstance.
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