如何测试您传入的自定义道具的react-aria-components？

Question

组件在实时本地服务器上渲染良好，并且一切正常。但我不知道如何测试react-aria-library 的组件。我知道它们已经被创建者测试过，但我想将它们实现到我的单元/集成/端到端测试中。

这是一个基本示例。

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Button } from "react-aria-components";

describe("Button Component", () => {
  it("renders a regular button", () => {
    render(<button />);
    const buttonElement = screen.getByRole("button");
    expect(buttonElement).toBeInTheDocument();
  });
  it("renders a react-aria-button", () => {
    render(<Button />);
  });
});

我设置了测试环境并导入了我需要的东西，包括库中的 Button 组件。

然后我运行 2 个测试，这两个测试都呈现一个简单的按钮。第一个测试呈现常规/手动创建的按钮，第二个测试使用库中的 组件。

结果：

TypeError: Cannot read properties of null (reading 'useContext')

❯ Button Component (2)
  ✓ renders a regular button (passed)
  × renders a react-aria-button (failed)

...
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

它产生了一个错误，甚至没有预料到任何事情。问题在于该组件使用带有 useContext 钩子的实用程序函数，这会触发错误。 Adobe 文档说每个组件都使用上下文挂钩，这意味着所有组件都会发生此错误。

我是菜鸟。如果我能得到任何帮助，我将不胜感激。

解决方案是简单地重新启动所有内容。我仍然不确定问题是什么，但它成功了。

Answer 1

解决方案是简单地重新启动所有内容。我仍然不确定问题是什么，但它成功了。