如何使用 Jest 和 React 测试库编写测试以检查锚标记 <a /> 是否存在

Question

基于道具 anchor 我正在渲染 Material ui 按钮或 React 路由器（锚点）link:

const Button = (props: Props) => {

  return props.anchor ? (
    <Link to={props.url!}>
        {props.children}
    </Link>
  ) : (
    <MaterialButton
      onClick={props.onClick}
    >
      {props.children}
    </MaterialButton>
  );
};

如何使用 Jest 和 React testing library 编写测试以检查我的测试中是否存在锚标记 <a />：

describe('Button', () => {
  const mount = (tree: ReactElement) => new FixtureMount(tree).withTheme().render();
  it('should render correctly', () => {
    const { container } = mount(<Button>Test</Button>);
    expect(container).toMatchSnapshot();
  });

  it('should render anchor button', () => {
    const { container } = mount(<Button anchorButton>Test</Button>);
    expect(// ----> What to add here?);
  });
});

Answer 1

it('should render anchor button', () => {
    const { container } = mount(<Button anchorButton>Test</Button>);
    expect(container.getByText('Test').closest('a')).toBeInTheDocument()
  });

如何使用 Jest 和 React 测试库编写测试以检查锚标记 <a /> 是否存在

How to write a test with Jest and React testing library to check if anchor-tag <a /> exist

reactjs

jestjs

react-testing-library