The ‘arrange, act, assert’ mantra is a pattern for structuring your unit tests (as well as integration tests and e2e tests).

The contents of a test should be partitioned into 3 parts in the following order:

  1. Arrange – the setup code that’s required before you can test what you want to test.
  2. Act – the code that executes what the test intends to do.
  3. Assert – the code that makes assertions about what the aftermath should be.

Some simple, concrete examples of this pattern:

  1. Unit testing a C++ function (using GoogleTest). This tests a SymbolTable class that’s meant to be used as a supporting data structure for a compiler project.
    TEST(SymbolTableTestSuite, InsertAndRetrieveTest) {
        // Arrange.
        SymbolTable symbol_table;
     
    	// Act.
        symbol_table.define("myVar", "int", "var");
     
    	// Assert.
        EXPECT_EQ(symbol_table.data_type("myVar"), "int");
        EXPECT_EQ(symbol_table.declaration_type("myVar"), DeclarationType::VAR);
        EXPECT_EQ(symbol_table.segment_index("myVar"), 0);
    }
  2. Unit testing a frontend React component (using Jest). This tests the breadcrumbs component on the portfolio website, timz.dev.
    describe("Breadcrumbs", () => {
        test("All crumbs are rendered", () => {
    		// Arrange.
            render(
                <Breadcrumbs
                    crumbs={[
                        { title: "Home", url: "/" },
                        { title: "Projects", url: "/projects" },
                        {
                            title: "My Sentient Robot",
                            url: "/projects/my-sentient-robot",
                        },
                    ]}
                />,
            );
     
    		// Act.
            const home = screen.getByText(/Home/i);
            const projects = screen.getByText(/Projects/i);
            const sentientRobot = screen.getByText(/My Sentient Robot/i);
     
    		// Assert.
            expect(home).toBeInTheDocument();
            expect(projects).toBeInTheDocument();
            expect(sentientRobot).toBeInTheDocument();
        });
    });
  3. E2E testing a web app (using Cypress). This tests that the portfolio website, timz.dev, is able to load the about page via a link on the homepage.
    describe("Portfolio page tests", () => {
        it("should render the about page after the 'about' link is clicked", () => {
            // Arrange.
            cy.visit("http://localhost:3000");
            cy.wait(1000);
     
            // Act.
            cy.contains("About").click(); // The homepage should show
            cy.wait(1000);
     
            // Assert.
            cy.url().should("include", "/about");
            cy.contains("Who am I?");
        });
    });