How do I create a Unit Test for a React Function that modifies a state array?

Question

I am trying to learn how to write unit testing, but examples online are either far too simplistic or far too complex for me to grasp the concept

I have a function titled handleSelect that is called when the user is selecting images from a list that they want to delete. The image is added to a state array imagesToDelete to prepare for deletion.

I'm stuck on how this would be set up for unit testing.

Here is my code:

const [imagesToDelete, setImagesToDelete] = useState([]);
const handleSelect = (image) => {
        if (!imagesToDelete.includes(image.id)) {
            setImagesToDelete([...imagesToDelete, image.id]);
        } else {
            setImagesToDelete(imagesToDelete.filter((a) => a !== image.id));
        }
    };

...

<ImageContainer onClick={() => handleSelect(image)} selected={selected}>
    {selected && <SelectIcon />}
    <img src={image.image} alt="Placeholder" />
</ImageContainer>

I wish I could say I have a unit test that I've tried for this, but I don't even know how to begin.

thompsonsj · Accepted Answer · 2024-07-21 13:52:58Z

0

In general, testing the state of a React component is discouraged. See check state of a component using react testing library.

For this reason, you may find it difficult to find examples or ways of testing a component's state. However, there are people who advocate for state testing in a component and there are ways to do it. For example, this approach mocks the useState hook when used with the React global.

Personally, I'd take an alternative approach of looking for a way to check that this state change has had the desired effect. For example, using react-testing-library, fire a click event on <ImageContainer> and check to see if the underlying chain reaction (i.e. handleSelect making a state change and reactions to that state change) resulted in, say, that image no longer being visible in the UI.

For example:

import {render, fireEvent, screen} from '@testing-library/react'

test('deletes images', async () => {
  // ARRANGE
  render(<ImageContainer />)

  // ACT
  // Note: requires data-testid="image-container" to be set on `ImageContainer`
  fireEvent.click(screen.getByTestId('image-container'))

  // ASSERT
  // ... logic to check images deleted goes here
})

answered Jul 21, 2024 at 13:52

thompsonsj

4984 silver badges4 bronze badges

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

2 Comments

npfist Over a year ago

Thank you for your response. While in theory this all makes sense, I am having hard time understanding how to apply it. What do I need to set up prior to rendering if I cannot reference the state? How do I get the logic if I cannot check state? Sorry if the answer seems obvious

thompsonsj Over a year ago

I think I'd need to understand your component a bit better in order to assess how it could be tested. What does imagesToDelete do? Or maybe better phrased - what are the effects of a change to imagesToDelete?

Collectives™ on Stack Overflow

How do I create a Unit Test for a React Function that modifies a state array?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related