时间戳

首页 > 解决方案 > 如何为下面的 Header 组件编写一个简单的测试用例？我是新来的反应

reactjs - 如何为下面的 Header 组件编写一个简单的测试用例？我是新来的反应

问题描述

我是一名学习者，这是示例 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;

标签： reactjs

解决方案

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

推荐阅读