🚀 Running Your Project

Time to try to run your web application! Please run the following command in the console:

pnpm dev

In Visual Studio console you can hit CTRL+` on windows or CMD+` on mac to open a new terminal directly in the editor. The ` is “tilde” the weird backwards apostrophe, usually located in the top left of your keyboard, under the escape symbol.

Once you run the command, the new web server will start on the port 3000 and you should see the following message in the console:

> initial-t3@0.1.0 dev /workspaces/introduction-to-react-fullstackblazon
> next dev

  ▲ Next.js 14.2.2
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.1s
 ○ Compiling / ...
 ✓ Compiled / in 5.4s (477 modules)
 GET / 200 in 5623ms

Local

If you are running a local copy of your project, open your browser and visit the following URL http://localhost:3000

Codespaces

If you are using Github Codespaces, you should see a message popping up at the bottom of the screen asking you to open the web page in a new tab. If you missed out on this message, open the command menu by hitting CTRL+SHIFT+P or CMD+SHIFT+P and start searching for “Open Port In Browser” and select it. It will allow you to open port 3000 in a separate tab.

All of this only to see a blank page 😢. Boo hoo! 

🧪 Testing your Project

Each assignment comes accompanied by one or more automated tests that assure that you are delivering what was required.  The tests check on the things you are rendering on the page, check interactions and make sure that the page does not break when unexpected interactions occur. To complete the assignment you have to make sure that all automated tests pass. To run your tests please run the following command in the terminal:

pnpm test

You can open multiple terminals in Codepaces or VS Code. You can also stop your running application by hitting CTRL+C and typing new commands in the same terminal

Once the test command completes, you should see that there are two failing tests. Scroll up in the terminal to see the error messages. In our case, these are the two errors:

• TestingLibraryElementError: Unable to find an element with the text: Get Things Done. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
• Unable to find an element with the text: Task 1. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

The good way to see what the test expects is to open the test file. Their content and structure is self explanatory and follows the Test Driven practices. Please see the file of the src/app/page.test.tsx test case and think whether you understand what is expected:

Please note that the test command continues running and executes every time you save your files.

import { render, screen } from "@testing-library/react";
import { Suspense } from "react";
import { describe, it } from "vitest";
import Page from "./page";

describe("Page Test", function () {
  it("Show the welcome header", async function () {
    render(
      <Suspense>
        <Page />
      </Suspense>
    );
    expect(await screen.findByText("Get Things Done")).toBeInTheDocument();
  });

  it("Show the list of tasks", async function () {
    render(
      <Suspense>
        <Page />
      </Suspense>
    );
    expect(await screen.findByText("Task 1")).toBeInTheDocument();
    expect(screen.getByText("Task 2")).toBeInTheDocument();
    expect(screen.getByText("Task 3")).toBeInTheDocument();
  });
});

Time to remove test errors by completing the assignment in the next section!