wrapper.instance() is null on class component
See original GitHub issueCurrent 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:
- Created 4 years ago
- Reactions:11
- Comments:18 (9 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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.