如何使用React Testing Library测试Antd Menu中a标签的href属性是否正确

修复方案 #

1. 先修正App.js语法错误 #

原有代码存在多处语法问题，会直接导致渲染失败，修正后代码如下：

import React from 'react';
import { Menu } from 'antd';

export default function App(){
  return (
    <Menu>
      <Menu.SubMenu key='google' title="Google Links">
        <Menu.ItemGroup>
          <Menu.Item>
            <a href="https://www.google.com/"> Homepage Link </a>
          </Menu.Item>
          <Menu.Item>
            <a href="https://www.google.com/imghp?hl=en"> Images Link</a>
          </Menu.Item>
        </Menu.ItemGroup>
      </Menu.SubMenu>
    </Menu>
  )
}

2. 单元测试修正 #

方案一：Enzyme 测试

原有写法存在三个问题：

• shallow 是浅渲染，不会渲染 Antd 内部子组件内容，需要改用全量渲染的 mount
• SubMenu 默认收起，内部元素默认不会渲染到 DOM 中，需要先触发 SubMenu 展开
• 选择器错误，href 属性绑定在 a 标签上，不是 Menu 组件上

正确写法：

import { mount } from 'enzyme';
import App from './App';
import { Menu } from 'antd';

describe('Google Links', () => {
  it('Links Work', () => {
    const wrapper = mount(<App />);
    // 触发SubMenu展开
    wrapper.find(Menu.SubMenu).simulate('click');
    // 查找a标签校验href
    const links = wrapper.find('a');
    expect(links.at(0).prop('href')).toBe('https://www.google.com/');
    expect(links.at(1).prop('href')).toBe('https://www.google.com/imghp?hl=en');
  });
});

方案二：React Testing Library 测试

原有写法问题：

• SubMenu 默认收起，内部元素属于隐藏状态，getByText 默认不会匹配隐藏元素
• 存在字符串未闭合的语法错误

可以通过开启隐藏元素匹配的方式直接获取元素，写法如下：

import { render, screen } from '@testing-library/react';
import App from './App';

describe('Google Links', () => {
  it('Links Work', () => {
    render(<App />);
    // 开启hidden选项匹配隐藏元素，也可以先触发SubMenu点击展开后再匹配
    expect(screen.getByText('Homepage Link', { hidden: true })).toHaveAttribute('href', 'https://www.google.com/');
    expect(screen.getByText('Images Link', { hidden: true })).toHaveAttribute('href', 'https://www.google.com/imghp?hl=en');
  });
});

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