Accessing the State of a Functional Component with React Hooks when Testing with Enzyme

Question

I was wondering how to test a state change of functional components with the useState hook with Enzyme. Usually the test would be something along the lines of expect(wrapper.state()).toEqual(expectedState) but I get the error:

ReactWrapper::state() can only be called on class components

I know that Hooks are still in the alpha stage and things like shallow still don't work but I was wondering is there a way to this yet?

Have you considered testing your React components without accessing its state? When it comes to testing, I always try to test behavior instead of implementation. It keeps my tests isolated from the implementation logic, but still enforcing the expected behavior. When you check the values of the component state, you are testing the implementation of the component. You should be able to, given a set of props you pass to your component, when you interact with it, then you should see something different being rendered, or some other kind of perceived side effect, like an API call. — Nícolas Iensen
– Nícolas Iensen, Commented Feb 2, 2019 at 8:33

Booboo · Accepted Answer · 2019-09-25 12:29:43Z

6

You should avoid testing implementation details. Instead, test if the behavior of the component, when triggering an action which would update your state, acts as you would expect.

edited Sep 25, 2019 at 12:29

Booboo

45.7k4 gold badges46 silver badges74 bronze badges

answered Aug 21, 2019 at 21:24

Daniel Afonso

812 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yemerra Over a year ago

I really don't see how this is an acceptable way of programming unit tests. Some behavior might be simple enough, but dealing with complex frontend, this approach might get complicated quickly. For example, when you have drag and drop functionality implemented that relies on one or multiple libraries, it might be hard to implement a certain behavior here.

Uros C Over a year ago

@yemerra I agree with you. It seems that the same question gets asked over and over and people keep repeating whatever someone said, in a blog post. In the end, this doesn't answer the question. A better answer would be to say: "you can't test the state of a function component".

CodeConnoisseur Over a year ago

@ross-u is this still the case? Can we still not unit test the useState() react hook?

Erdogan Oksuz · Accepted Answer · 2019-11-10 20:57:03Z

1

I think you should not control a component state. Unit tests should be control inputs and outputs.

Like this:

Give status prop true to FormComponent expect .send-user-data button exist.

If you check the Enyzme source code here. You can see instance and class type check. Functional components nodeTypes not equal to class and not have instance.

You can use https://github.com/etiennedi/enzyme-wait for wait for async elements.

Your test can be like this.

Simulate click event .send-user-data button wait(its. setTimeout, promise or xhr) and expect returned user.

answered Nov 10, 2019 at 20:57

Erdogan Oksuz

62111 silver badges17 bronze badges

Collectives™ on Stack Overflow

Accessing the State of a Functional Component with React Hooks when Testing with Enzyme

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related