React测试图谱测试DOM在事件火上发生变化

Question

给定以下组件（＆lt; button＆gt;是一个自定义组件，是＆lt; button＆gt; 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>
    );
};

我想测试按钮的status>状态>状态>转弯忙在成为选择之前，一旦onRemove函数解析。如何使用用户事件执行此操作？

Answer 1

您可以创建一个模拟onremove async函数，并在stetIsremove（true）之后手动解析承诺。这样您就可以断言iSremoving是true首先，并在解决承诺后，将其断言为false。

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();
  });
});

测试结果：

 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