我對我的 .tsx 檔案進行單元測驗還很陌生，我目前在測驗這個檔案時遇到了麻煩（抱歉，如果格式已關閉）
//this is Banner.tsx
import React, {useCallback} from "react";
type Properties = {
close: () => void;
text: string;
const Banner: React.FC<Properties> = ({close, text}) => {
const onClick = useCallback(() => {
close();},
[close, text]);
return (
<div className = "BannerBox">
<div className = "banner">
<span className = "popup"> onClick={onClick}[x]
</span>
{text}
</div>
</div>
);
};
export default Banner;
//this is App.tsx
import Banner from "./Components/Banner";
function App(): JSX.Element {
const [isOpen, setIsOpen]=useState(false);
const toggleBanner = () => {
SetIsOpen(!isOpen);
};
return (
<div>
<input type = "button"
value = "popup"
onClick={toggleBanner}/>
<p>hi</p>
{isOpen && <Banner text = {"hello"} close={() => isOpen(false)}/>}
</div>
export default App;
這是我迄今為止所擁有的
//Banner.test.tsx
test("Check that all type Properties are being used", () => {
render(<Banner />);
})
它給出了這個錯誤 ->“type {} 缺少來自型別 Banner 的以下屬性：close 和 text”
uj5u.com熱心網友回復：
“型別 {} 缺少橫幅型別中的以下屬性：關閉和文本”
請仔細閱讀此錯誤訊息。
Banner是一個功能組件。這意味著它是一個將道具作為物件的函式。它被輸入以接收兩個道具，close和text。這些道具是必需的。
但是您在測驗中沒有提供任何道具。由于 props 引數始終是一個物件，而您沒有 props，因此 props 引數是一個空物件。
所以現在這個錯誤告訴你你的函式需要一個物件，但是你提供的那個缺少close和text道具。
您需要滿足組件所需的道具。無論你是否在測驗中，這些型別的合同都必須履行。
這意味著你想要這樣的東西：
//Banner.test.tsx
test("Check that all type Properties are being used", () => {
render(<Banner text="Hello, World!" close={() => null} />);
})
此外，您的組件中有幾個語法錯誤。如果您使用適當的縮進來告知您代碼的結構，您的代碼將更容易理解。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/360723.html
上一篇：await在異步函式之外使用