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

Questions

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

March 7, 2022

Based on a prop anchor I am rendering a Material ui button or a React router (anchor) link:

const Button = (props: Props) => {

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

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

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?);
  });
});

>Solution :

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