0

我正在做的是测试暗模式功能。有一个按钮可以切换暗模式。当它点击时，onClick事件将触发，css 变量值将更改为暗模式。但是当我检查文本区域的背景颜色时，它没有改变。我检查了暗模式按钮onClick功能是否成功触发。

测试用例：-

it("should change the background color when dark mode enabled", () => {
    render(<App />);
    const darkModeBtn = screen.getByText(/dark mode/i);
    const textArea = screen.getByTestId("text-area");

    darkModeBtn.click();

    expect(textArea).toHaveStyle("background-color: rgb(39, 39, 39)"); // rgb(39, 39, 39) is equal to #272727
});

按钮元素：-

<button className="menu-btn btn" onClick={toggleTheme}>
     Dark Mode
</button>

toggleTheme按钮元素的功能onClick：-

function toggleTheme() {
  const currentTheme: string =
    document.documentElement.getAttribute("data-theme") ||
    localStorage.getItem("theme") ||
    "dark";

  if (currentTheme === "light") {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else if (currentTheme === "dark") {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

要获取有关代码的更多信息：- https://github.com/Muhammed-Rahif/Notepad

react-testing-library 中的 css 变量是否有任何问题，或者我们无法在 RTL 中测试与 css 变量相关的测试？如果可以，会怎么样？！

根据我的研究，我在 Github 中发现了这两个问题：-

4

0 回答 0