0

我有以下组件，它将项目列表显示为使用 data.json 文件中的 fetch api 调用获取的卡片。

const [items, setItems] = useState([]);

useEffect((): void => {
    getData().then((response: any): void => {
        
        if (!items) {
            const collection = response.data.items;
            
            setItems(collection);
        }
        
    }); 
});

return (
    <div className="Items-container">
        {
            items?.map((i: any, index: number): any => {
                return (
                    <button className="Items-cardAction Items-card" key={index}>
                        <div className="Items-imageContainer">
                            <img className="Items-image Items--imageRounded" src={i.image} alt=""/>
                        </div>
                        <h3 className="Items-name">{i.name}</h3>
                        <p>{i.location}</p>
                        <p>{i.plan}</p>
                        <p>{i.age}</p>
                    </button>
                )
            })
        }
    </div>
)

获取方法：

const getData=()=>{
return fetch('data.json'
    ,{
        headers : {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    }
  )
}

如果我在 App.tsx 中使用这个组件，我该如何测试它在 App.tsx 中的使用。另外，我该如何测试这个组件以及它的作用（调用 api，使用来自 api 调用的数据用“卡片”填充 dom）。还有我应该在这里测试什么。我应该专注于测试数据还是 dom？还是函数调用？testing library 和 jest 中的一些文档在这种情况下并没有提供太多帮助。

4

0 回答 0