react-router-dom的Link标签测试不通过问题求助

你的问题出在Link组件的顺序和冗余定义上：

问题分析 #

测试用例明确要求：

• 第1个（索引0）Link必须是带有Home文本、指向/的组件
• 第2个（索引1）Link必须是带有Create House文本、指向/house/create的组件

但你的Nav组件里，前两个Link是空文本的，后两个才是带文本的。测试在检查索引0和1的Link时，自然会拿到空字符串，导致断言失败。

修复代码 #

直接删除冗余的空文本Link，只保留两个符合要求的带文本Link即可：

import React, { Component } from 'react'
import { Link } from 'react-router-dom';

class Nav extends Component {
    render() {
        return (
            <div>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/house/create">Create House</Link>
                </li>
            </div>
        );
    };
};

export default Nav;

验证逻辑 #

修改后：

• 索引0的Link满足to="/"且文本为Home，通过第二个测试
• 索引1的Link满足to="/house/create"且文本为Create House，通过第三个测试
• 同时Link总数为2，也满足第一个测试的length>=2要求

另外补充：你的HTML结构里直接在div下放置li不符合规范，建议用ul或ol标签包裹所有li，不过这不是测试失败的直接原因，只是代码规范层面的建议。

内容的提问来源于stack exchange，提问作者user19598060