Question

我有以下组件，它显示一个项目列表，作为使用从 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？还是函数调用？来自测试库和 jest 的一些文档并没有真正说明这种情况。

使用 react 测试异步组件

0 个答案: