How can I test React component’s style with Jest + Enzyme?

Posted by Jennifer | Updated on

There are a few mistakes in your provided code:

  1. You should not be using DOM element’s style property because React does not manage it. Shift the hidden property into the state instead.
  2. I believe headerStyle is a shallow copy of the style object. After you simulate click, it does not get updated. You will have to query the element again for the style object.
  3. to.have.property is not valid Jest syntax. It should be toHaveProperty.

Please refer to the corrected code here. If you paste the following into create-react-app, it should just work.

app.js

app.test.js


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers