时间戳

首页 > 解决方案 > 如何测试来自路由器的链接是否有效？开玩笑/RTL

reactjs - 如何测试来自路由器的链接是否有效？开玩笑/RTL

问题描述

使用 RTL，我如何检查链接中的 to='/login' 是否为真，因为 RTL 库主要通过 testid 或文本获取。

当前页面测试

import React from 'react';
import Proptypes from 'prop-types';
import { Link } from 'react-router-dom';

function Navigation(props) {
  return (
    <nav className="header__nav">
      <Link to="/login">
        <button type="button" className="header__login">LOGIN</button>
      </Link>
    </nav>
  );
}

测试

describe('Navigation Content', () => {
    test('clicking login button', () => {
      const props = jest.fn();
      const { getByTestId, getByText } = render (
        <Navigation popUpHandler={props}/>, { wrapper: MemoryRouter }
      );

        expect((<Link>).toHaveAttribute('to', '/login')
    }) 
})

单击时我尝试呈现的页面

function LoginForm() {

  return (
    <div className="login">
        <h1 className="entryheader__header">Login</h1>
    </div>
  )
export default LoginForm;

标签： reactjsjestjsreact-testing-library

解决方案

你可以尝试像这样渲染你的组件：

import { MemoryRouter } from 'react-router-dom'
...
...

 const { getByTestId, getByText } = render(<YourComponent {...props}/>, { wrapper: MemoryRouter });

fireEvent.click(getByText('LOGIN'));

expect(getByText('some-text-on-login-page')).toBeInTheDocument();

这将使用内存路由器包装您的组件，而不是您手动进行。

您也可以尝试在测试文件中使用BrowserRouter而不是MemoryRouter..

推荐阅读