Build a Dynamic Avatar Component with React & TypeScript Tutorial (14 exercises)

Transcript

First thing we're going to do is install our test dependencies. I'm going to paste this in. The next thing we're going to do is create a file called setupTests.ts. Inside of setupTests, we're going to paste this block. Here, what we're doing is we're importing the matchers from jest-dom. We're importing expect from vitest. We're basically extending it.

Next thing we're going to do is open vite.config.ts. At the very top, we're going to add a triple-slash to let TypeScript know, "Hey, we want you to reference these types." Now we're going to go into the config and add this test block.

You'll see the first thing we're doing is setting the environment to jsdom because we're working in a browser environment. The next is setupFiles, which, if you remember earlier, we set that up earlier. This will run before any tests.

Lastly, a little trick that I learned. Because we're not going to be using any CSS, we can tell vite or vitest, I guess, in this case, that, "Hey, you don't need to process any CSS files." We're going to set that to false. This should speed things up slightly.

Now we're going to open the package.json. We're going to go into our scripts. We're going to add a new script for test. We're going to set that to vitest. Now we're going to go into src and create a new file called App.test.tsx. I'm going to paste this block of code here. All we're doing is ensuring that App should render with the title visible.

Now, if we run yarn test, we'll see vitest runs. We'll see our test fails. If we take a look, we can see it's unable to find the element Hello Vite in React. Why is that? Let's go back to App.tsx and take a look. We see it there. If we come back in here, we see Vite + React. If you're paying attention, you'll see what we're looking for is Hello Vite + React with an exclamation point.

Inside of our dom, we'll see we don't have Hello + React. This runs in watch mode by default. You see it's listening, watching for file changes. Let's delete Hello. We'll save. Runs again, very fast. Still failing. Let's delete the exclamation point.

Cool. Now you see it's passing. That's the approach we'll be taking, is this TDD approach, with this course. Nice work. Now our testing is set up and ready to go.

Lesson

Set up Testing with Vitest and testing-library

Scaffold the testing infrastructure using Vitest + @testing-library so that we can write tests for our functions and components.

The first thing we’ll do is install test dependencies. Run

yarn add -D vitest @testing-library/react @testing-library/jest-dom jsdom

Next, add a file to the root called setupTests.ts and add:

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

Then open vite.config.ts and make the following changes:

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: "./setupTests.ts",
    // speed up since tests don't rely on css
    // https://github.com/vitest-dev/vitest/blob/main/examples/react-testing-lib/vite.config.ts#L14-L16
		css: false,
  },
});;

Now edit your package.json and add the test script:

"scripts": {
    // ...
    "test": "vitest",
  },

Add this a new file under src called App.test.tsx with the following code:

import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";

import App from "./App";

describe("App", () => {
  it("should render with the title visible", () => {
    render(<App />);
    expect(screen.getByText(/Hello Vite \+ React!/i)).toBeInTheDocument();
  });
});

In the terminal, run yarn test and your test should pass.

Great! Our testing infrastructure is good to go.

Resources

The following resources provide more information for this lesson:

Transcript

Cool. Now you see it's passing. That's the approach we'll be taking, is this TDD approach, with this course. Nice work. Now our testing is set up and ready to go.