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?);
});
});
CodePudding user response:
it('should render anchor button', () => {
const { container } = mount(<Button anchorButton>Test</Button>);
expect(container.getByText('Test').closest('a')).toBeInTheDocument()
});