Given the following component (<Button> is a custom component that's <button>-like)

const MyElement = ({
    onRemove,
}) => {
    const [isRemoving, setIsRemoving] = useState(false);

    const handleRemove = (event) => {
        event.stopPropagation();
        setIsRemoving(true);
        onRemove().finally(() => setIsRemoving(false));
    };

    return (
        <Button
            status={isRemoving ? 'busy' : 'selected'}
            onClick={handleRemove}
        >
            Remove
        </Button>
    );
};

I want to test that the button's status turn busy before becoming selected once the onRemove function resolves. How do I do this with user events?

CodePudding user response：

You can create a mock onRemove async function and resolve the promise manually after setIsRemove(true). So that you can assert the isRemoving to be true firstly and assert it to be false after the promise is resolved.

MyElement.tsx:

import React, { useState } from 'react';

export const MyElement = ({ onRemove }) => {
  const [isRemoving, setIsRemoving] = useState(false);

  const handleRemove = (event) => {
    event.stopPropagation();
    setIsRemoving(true);
    onRemove().finally(() => setIsRemoving(false));
  };

  return (
    <>
      <button onClick={handleRemove}>Remove</button>
      <p>{isRemoving ? 'busy' : 'selected'}</p>
    </>
  );
};

MyElement.test.tsx:

import { fireEvent, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { MyElement } from './MyElement';

describe('72858536', () => {
  test('should pass', async () => {
    let _resolve;
    const onRemoveMock = () => new Promise((resolve) => (_resolve = resolve));
    render(<MyElement onRemove={onRemoveMock} />);
    fireEvent.click(screen.getByText(/remove/i));
    expect(screen.getByText(/busy/)).toBeInTheDocument();
    _resolve();
    expect(await screen.findByText(/selected/)).toBeInTheDocument();
  });
});

Test result:

 PASS  stackoverflow/72858536/MyElement.test.tsx
  72858536
    ✓ should pass (40 ms)

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |                   
 MyElement.tsx |     100 |      100 |     100 |     100 |                   
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.778 s, estimated 16 s