標簽鏈接錯誤，react-router-dom

Question

我正在做一個 React 挑戰，它只是要求我從 react 路由器放置一個 Link 標簽，它應該有一個文本，它在瀏覽器中完美運行，但我無法通過測試，它一直顯示錯誤，我已經嘗試了一切。

這是我的代碼：

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

class Nav extends Component {

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

export default Nav;

這是測試代碼，第一個是通過，另外兩個是我不能通過的。

import React from "react";
import { Link } from "react-router-dom";
import { configure, shallow } from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import isReact from "is-react";


import Nav from "../src/components/Nav/Nav";

configure({ adapter: new Adapter() });

describe("<Nav />", () => {
    let nav;
    // Si o si vas a tener que usar class component! No van a correr ninguno de los tests si no lo haces. <3
    beforeEach(() => {
        nav = shallow(<Nav />);
        expect(isReact.classComponent(Nav)).toBeTruthy();
    });

    it('Debería renderizar dos <Link to="" />. El primero que vaya a "/", y el segundo a "/house/create"', () => {
        // Podes importar el componente Link de react-router-dom.
        expect(nav.find(Link).length).toBeGreaterThanOrEqual(2);
        expect(nav.find(Link).length).toBeGreaterThanOrEqual(2);
        expect(nav.find(Link).at(0).prop('to')).toEqual('/');
        expect(nav.find(Link).at(1).prop('to')).toEqual('/house/create');
    });

    it('Debería tener un Link con el texto "Home" que cambie la ruta hacia "/"', () => {
        // El orden en el que se declaran los Links es importante!
        expect(nav.find(Link).at(0).prop("to")).toEqual("/");
        expect(nav.find(Link).at(0).text()).toEqual("Home");
    });

    it('Debería tener un segundo Link, con texto "Create House" y que cambie la ruta hacia "/house/create"', () => {
        expect(nav.find(Link).at(1).prop("to")).toEqual("/house/create");
        expect(nav.find(Link).at(1).text()).toEqual("Create House");
    });
});

當我運行測試時，它說它正在接收一個空字符串而不是“Home”或“Create House”。 我找不到解決方案。 謝謝你。

Answer 1

在無法運行測試的情況下，我認為問題在於您添加了另外 2 個Link組件並編輯了這些組件，而不是最初的兩個Link組件。

您可以從單元測試中讀取它期望看到至少2 個鏈接組件，但隨后僅顯式檢查前兩個。 nav.find(Link)返回找到/匹配的元素/組件的數組，並且僅測試索引 0 和 1處的元素/組件。

describe("<Nav />", () => {
  let nav;
  beforeEach(() => {
    nav = shallow(<Nav />);
    expect(isReact.classComponent(Nav)).toBeTruthy();
  });

  it('Debería renderizar dos <Link to="" />. El primero que vaya a "/", y el segundo a "/house/create"', () => {
    expect(nav.find(Link).length).toBeGreaterThanOrEqual(2);

    // Test the first found link
    expect(nav.find(Link).at(0).prop('to')).toEqual('/');

    // Test the second found link
    expect(nav.find(Link).at(1).prop('to')).toEqual('/house/create');
  });

  // Tests the first found link
  it('Debería tener un Link con el texto "Home" que cambie la ruta hacia "/"', () => {
    expect(nav.find(Link).at(0).prop("to")).toEqual("/");
    expect(nav.find(Link).at(0).text()).toEqual("Home");
  });

  // Tests the second found link
  it('Debería tener un segundo Link, con texto "Create House" y que cambie la ruta hacia "/house/create"', () => {
    expect(nav.find(Link).at(1).prop("to")).toEqual("/house/create");
    expect(nav.find(Link).at(1).text()).toEqual("Create House");
  });
});

Nav組件正在渲染四個Link組件。

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

第一個測試通過，因為它只測試to屬性，但接下來的兩個測試失敗，因為它們缺少鏈接文本。

我認為解決方案是刪除前兩個鏈接，以便測試帶有文本值的后兩個鏈接。

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

因為后兩個測試都測試了to道具，所以第一個測試只測試to道具是完全多余的，可以/應該刪除。