时间戳

首页 > 解决方案 > 使用 React 测试库和 Jest 测试悬停在悬停操作之前显示属性

reactjs - 使用 React 测试库和 Jest 测试悬停在悬停操作之前显示属性

问题描述

我一直在摸不着头脑，并没有真正找到任何可靠的文档说明为什么当我使用 userEvent.hover 时，测试不是显示悬停框阴影的预期测试。我曾尝试将 mouseEnter 和 mouseOver 与 fireEvent 一起使用，但无济于事。正如您在下面看到的，我还尝试将它包装在一个没有帮助的异步函数中。有任何想法吗？是因为转型吗？

先感谢您。

transition: all 0.2s ease-in-out;
 box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;

  &:hover {
transform: scale(1.05);
transform: translate(0, -0.1rem);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
  }

这是测试：

it("should expect the button to shift box-shadow on hover", async () => {
    const { getByRole } = render(
      <PrimaryButton aria-label="sign up">Sign Up</PrimaryButton>
    );
    userEvent.hover(screen.getByText(/sign up/i));
    await waitFor(() => {
      expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
        "box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
      );
    });
  });

这是我的 RTL/Jest（测试）的结果：

- box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+ box-shadow: rgba(0,0,0,0.07) 0px 1px 1px,rgba(0,0,0,0.07) 0px 2px 2px, rgba(0,0,0,0.07) 0px 4px 4px,rgba(0,0,0,0.07) 0px 8px 8px, rgba(0,0,0,0.07) 0px 16px 16px;

  53 |     userEvent.hover(screen.getByText(/sign up/i));
  54 |     await waitFor(() => screen.getByText(/sign up/i));
> 55 |     expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
     |                                                       ^
  56 |       "box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
  57 |     );
  58 |   });

如您所见，它表明我的盒子阴影应该是悬停之前的阴影。代码工作正常，可以编译和渲染。

标签： reactjsjestjshoverreact-testing-library

解决方案

推荐阅读