What I am doing is testing the dark mode feature. There is a button to toggle dark mode. When it clicks, the onClick event will trigger and the css variables values will be changed to dark mode. But when i check the background color of an textarea, that is not changed. I checked that the dark mode button onClick function is triggering successfully.
The test case :-
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
});
The button element :-
<button className="menu-btn btn" onClick={toggleTheme}>
Dark Mode
</button>
The toggleTheme function from button element 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");
}
}
To get more info about the code :- https://github.com/Muhammed-Rahif/Notepad
Is there any problem with css variables in react-testing-library or we cannot test css variables related test in RTL? If can how it will be?!
From My research I found these two issues in Github :-
