Tutorials on Jest

Learn the practical techniques you need today to modify any large-scale codebase without the hassle of manual, one line at a time refactors.  We use real world tools such as Facebook's jscodeshift to apply these powerful concepts on actual codebases. The course goes beyond just theory to practical hands on coding , with a sample codebase we provide that you will modify as you apply the techniques you learn in the course. With  Practical Abstract Syntax Trees  you  unlock the ability to make sweeping changes in a safe and reliable way in any size codebase . We'll tackle: 

In the previous post , we created a unit test for a function. In this post, we're going to create a unit test for a component using @testing-library/react . Since we're using Create React App the React Testing Library is already installed in our dependencies. If you don't have it, install the package using: We will create a Greetings component with the greetings text inside and a button for sending friendly waves 😊

Tests make sure that changes in code don't break its functionality. For testing an app, we need a test runner. Create React App provides us a test runner called jest . Let's create a new app and inspect what it contains. The src directory contains all the app code and a file called App.test.tsx . This file contains a test that makes sure that the App component renders a link:

Building single-page React applications has never been easier. With a single command, Create React App (CRA) scaffolds an entire React application with development/build tools, such as Babel and Jest, automatically configured and integrated into the project. Getting started requires no additional configuration. Plus, it eliminates the need to maintain an entire build process, which can require lots of work and is very prone to error. However, the default template of Create React App does not include support for TypeScript, which has gained much traction in recent years. Below, I'm going to show you: To generate a new CRA project with TypeScript, provide the --template option to create-react-app and specify typescript as the template.

When writing tests for your application, it can be tedious and distracting to switch between the terminal and IDE to execute tests and verify that all tests are passing. What if there was a more streamlined approach that simply displayed the results of tests directly within the IDE, with each result (passing or failing) adjacent to its corresponding test? If you are writing tests using the Jest framework, and your IDE of choice is VSCode, then there is a plugin in the VSCode marketplace that automatically runs tests and shows individual test results inline. Getting this immediate feedback within the editor improves productivity and reduces context switching.

Jest is an open-source, JavaScript testing framework maintained by Facebook. With an exceptionally large assertion library and a simple, well-documented API , writing tests for JavaScript code with Jest is easy and requires no additional configuration. For TypeScript code (and JavaScript code that needs to be transcompiled with Babel), you will need to install a few extra NPM packages and provide a small Babel configuration. This process is not difficult and takes little time to complete. By setting up TypeScript and Jest in the early stages of your project, this upfront investment will pay exponential dividends in the latter stages of your project. Below, I'm going to show you:

Hooks in React are a new, popular, and extensible way to organize side-effects and statefulness in React components. By composing the base hooks provided by React, developers can build their own custom hooks for use by others. Redux, ApolloClient, and Callstack have distributed custom hooks to access your app's store, client, and themes using the useContext hook. You can also compose useEffect and useState to wrap API requests or wrap the concept of time. It's powerful. It's simple. These two statements are not a coincidence, either: the power is the simplicity.