A generic template for structuring React unit tests. The template uses Jest, but it can be adapted to work with other testing libraries.

react-unit-test-structure.md

How to Structure React Unit Tests (with Jest)

Main Template

// A utility method for working with test props (can also be imported)
const createTestProps = (props) => {
  return {
    // common props
    id: 1,
    productTitle: `Lightsaber`,
    productDescription: "A sword made of light. The preferred weapon of Jedi",
    url: `/productUrl`,
    votes: 999,
    userAvatarUrl: `/avatarUrl`,
    productImageUrl: `/productImageUrl`,
    onVoteClick: jest.fn(),

    // override common props if necessary
    ...props
  };
}

// Describe Rendering
describe("Rendering", () => {
  test.skip("It should be something specific", () => {
    // Arrange - Setup your test
    // Act - Take some action
    // Assert - Determine if something is as expected
  });
});

// Describe Interactions
describe("Interactions", () => {
  test.skip("It should be something deterministic", () => {
    // Arrange - Setup your test
    // Act - Take some action
    // Assert - Determine if something specific is as expected
  });
});

// Describe Events
describe("Events", () => {
  test.skip("It should be something deterministic", () => {
    // Arrange - Setup your test
    // Act - Take some action
    // Assert - Determine if something specific is as expected
  });
});

// Describe Async Events
describe("Async Events", () => {
  test.skip("It should be something", () => {
    // Arrange - Setup your test
    // Act - Take some action
    // Assert - Determine if something specific is as expected
  });
});

// Network Request and Mocks
describe("Network Requests and Mocks", () => {
  test.skip("It should be something", () => {
    // Arrange - Setup your test
    // Act - Take some action
    // Assert - Determine if something specific is as expected
  });
});

Nested Describe Block Template

// For use when you have multiple sub conditions
describe("Root condition", () => {
  describe("Sub condition foo", () => {
    test.skip("It should be something deterministic", () => {
      // Arrange - Setup your test
      // Act - Take some action
      // Assert - Determine if something specific is as expected
    });
  });

  describe("Sub condition bar", () => {
    test.skip("It should be something deterministic", () => {
      // Arrange - Setup your test
      // Act - Take some action
      // Assert - Determine if something specific is as expected
    });
  });

  describe("Sub condition baz", () => {
    test.skip("It should be something deterministic", () => {
      // Arrange - Setup your test
      // Act - Take some action
      // Assert - Determine if something specific is as expected
    });
  });
});

Sources:
https://blog.sapegin.me/all/react-testing-3-jest-and-react-testing-library/
https://jefflau.dev/arrange-act-assert-how-to-test-react-components/
https://techblog.commercetools.com/testing-in-react-best-practices-tips-and-tricks-577bb98845cd