react-testing-library测试表单异步逻辑偶现通过或失败问题排查

• 1. 异步用户操作未等待：你使用的@testing-library/user-event的type、click方法都是异步API，需要加await等待执行完成。你当前在beforeEach里直接调用没有等待，导致测试用例开始执行时，搜索请求可能还没触发，或者还没返回。
• 2. findBy*查询逻辑不匹配断言需求：findBy*系列查询只会等待目标元素出现在DOM中，而你的两个select输入框从一开始就渲染在页面上，只是disabled属性会变化。findByTestId会在元素第一次出现时就返回，此时showVideo状态还没更新，输入框还处于禁用状态，断言自然失败。
• 3. 加screen.debug()能通过的原因：screen.debug()执行时会产生微小的延迟，刚好能等待异步请求返回、React状态更新完成，此时再断言属性就符合预期了，属于巧合通过。

步骤1：异步操作加await #

将beforeEach改为异步函数，等待所有用户操作执行完成：

// 修改前
beforeEach(() => {
  render(<SelectMedia />);
  user.type(
    screen.getByTestId(/input-source-url/i),
    "https://www.youtube.com/watch?v=0La3aBSjvGY"
  );
  user.click(screen.getByRole("button", { name: /search/i }));
});

// 修改后
beforeEach(async () => {
  render(<SelectMedia />);
  await user.type(
    screen.getByTestId(/input-source-url/i),
    "https://www.youtube.com/watch?v=0La3aBSjvGY"
  );
  await user.click(screen.getByRole("button", { name: /search/i }));
});

步骤2：等待属性更新后再断言 #

因为输入框已经存在，需要等待disabled属性变为false，两种实现方式：

方式1：用waitFor包裹断言 #

test("the sourceLanguage input is no longer disabled", async () => {
  await waitFor(() => {
    expect(screen.getByTestId(/input-select-source-language/i)).toBeEnabled();
  })
});

test("the targetLanguage input is no longer disabled", async () => {
  await waitFor(() => {
    expect(screen.getByTestId(/input-select-target-language/i)).toBeEnabled();
  })
});

方式2：先等待确定性的状态更新标记 #

你第一个测试的视频播放器激活状态和showVideo是同步更新的，而且测试稳定通过，可以先等待这个标记出现，再断言输入框状态：

test("the sourceLanguage input is no longer disabled", async () => {
  // 先等视频播放器加载完成，此时showVideo已经变为true
  await screen.findByTestId(/video-player-enabled/i);
  expect(screen.getByTestId(/input-select-source-language/i)).toBeEnabled();
});

test("the targetLanguage input is no longer disabled", async () => {
  await screen.findByTestId(/video-player-enabled/i);
  expect(screen.getByTestId(/input-select-target-language/i)).toBeEnabled();
});

如果你的测试用例之间没有依赖，也可以把三个测试合并为一个，减少重复的渲染和操作开销，进一步提升稳定性：

test("valid youtube url activates player and enables language selects", async () => {
  render(<SelectMedia />);
  await user.type(
    screen.getByTestId(/input-source-url/i),
    "https://www.youtube.com/watch?v=0La3aBSjvGY"
  );
  await user.click(screen.getByRole("button", { name: /search/i }));

  expect(await screen.findByTestId(/video-player-enabled/i)).toBeInTheDocument();
  expect(screen.getByTestId(/input-select-source-language/i)).toBeEnabled();
  expect(screen.getByTestId(/input-select-target-language/i)).toBeEnabled();
});

内容的提问来源于stack exchange，提问作者kevin