如何修复此单元测试？

Question

我对我的 .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 {} is missing the following properties from type Banner: close and text”

Answer 1

“类型 {} 缺少横幅类型的以下属性：关闭和文本”

仔细阅读此错误消息。

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} />);
})

---

此外，您的组件中还有几个语法错误。如果您use proper indenting 告知您代码的结构，您的代码将更容易理解。