How can I fix this Unit Test?-CodePudding

I'm fairly new to unit testing my .tsx files and I am currently having trouble testing this (sorry if the format is off)

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

this is what i have so far

//Banner.test.tsx
test("Check that all type Properties are being used", () => {
render(<Banner />);
})

it gives this error -> "type {} is missing the following properties from type Banner: close and text"

CodePudding user response：

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

Read this error message carefully.

Banner is a functional component. That means it's a function that that takes it's props as an object. And it's typed to receive two props, close and text. These props are required.

But you are providing no props in your test. Since the props argument is always an object, and you have no props, then the props argument is an empty object.

So now that error tells you that your function expects an object, but the one you provided is missing the close and text props.

You need to satisfy the required props of your component. Whether you are in a test or not, the contract of those types must must be fulfilled.

That means you want something like this:

//Banner.test.tsx
test("Check that all type Properties are being used", () => {
  render(<Banner text="Hello, World!" close={() => null} />);
})

In additional there several syntax errors in your components. And your code will be much easier to understand if you use proper indenting to inform you of the structure of your code.