React测试库仅适用于内联样式

发布于 2025-01-29 10:48:58 字数 997 浏览 1 评论 0原文

我正在尝试测试元素是否具有适当的样式。但是，这只有在我将内联样式添加到元素中时才起作用。我还使用CSS模块，所以我不确定这是否是问题。测试

test("3.1.2.if the nav link opens properly", () => {
  render(
    <Router>
      <Header />
    </Router>
  );
  const nav = screen.getByRole("navigation");
  expect(nav.style).toHaveProperty("transform", "rotate(0)")
});

（相关）JSX

<div
          className={`${styles.options} ${
            dropdownOpened ? styles.options__dropdown__open : ""
          }`}
          onClick={handleDropdown}
          role="navigation"
        >
          <IconContext.Provider
            value={{
              color: "white",
              className: styles.options__dropdown__btn,
            }}
          >
            <IoMdArrowDropdown />
          </IconContext.Provider>
        </div>

（相关）CSS

.options:not(.options__menu__opened, .options__dropdown__open) {
  transform: rotate(0);
}

原文

I'm trying to test if an element has the proper styles. However this only works when I add inline styling to the element. I'm also using css modules, so I'm not sure if that is the problem.
The test

test("3.1.2.if the nav link opens properly", () => {
  render(
    <Router>
      <Header />
    </Router>
  );
  const nav = screen.getByRole("navigation");
  expect(nav.style).toHaveProperty("transform", "rotate(0)")
});

(Relevant) JSX

<div
          className={`${styles.options} ${
            dropdownOpened ? styles.options__dropdown__open : ""
          }`}
          onClick={handleDropdown}
          role="navigation"
        >
          <IconContext.Provider
            value={{
              color: "white",
              className: styles.options__dropdown__btn,
            }}
          >
            <IoMdArrowDropdown />
          </IconContext.Provider>
        </div>

(Relevant) CSS

.options:not(.options__menu__opened, .options__dropdown__open) {
  transform: rotate(0);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡紫姑娘！ 2025-02-05 10:48:58

您可以尝试使用 window> window.getComputedStylel ，另请参见<，另请参见< a href =“ https://stackoverflow.com/questions/66912897/testing-library-dom-window-getcomputed-not-implented-not-implemend--eror-even-after”>@testing-testing-library/dom dom window.getComputedEdstyle“未实现”即使在设置ComputedStyleSupportsPseudoelements之后：True

回复收藏 0 原文

~没有更多了~