Reactjs 如何使用React测试库将事件属性传递给customEvent？

我正在尝试使用RTL测试一个组件，RTL使用customEvent触发显示。给定这样一个组件：

const Alerts = () => {
  const [alerts, setAlerts] = useState([]);

  const addAlert = (body, type = 'info', timeout = 7500) => {
    const key = nextIndex++;
    setAlerts([
      ...alerts,
      { key, body, type },
    ]);

    // Set a timer to remove the alert.
    setTimeout(() => {
      setAlerts(alerts.filter((alert) => alert.key !== key));
    }, timeout);
  };

  document.addEventListener(
    'newalert',
    ({ details:
      {
        body = '',
        type = '',
        timeout = 1000
      } = {}
    }) => {
      addAlert(body, type, timeout);
  });

  return (
    <>
      {alerts.map((alert) => <Alert {...alert} />)}
    </>
  );
};

test('An alert is rendered on a newalert event', () => {
  render(<Alerts  />);
  fireEvent(
    document,
    createEvent('newalert', document,
    {
      details: {
        body: 'Hello World!',
        type: 'info',
        timeout: 1000,
      }
    })
  );

  expect(screen.getByText('Hello world'));
});

我试着这样测试它：

const Alerts = () => {
  const [alerts, setAlerts] = useState([]);

  const addAlert = (body, type = 'info', timeout = 7500) => {
    const key = nextIndex++;
    setAlerts([
      ...alerts,
      { key, body, type },
    ]);

    // Set a timer to remove the alert.
    setTimeout(() => {
      setAlerts(alerts.filter((alert) => alert.key !== key));
    }, timeout);
  };

  document.addEventListener(
    'newalert',
    ({ details:
      {
        body = '',
        type = '',
        timeout = 1000
      } = {}
    }) => {
      addAlert(body, type, timeout);
  });

  return (
    <>
      {alerts.map((alert) => <Alert {...alert} />)}
    </>
  );
};

test('An alert is rendered on a newalert event', () => {
  render(<Alerts  />);
  fireEvent(
    document,
    createEvent('newalert', document,
    {
      details: {
        body: 'Hello World!',
        type: 'info',
        timeout: 1000,
      }
    })
  );

  expect(screen.getByText('Hello world'));
});

---

它会按预期触发自定义事件，但是没有向事件传递任何属性详细信息、主体、类型或超时。我缺少什么？

您需要将事件构造函数的名称作为第四个参数传递，它就可以工作了

createEvent(
      'newalert',
      document,
      {
        detail: {
          body: 'Hello World!',
          type: 'info',
          timeout: 1000,
        }
      },
      { EventType: 'CustomEvent' }
    )
  );

---

您需要将事件构造函数的名称作为第四个参数传递，它就可以工作了

createEvent(
      'newalert',
      document,
      {
        detail: {
          body: 'Hello World!',
          type: 'info',
          timeout: 1000,
        }
      },
      { EventType: 'CustomEvent' }
    )
  );

---

我创建了以下代码笔来演示：其中有一个输入错误，应该是细节而不是细节，但是修复它并不能解决问题。我创建了以下代码笔来演示：其中有一个输入错误，应该是细节而不是细节，修复它并不能解决问题，但是，这些类型在测试库dom 7.24.4中已经修复。为什么称之为detail？为什么我不能给它起个名字？像数据一样？这些类型已经在测试库dom 7.24.4中修复。为什么称之为detail？为什么我不能给它起个名字？喜欢数据吗？