Having the following unit test:
const MY_URL = 'example.com'
it('should render MyComponent with url', () => {
const { getByTestId } = render(<MyComponent />);
const myLink = getByTestId(TestIds.LINK);
expect(loggingLink).toContain(MY_URL);
});
The test fails with the following message:
Expected value: "example.com"
Received object: <div data-testid="test-link"><a href="example.com">my-link</a></div>
So it seems that toContain
doesn't check what is inside of that object. Is there a method to check that the URL is inside the object?
CodePudding user response:
You can get the anchor element with ByRole
query. Just search it with link
and then check the attribute href
:
// I used screen in this case, but you can get getByRole from render.
const anchorElement = screen.getByRole('link');
expect(anchorElement).toBeInTheDocument();
expect(anchorElement).toHaveAttribute('href', 'example.com');
Anchor elements have link
role only when href attribute is present, otherwise no corresponding role. You can check more about it here.
CodePudding user response:
There's a couple of things. First, toContain
is for testing if an element exists in an array. https://jestjs.io/docs/expect#tocontainitem
Second, the point of RTL is not to test properties and such, but to test what users see on the screen. So I guess the "RTL way" of doing this would be to click the link and see what's displayed. Which admittedly is not always helpful in every situation!
If you are absolutely sure this url needs a test around it, then you do have an escape hatch via the underlying jest jsdom selectors. You can query an element using a bog standard querySelector
and then test the href
property directly.
In fact you don't even need querySelector. The getBy
methods all return a jsdom object which you can then test with getAttribute('href')