使用 jest-dom 使用 Tailwind CSS 转换测试 React 组件的可见性

问题描述

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

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

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

它存在于文档中
它没有将其 css 属性 display 设置为 none
它的 css 属性 visibility 没有设置为 hidden 或 collapse
它没有将其 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");
});

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jest-dom jestjs react-testing-library tailwind-css testing