Theo's Typesafe Cult•2y ago

Strategy to test components in React

Hey, I am new into testing and I haven't test anything much before. I am still getting stuck about theory what should I test and what shouldn't. For example here. I have component Heading that takes prop level which is number between 1 and 6. Is this test useless? And if so, what test would you write for this specific component?

const levels = [1, 2, 3, 4, 5, 6] as const;

it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
  render(<Heading level={level}>Heading {level}</Heading>);

  expect(screen.getByRole('heading', { level })).toBeInTheDocument();
});

const levels = [1, 2, 3, 4, 5, 6] as const;

it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
  render(<Heading level={level}>Heading {level}</Heading>);

  expect(screen.getByRole('heading', { level })).toBeInTheDocument();
});

6 Replies

venus•2y ago

Theo whole test file looks like so:

describe('Heading', () => {
  const levels = [1, 2, 3, 4, 5, 6] as const;

  it('should match the snapshot', () => {
    const { asFragment } = render(<Heading level="1">Heading 1</Heading>);

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render the heading', () => {
    render(<Heading level="3">Heading 3</Heading>);

    expect(screen.getByText('Heading 3')).toBeInTheDocument();
  });

  it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
    render(<Heading level={level}>Heading {level}</Heading>);

    expect(screen.getByRole('heading', { level })).toBeInTheDocument();
  });
});

describe('Heading', () => {
  const levels = [1, 2, 3, 4, 5, 6] as const;

  it('should match the snapshot', () => {
    const { asFragment } = render(<Heading level="1">Heading 1</Heading>);

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render the heading', () => {
    render(<Heading level="3">Heading 3</Heading>);

    expect(screen.getByText('Heading 3')).toBeInTheDocument();
  });

  it.each(levels)('should rener heading level %s', (level: HeadingLevel) => {
    render(<Heading level={level}>Heading {level}</Heading>);

    expect(screen.getByRole('heading', { level })).toBeInTheDocument();
  });
});

Vincent Udén•2y ago

I personally dont feel like this test would be giving you much. When I do use tests (which is rarely) it is to bring me confidence in complicated code which I might break now or in the future. If you feel like this test aids in that goal, then the test isn't useless. If you feel like it doesn't bring you any added error-checking above what you'd just see rendering the website and looking at it with your own eyes, then it might be "useless"

venus•2y ago

Thanks for you opinion! This is good thought and for my purpose I think it does the thing. I guess tests are very opinionative (at least what should be tested), because it relies on many factors.

Kasper•2y ago

https://kentcdodds.com/blog/write-tests

Write tests. Not too many. Mostly integration.

Guillermo Rauch tweeted this a while back. Let's take a dive into what it means.

Kasper•2y ago

This is a great read and still holds up today. I practice this mentality and find myself very confident and safe making rapid and aggressive changes in my codebases and across teams. For a lot of my projects I find myself prioritizing acceptance tests ensuring the app delivers what’s expected of the product, with a few unit tests sprinkled in where I deem it necessary.

Vincent Udén•2y ago

This was a great read! I agree 100% with focusing efforts on integration and even e2e tests

Gaming

Programming

Strategy to test components in React