From the course: Testing in React with Vitest

Unlock the full course today

Join today to access over 24,000 courses taught by industry experts.

Snapshot testing: Part 2

Snapshot testing: Part 2

- [Instructor] Now, from the above code structure, we can see we have an asynchronous function that fetches data from our mock database, and we are able to simulate a network call to the database for this test. This is a good use case for testing and is a frequent function in almost all web applications. Let's go ahead and create a test file in our test folder called Fruits.test.tsx. So in our test folder, let's do Fruits.test.tsx. I have copied the code from chapter 2-3-N, and I'll paste it in the file. We begin by importing, describe, expect, and it from vitest. Then we import our fruits component from our fruit component. Then we describe our Fruit Snapshot Test, and it should be loading fruit data. But it can be whatever you want, loading fruit data. Describe the keyword used here is used to organize tests into logical functions. It's not uncommon to have different components tested in one file. We can also use it to classify our tests based on functionality. Expect, another…

Contents