Common Testing Library antipatterns

bad.js

import { render } from "@testing-library/react";
import { MyComponent } from './MyComponent';

describe("MyComponent", () => {
  let wrapper;

  beforeEach(async () => {
    wrapper = render(<MyComponent butiful />);
  });

  it("should render a butiful component", async () => {
    expect(wrapper.getByText("I am butiful")).toBeInTheDocument();
  });

  it("should render an ugly component", async () => {
    wrapper.rerender(<MyComponent butiful={false} />);
    expect(wrapper.getByText("I am butiful")).not.toBeInTheDocument();
  });
});

good.js

import { render } from "@testing-library/react";
import { MyComponent } from './MyComponent';

describe("MyComponent", () => {
  it("should render a butiful component", async () => {
    const { getByText } = render(<MyComponent butiful />);
    expect(getByText(/I am butiful/i)).toBeInTheDocument();
  });

  it("should render an ugly component", async () => {
    const { getByText } = render(<MyComponent butiful={false} />);
    expect(getByText(/I am butiful/i)).not.toBeInTheDocument();
  });
});

good2.js

import { render } from "@testing-library/react";
import { MyComponent } from "./MyComponent";

const defaultProps = {
  size: "large",
  color: "salmon",
  butiful: true,
};

describe("MyComponent", () => {
  it("should render a butiful component", async () => {
    const { getByText } = render(<MyComponent {...defaultProps} />);
    expect(getByText(/I am butiful/i)).toBeInTheDocument();
  });

  it("should render an ugly component", async () => {
    const { getByText } = render(
      <MyComponent {...defaultProps} butiful={false} />
    );
    expect(getByText(/I am butiful/i)).not.toBeInTheDocument();
  });
});

good3.js

import { render, screen } from "@testing-library/react";
import { MyComponent } from "./MyComponent";

const defaultProps = {
  size: "large",
  color: "salmon",
  butiful: true,
};

describe("MyComponent", () => {
  it("should render a butiful component", () => {
    render(<MyComponent {...defaultProps} />);
    expect(screen.getByText(/I am butiful/i)).toBeInTheDocument();
  });

  it("should render an ugly component", () => {
    render(
      <MyComponent {...defaultProps} butiful={false} />
    );
    expect(screen.queryByText(/I am butiful/i)).not.toBeInTheDocument();
  });
});