2020-06-01
1603
#react
Eslam Hefnawy
19258
Jun 1, 2020 â‹… 5 min read

Testing state changes in React functional components

Eslam Hefnawy Serverless Architect at Serverless, Inc. Co-creator of the Serverless Framework and the lead architect of Serverless Components.

Recent posts:

how to use the ternary operator in javascript

How to use the ternary operator in JavaScript

Add to your JavaScript knowledge of shortcuts by mastering the ternary operator, so you can write cleaner code that your fellow developers will love.

Chizaram Ken
Feb 21, 2025 â‹… 7 min read
Using tsup To Bundle Your TypeScript Package

Using tsup to bundle your TypeScript package

Learn how to efficiently bundle your TypeScript package with tsup. This guide covers setup, custom output extensions, and best practices for optimized, production-ready builds.

Muhammad Ali
Feb 20, 2025 â‹… 7 min read
how to use react higher order components

How to use React higher-order components

Learn the fundamentals of React’s high-order components and play with some code samples to help you understand how it works.

Hussain Arif
Feb 20, 2025 â‹… 10 min read
dependency inversion principle

Understanding the dependency inversion principle (DIP)

Learn about the dependency inversion principle (DIP), its importance, and how to implement it across multiple programming languages.

Samuel Olusola
Feb 20, 2025 â‹… 8 min read
View all posts

6 Replies to "Testing state changes in React functional components"

  1. with this approach we need to interact with the component’s DOM and simulate the events which I feel like E2E test. I feel uncomfortable to see ‘find’ in unit tests. What do you say?

  2. Hello, I think the approach used for “should update state on click” is not correct. jest.fn() returns a function. So changeSize is a function. So changeSize will always be truthy even if you did not simulate the click. try to expect(changeSize).toBeCalled(). You will see that the function is not called at all.

  3. Big “No” on that last test. If you comment out the simulate(“click”) line in the testcase, the test still passes. Therefore this is not a valid test. As Omar said, jest.fn() returns a function. I’m surprised you didn’t update this article after his comment, which is clearly correct. I don’t recommend using a unit test to test internal state. Instead test external effects.

  4. That’s a good catch! Sorry for the confusion folks! I updated the article, notified the editors and it should be published soon.

Leave a Reply