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:

SOLID series: The Open-Closed Principle

Today, we’ll be exploring the Open-Closed Principle: from the criticisms around it, its best use cases, and common misapplication.

Oyinkansola Awosan
May 16, 2025 â‹… 11 min read
Simplifying E2E Testing With Open Source AI Testing Tools

AI-powered e2e testing: Getting started with Shortest

Explore how AI-driven testing tools like Shortest, Testim, Mabl, and Functionize are changing how we do end-to-end testing.

Jude Miracle
May 16, 2025 â‹… 11 min read
profit center vs. cost center: How company structure affects engineering

Profit center vs. cost center: How company structure affects engineering

Examine the difference between profit vs. cost center organizations, and the pros and cons these bring for the engineering team.

Marie Starck
May 15, 2025 â‹… 4 min read
How to pass a TypeScript function as a parameter

How to pass a TypeScript function as a parameter

Explore how to pass functions and structured objects as parameters in TypeScript, including use cases, syntax, and practical scenarios.

Kealan Parr
May 15, 2025 â‹… 10 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