我该如何修复这个单元测试？

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

出现此错误 ->“类型 {} 缺少类型 Banner 中的以下属性：关闭和文本”

Answer 1

"type {} is missing the following properties from type Banner: close and text"

仔细阅读此错误消息。

Banner 是功能组件。这意味着它是一个将其 props 作为对象的函数。它被输入为接收两个道具，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 告知您代码的结构，您的代码将更容易理解。

我该如何修复这个单元测试？

How can I fix this Unit Test?

unit-testing

typescript

reactjs

tsx