react.tar.gz

Run Tests

Run Tests - No Reset

Jest is a framework for testing applications developed in JavaScript. It has a well-documented and well-maintained range of tools to run tests in parallel. It is simple and works with projects using Babel, TypeScript, Node, React, Angular, Vue, etc. It works well for both client and server testing. 

This course covers Jest in-depth and is agnostic of any specific JavaScript framework. The course begins with the fundamentals of Jest testing, deconstructing the components of a test and covering how to compose basic unit tests and snapshot tests with Jest correctly. Next, it shows the testing of asynchronous code and the code that relies on external dependencies. Lastly, this course illustrates how Jest testing can effectively integrate into the real-world software development cycle through CI/CD pipeline.

It gives you hands-on experience in setting up Jest, types of testing, testing coverage, mocking, and native tooling depth.

…. To come 

… to come 

Mastering Jest: A Complete Guide to Testing

**(Fill in the blank.)** Snapshot tests should be used for ________.


(Fill in the blank.) Snapshot tests should be used for ________.

A verified, saved response body from an API call 

The element tree in the code that makes up our user interface


A screenshot of the browser when the client is rendered

The previous version of a test suite, prior to current changes being made

**(True or False)** An additional package is required in order to capture the actual snapshot.


(True or False) An additional package is required in order to capture the actual snapshot.

A verification step was added prior to making an API call.

Our application switched from using native JavaScript dates to using the `date-fns` package.

A “< Go back” button was added to the top-left corner of the user interface.

A single, large function was broken up into multiple, smaller functions for readability purposes.

In which situation would it be appropriate to update the saved snapshot?


In which situation would it be appropriate to update the saved snapshot?

An API call was moved to the parent component, and the component now gets this data from the parent rather than making the request itself.

A `<div>` wrapper was added to help with child positioning.

The `className` was changed from `light` to `dark`.

The button label was changed from “Enter” to “Submit.”


In which situation would it _not_ be appropriate to update the saved snapshot?


In which situation would it not be appropriate to update the saved snapshot?

Jest provides a special function, `imageMatcher`, that is used to make assertions on our snapshots.

We navigate to the browser and visually assess whether or not the new snapshot looks like the old one.

All we need to do is to create the snapshot, and the job is done. We don't need to make any specific assertions upon it.

We create a JSON serialization of our rendered element tree, pass it to Jest's `expect` function, and call `toMatchSnapshot()`.

How do we actually test a snapshot once we have it?

How do we actually test a snapshot once we have it?

Quiz yourself on the fundamentals and best practices of writing snapshot tests with Jest.

Introduction

Setting Up Jest

Jest Matchers

Writing Unit Tests

Writing Snapshot Tests

Asynchronous Code

Mocking

Mocking External Libraries

Working with Jest Mocks

Setup & Teardown

Test Coverage & CI/CD Pipelines

Test Coverage in Jest

Conclusion

Bonus: Best Practices

Bonus: Resources for Continued Learning

Appendix

Quiz on Writing Snapshot Tests