如何在react中为下面的Header组件编写一个简单的测试用例?我是个新手

Question

我是一名学习者，这是示例Header组件如何为该组件编写笑话测试用例。

import React from "react";
import './styles/Header.css';
const Header = () => <header className="d-flex flex-wrap justify-content-md-between py-3 mb-4 header-border">
<h5 className="header-title">Header Component</h5>
<ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" className="nav-link px-2 link-secondary">Home</a></li>
<li><a href="#" className="nav-link px-2 link-dark">About</a></li>
<li><a href="#" className="nav-link px-2 link-dark">Gallary</a></li>
<li><a href="#" className="nav-link px-2 link-dark">FAQs</a></li>
<li><a href="#" className="nav-link px-2 link-dark">Contact Us</a></li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
</form>
</header>
export default Header;

Answer 1

我建议使用react-test-renderer包来制作快照并测试组件是否正确渲染。通常你也会测试一个组件的功能，但由于这里没有任何功能，你可以测试特定html元素的存在。