1

当 React 组件使用 CSS 转换隐藏时，如何测试该组件在 DOM 中是否可见transform: scale(0)？

jest-dom有一个.toBeVisible()匹配器，但这不起作用，因为transform: scale(0)它不是受支持的可见/隐藏触发器之一。根据文档：

如果满足以下所有条件，则元素可见：

  • 它存在于文档中
  • 它没有将其 css 属性display设置为none
  • 它没有将其 css 属性设置visibility为hiddencollapse
  • 它没有将其 css 属性opacity设置为 0
  • 它的父元素也是可见的（依此类推，直到 DOM 树的顶部）
  • 它没有hidden属性
  • 如果<details />它有open属性

我没有使用该hidden属性，因为它干扰了我的过渡动画。我正在使用aria-hidden，但这也不是受支持的触发器之一。

我的组件的简化版基本上是这样的。我正在使用 Tailwind CSS 进行转换和过渡。

import React from "react";
import clsx from "clsx";

const MyComponent = ({isVisible = true, text}) => (
  <div
    className={clsx(
      isSelected ? "transform scale-1" : "transform scale-0",
      "transition-all duration-500"
    )}
    aria-hidden={!isVisible}
  >
     <span>{text}</span>
  </div>
)

我可以通过以下方式检查隐藏元素：

  • toHaveClass("scale-0")
  • toHaveAttribute("aria-hidden", true)

但与toBeVisible评估整个父树不同的是，这些匹配器只查看元素本身。

如果我从那时起使用getByText，react-testing-library我将访问<span>内部<div>而不是<div>我想要检查的内部。所以这不起作用：

import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { MyComponent } from "./MyComponent";

it("is visible when isSelected={true}", () => {
  const {getByText} = render(
    <MyComponent
      isSelected={true}
      text="Hello World"
    />
  );
  expect(getByText("Hello World")).toHaveClass("scale-1");
});

解决这个问题的最佳方法是什么？

4

1 回答 1

1

我相信您在这里遇到的问题与这个问题有关。我的理解是问题不在于有效的可见性计算错误，而是顺风的 CSS 没有包含在 jsdom 文档中。

于 2022-02-09T21:59:28.917 回答