enzyme: wrapper.state() does not work

This is a test in order to check value of input sets appropriately to state of component.

describe('RegistrationForm component', () => {
	const mockStore = configureStore();
	let wrapper;
	let store;

	beforeEach(() => {
		const initialState = { type: LOGIN_USER }; // LOGIN_USER is imported ...
		store = mockStore(initialState);
		const props = { store }

		wrapper = mount(<RegistrationForm {...props} />);
		console.log("beforeEach done", wrapper.state()) // ********* CONSOLE PRINT
	});

	it('should has firstName', () => {
		wrapper.find('[name="firstName"]').find('input').simulate('change',
			{
				target: { value: 'BBBBB', name: 'firstName' }
			}
		);
		//wrapper = wrapper.update();

		console.log("test->state: ", wrapper.state());  // ********* CONSOLE PRINT
		expect(wrapper.state().user.firstName).toBe('BBBBB');
	});
});

Here there is two calls to state() function of wrapper which both of them output {} as result. Also I put three console.log(this.state) in component, one in last line of constructor and two in first and last line of handleChange to ensure simulate runs as expected. Since I set firstName to AAAAA in constructor. It shows constructor done -> AAAAA, handleChange1 -> AAAAA and handleChange2 -> BBBBB. So it seems wrapper could connect to component but state() could not get its state. I checked wrapper.instance().state as well.

"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"jest": "^23.6.0",

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (10 by maintainers)

Most upvoted comments

@gogogous88 i definitely understand the problem - in your case, however, it’s that you shouldn’t be accessing instance.state, you should be accessing wrapper.state() - ie, wrapper.find(LoginPersonal).state().

really fast, Appreciate.

i got the problem and here is the right one to me

the quoted “LoginPersonal” give me the wrapper, and the unquoted I believe give me the instance

marcmoo on Sep 27, 2019

I just hit the same problem, and came across this issue.

After some poking around I discovered the cause: The component is wrapped with connect from react-redux, so the root node of the wrapper isn’t actually the component in question, but rather a Connect instance – which quietly returns empty state.

So my question is then… any good workaround to actually get at the wrapped instance’s state?

ronen on Oct 8, 2018

Here’s the dive() documentation for anyone interested. This is so useful! I’d been pulling out the semi-secret WrappedComponent prior to this. 🤦‍♂️

reergymerej on Oct 16, 2018

@bonjefir the one that was filed 4 days ago, that got its last update from you on a friday while it’s sunday night right now? yes, someone’s probably going to look into it, but you’ll need to have some patience.

ljharb on Oct 8, 2018

@gogogous88 you’re incorrect; they both only ever give you an enzyme wrapper. However, that suggests that the LoginPersonal you’re finding for is not actually the same one being found when you find by name. Finding by reference is far more reliable than finding by name, and in either case do NOT do .instance().state, always only do .state().

ljharb on Sep 27, 2019

@gogogous88 i definitely understand the problem - in your case, however, it’s that you shouldn’t be accessing instance.state, you should be accessing wrapper.state() - ie, wrapper.find(LoginPersonal).state().

ljharb on Sep 27, 2019

@sensui7 you do not want to export the unwrapped component; you want to use wrapper.dive(), which will give you a wrapper on the inner Test component.

ljharb on Oct 16, 2018

That was a typo in here(Currently I have not actual code at home and I rewrite it in github editor). I can double check that tomorrow but consider that console.log('handleChange2 -> ', this.state); output right thing(i.e BBBBB which sets from test).

bonjefir on Oct 5, 2018