React測驗庫|.toHaveAttribute()

我正在嘗試測驗一個組件，但單元測驗有問題。

該組件具有通過道具提供的選項卡。它是一個物件陣列。當組件第一次渲染時，應該選擇第一個選項卡：

• aria-selected 設定為 true
• 行內樣式設定不同的背景顏色屬性。
• 所選選項卡的狀態為 isActive = true

當單擊另一個選項卡然后單擊選定的選項卡時，上面列出的所有屬性都應該應用于單擊的選項卡。

當我手動測驗時，一切正常。但是，當我為測驗這種行為進行單元測驗時，它根本不起作用。

這是代碼：

import React, { useState } from "react";
import { Box, Typography, Button } from "@mui/material";
import style from "./header.module.scss";

interface IProps {
  tabs: Array<{ src: string; name: string }>;
}

const Header = ({ tabs }: IProps) => {
  const [activeTab, setActiveTab] = useState<string>(
    tabs[0].name.toUpperCase(),
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
    const tabName: string = event.currentTarget.innerText;
    setActiveTab(tabName);
  };

  const buttonBackgroundColor = (
    buttonName: string,
    activeTabName: string,
  ): string => {
    let className: string;
    if (
      buttonName &&
      activeTabName &&
      buttonName.toUpperCase() === activeTabName.toUpperCase()
    ) {
      className = "rgb(94, 70, 136)";
    } else {
      className = "inherit";
    }

    return className;
  };

  const setAriaSelected = (currentTab: string): boolean => {
    return (
      currentTab.localeCompare(activeTab, undefined, {
        sensitivity: "accent",
      }) === 0
    );
  };

  return (
    <Box component="header" className={style.header}>
      {tabs.map((tab) => (
        <Button
          key={tab.name}
          className={style.button}
          onClick={handleClick}
          role="tab"
          aria-selected={setAriaSelected(tab.name)}
          style={{
            backgroundColor: buttonBackgroundColor(tab.name, activeTab),
          }}
        >
          <div className={style.imgWrapper}>
            <img src={tab.src} alt={tab.name} />
          </div>
          <Typography fontWeight={300} letterSpacing="0.1rem" fontSize="0.9rem">
            {tab.name}
          </Typography>
        </Button>
      ))}
    </Box>
  );
};

export default Header;

測驗檔案：

 it("makes the second tab to have aria-selected attribute to true when it's clicked", async () => {
    render(
      <MemoryRouter>
        <Header tabs={tabs} />
      </MemoryRouter>,
    );
    const user = userEvent.setup();
    const secondTab = screen.getByRole("tab", { name: /tab2/i });
    await user.click(secondTab);

    expect(secondTab).toHaveAttribute("aria-selected", "true");
  });

控制臺訊息：

● Header component ? makes the second tab to have aria-selected attribute to true when it's clicked

expect(element).toHaveAttribute("aria-selected", "true") // element.getAttribute("aria-selected") === "true"

Expected the element to have attribute:
  aria-selected="true"
Received:
  aria-selected="false"

  57 |     await user.click(secondTab);
  58 |
> 59 |     expect(secondTab).toHaveAttribute("aria-selected", "true");
     |                       ^
  60 |   });
  61 | });
  62 |

  at Object.<anonymous> (src/shared/header/__tests__/Header.tsx:59:23)

uj5u.com熱心網友回復：

問題是innerTextjsdom不支持，因此您的組件永遠不會將第二個選項卡設定為活動狀態。

它是否適用textContent，因為這是標準？（你將不得不呼叫.trim()它，因為它也保留空格）

const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
  const tabName: string = event.currentTarget.textContent.trim();
  setActiveTab(tabName);
};

如果沒有，則嘗試將tab.name直接傳遞給handleClick

const handleClick = (tabName: string): void => {
  setActiveTab(tabName);
};

和

onClick={() => handleClick(tab.name)}

標籤：反应测试反应测试库用户事件

上一篇：無法在Laravel中模擬部分Log外觀

下一篇：在Java中讀取文本檔案并從中創建兩個單獨的串列