Как я могу исправить этот модульный тест?

#reactjs #typescript #unit-testing #tsx

Вопрос:

Я довольно новичок в модульном тестировании моих файлов .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 amp;amp; <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 {} отсутствуют следующие свойства в type Banner: закрыть и текст»

1. Вы не передали text и close реквизит Banner компоненту. Кроме того, почему вы использовали onClick функцию в {onClick} , вы не можете отобразить функцию. Пожалуйста, измените свой код, если есть ошибки.

2. я это исправил, не могли бы вы привести мне пример для теста?

3. Я так не думаю, в вашем коде все еще есть некоторые ошибки

4. я думаю, что теперь я исправил ошибки

Ответ №1:

«в type {} отсутствуют следующие свойства в type Banner: закрыть и текст»

Внимательно прочитайте это сообщение об ошибке.

Banner является функциональным компонентом. Это означает, что это функция, которая принимает свои реквизиты в качестве объекта. И он вводится для получения двух реквизитов, close и text . Эти реквизиты необходимы.

Но вы не предоставляете никаких реквизитов в своем тесте. Поскольку аргумент props всегда является объектом, а у вас нет реквизита, то аргумент props является пустым объектом.

Итак, теперь эта ошибка сообщает вам, что ваша функция ожидает объект, но в том, который вы предоставили, отсутствуют close text реквизиты and .

Вам нужно выполнить требуемые параметры вашего компонента. Независимо от того, участвуете вы в тестировании или нет, контракт этих типов должен быть выполнен.

Это означает, что вы хотите что-то вроде этого:

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

Кроме того, в ваших компонентах есть несколько синтаксических ошибок. И ваш код будет намного легче понять, если вы используете правильные отступы, чтобы информировать вас о структуре вашего кода.