Here is an example of a mutation report showing that a mutation eliminating an HTML attribute that survived:
This is showing that the code:
<Button style={{ float: "right" }} as={Link} to="/hotels/create">
Was mutated to the following (removing float: "right"
), without any tests failing (i.e. “the mutant survived”).
<Button style={{ }} as={Link} to="/hotels/create">
To fix this, you can add this to your test, where thisButton
is a handle to the button in question:
expect(thisButton).toHaveAttribute("style", "float: right;");
For example, here’s what that looks like in context.
With screen
included in the import from @testing-library/react
:
import { fireEvent, render, waitFor, screen } from "@testing-library/react";
We can write:
const createHotelButton = screen.getByText("Create Hotel");
expect(createHotelButton).toBeInTheDocument();
expect(createHotelButton).toHaveAttribute("style", "float: right;");