我正在尝试测试一个菜单按钮，它会显示导航链接的叠加（onClick）这是另一个组件。但是我一直得到这个错误。TypeError: Cannot read properties of null (reading 'style')。所以从这个错误来判断，我认为样式对象是个问题，我甚至不明白为什么。这是我应该尝试模仿的东西吗？如果是的话，如何？。我感谢任何帮助。我有代码的组成部分和它的测试文件如下。

// Nav.js fie
import "../../styles/Nav.sass";
import { useState } from "react";

const Nav = () => {
    const [navIsExpanded, setNavIsExpanded] = useState(false);
    return (
        <button
            className="nav-button"
            onClick={() => {
                const navOverlay = document.getElementById("layer");
                if (navIsExpanded) {
                    setNavIsExpanded(false);
                    navOverlay.style.left = "-80vw";
                } else {
                    setNavIsExpanded(true);
                    navOverlay.style.left = "0vw";
                }
            }}
        >
            {navIsExpanded ? "CLOSE" : "MENU"}
        </button>
    );
};
export default Nav;

这是我目前能想到的。

// Nav.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom"; // optional
import userEvent from "@testing-library/user-event";
import Nav from "../Components/Nav/Nav";

describe("Menu Button Component", () => {
    it("changes it's textContent onclick", () => {
        render(<Nav />);
        const navButton = screen.getAllByRole("button");
        userEvent.click(navButton[0]);

        expect(setStateMock.mock.calls).toHaveLength(1);
    });
});