Learn Jest, Loopback and Mocha

In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's [a separate course for that here](https://egghead.io/courses/modern-javascript-tooling-with-react?af=5mx0ie)

jest

Build a React App with the Hooks API

In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended. 

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Test React Components with Enzyme and Jest

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

End to End Testing with Google's Puppeteer and Jest

In this course the developer will learn how to create a LoopBack API and build it out to an API that can be used as a backend for apps. We will start by creating a basic LoopBack API project and gradually enhance it to a production ready API. The API we create defines a few models to persist the data and has custom functionality, validation and hooks added to those models. 

After our data structure is defined we will learn how to extend the functionality of LoopBack by using mixins and components. We will also lock our API down using ACL’s and create a mechanism to automatically define the admin and user roles and create our admin user.   

The last part of the course will show how how to filter the data stored in the API. We will make the API production-ready by adding unit tests, connecting it to MongoDB and we will show how to deploy the app to now.sh.   

LoopBack is a highly-extensible, open-source Node.js framework.

loopback

Build a Node.js REST API with LoopBack

Here are all the Egghead.io lessons about testing with Jest! http://facebook.github.io/jest (https://kcd.im/egghead-jest)

Testing JavaScript with Jest

Best practices for building & testing redux applications have changed dramatically over time. This course aims to be a comprehensive and up-to-date resource for those seeking to confidently test their redux apps. Whether you're just getting started or want to improve on your existing testing strategy, there will be something in this course for you.

This first few lessons of this course look at how to add jest to an existing react/redux application that was built on top of [vite](https://vitejs.dev/). We cover basic functionality like using `npm test` vs `npx jest` and generating and using [code coverage](https://jestjs.io/docs/cli#--coverageboolean) to inform our testing strategy.

The next 10 or so lessons cover the specifics of unit testing the redux code in our application. We'll go over how to test reducers, selectors and thunks. As part of this we'll touch on mocking APIs and using [Redux Mock Store](https://github.com/reduxjs/redux-mock-store) as well as running actions through our applications' actual reducers to broaden our test coverage.

In the final part of this course we'll look at how we can test our redux connected react components using the various utilities that come with the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). We'll cover simulating various kinds of user input with the [User Event Module](https://testing-library.com/docs/ecosystem-user-event), populating our redux store with test data, using [jest spies](https://jestjs.io/docs/jest-object#jestspyonobject-methodname), how to wait for asynchronous tasks to complete, and several approaches for finding & asserting that visual elements exist on the page.

This course is built on top of content that was created for the [Modern Redux with RTK and TypeScript](https://app.egghead.io/playlists/modern-redux-with-redux-toolkit-rtk-and-typescript-64f243c8) course and I highly recommend you start there if you haven't completed it already. It does expect a *basic* familiarity with react, redux and jest. TypeScript is used in these lessons, but is not a major focus and hopefully won't distract you too much if you prefer plain JavaScript. 

No matter your experience level with redux and testing react applications, I'm confident your abilities will level up as you watch this course and follow along with the examples.

Thank you!

Confidently Testing Redux Applications with Jest & TypeScript

A relation in LoopBack is a way to associate the data from multiple models with each other. LoopBack supports various types of relations each with a different use case.

In this lesson we will create a second model called Category and create a relation between the Category and the Product models. To do this we will first add a property to the Product model called `categoryId`. This will allow us to store for each Product the category it belongs to. We then move on to create the actual relationships. 

Our first relationship defines that a `Category hasMany Products` and the second one that a `Product belongsTo a Category`.

After defining these relations we will use the API Explorer to see how we can interact with this related data.

Create a relation between two LoopBack models

In this lesson we will look at the filters that can be used to retrieve and manipulate the data stored in LoopBack. 

We will use [Postman](https://www.getpostman.com/) to interact with the `/Categories` and `/Products` endpoints. 

Using the URL parameters we will apply at the various filters LoopBack has to offer: `include`, `order`, `where`, `fields`, `limit` and `offset`. 

Filter model data in LoopBack

In this lesson we look at extending the functionality of LoopBack models by defining a remote method. 

A remote method is a method on a model exposed over a custom REST endpoint. 

Using the `lb remote-method` command we will create the remote method meta-data in `product.json`. We will verify that this got created and that we see the new REST endpoint got added. Then we will create the actual method in `product.js` and enhance it so that the API will return an error if we want to buy a negative amount of products.

Define a remote method on a LoopBack model

In this lesson we will create a dynamic datasource in LoopBack. If the API is started with the environment variable `MONGODB_URL` it will use this url and the `loopback-connector-mongodb` package to store the data in MongoDB.

In the course we will use a local MongoDB instance. If you don't have MongoDB running locally you can always create a [free MongoDB Atlas database](https://egghead.io/lessons/create-a-free-database-on-mongodb-atlas).


Create a MongoDB DataSource in LoopBack

In this lesson you will learn how to persist the data from the memory connector. As the name suggests, the memory connector stores the data in memory. This means that if you restart the server, the data is gone. In development mode it can be useful to store this data in a file, so it gets persisted between server restarts, and it can be easily inspected.

Persist in-memory data to a file when developing Node.js LoopBack API's

In this lesson we will learn to create a development mode for our server. We do this by installing nodemon as a dev dependency and creating a script tag called 'dev'. 

This script tag will execute the command `nodemon server/server.js --watch common --watch server`.  

We can execute this command by running `npm run dev`. 

When running in development mode the server will be automatically restarted when there are changes detected in the `common` and `server` directories.

Setup a development mode in LoopBack API using nodemon

In this lesson we will learn how to protect our API using ACL’s. 

ACL stands for Access Control List and it's function is to control permissions of resources in the API. It does this by keeping a mapping between an API resource and a principal. An API resource as an API endpoint like a remote method or a whole model. A principal in LoopBack are users or applications that can be grouped in a role.

In order to get the API production ready we will protect a selection of our REST endpoints with ACL’s. We will look at how we can obtain an access token and how we can use that in our requests.

Finally we will write some unit tests to make sure that the ACL does what we expect. We enhance our test setup by exporting `request` with is provided by the [supertest](https://www.npmjs.com/package/supertest) library.

In our tests we use `request` to verify that our endpoints return the correct HTTP status code.  

Configure ACL’s to protect the LoopBack API

In this lesson we will look at how to deploy our LoopBack API project using [now](https://zeit.co/now). 

We will install the now client, create an account and deploy our app.

Using `now secrets` features we will store our database connection url which we get by creating a [free MongoDB Atlas database](https://egghead.io/lessons/create-a-free-database-on-mongodb-atlas).

In order to simplify following deployments we will add a `now` key to our `package.json` where we use the `name`, `alias` and `env` parameters to configure our deployments. We will add some npm scripts so we can deploy our app in the desired way using `npm run now`.

Deploy a LoopBack API project using now.sh

In this lesson we will create a free account on monogdb.com. After the account has been created we will create a group in MongoDB Atlas and in that group we create a free cluster. In order to create the cluster we need to provide a username and password. We create our user called `admin` and have the site generate our password for use. Once the cluster is created we look at where we can find the connection string.

Create a free database on MongoDB Atlas

LoopBack is a framework built on top of Express for creating APIs. It allows you to create end-to-end REST APIs that can access data from many data sources such as MondoDB, PostgreSQL, MySQL or other REST APIs.

In this lesson you will learn how to install loopback-cli and create a new LoopBack API project. After creating the basic LoopBack project through the CLI, running the server will give us access to the project and API Explorer urls. The user model will be available to us because user authentication was enabled.

Initialize a LoopBack Node.js Project through the CLI

In this lesson we will learn how to add tests to the project to make sure our API behaves as we expect. 

After installing `mocha` and `chai` as devDependencies we will add `test` and `test:watch` scripts to our `package.json`. We will create a different datasource what we will use when running the tests by copying `datasources.json` to `datasources.test.json` and prefixing our `test` command with `NODE_ENV=test`. 

We will verify that our tests run against an empty datasource. We’ll also add various tests to verify that our remote method and validation on the Product model behave as expected.

Add unit tests to a LoopBack API project

We can add validation rules to our models to make sure the data we store in our API is how we want it.

In this lesson we will add validation rules to the Product model.

We will make sure the product name has a minimal length using the `validatesLengthOf` rule and that it is unique using the `validatesUniquenessOf` rule. 

For the price property we will add a custom validation to make sure that the value entered is not a negative integer. Additionally we will show how to do an async validation using `validateAsync` . This can for instance be useful if you want the validation to depend on a value in the database or a remote system.

Add validation rules to a model in LoopBack API 

In this lesson we will learn how to add operation hooks to our models. In the Product model we will create a `before safe` observer that will check if the category we want to add the product to exists. 

In our Category model we will create a `before delete` observer to prevent categories from being deleted when they have products.

We will create a unit test to verify that both of these operation hooks work as expected.

Add Operation Hooks to a LoopBack model

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

In this lesson you will learn what a LoopBack model is, you will create a Product model using the LoopbBack CLI. The product model will be based off the built-in PersistedModel which gives it basic functionality like Create, Ready, Update, Delete and some more.  Using the API Explorer you can interact with the new model, store, retrieve, edit and delete the product data.

Topics

Instructors

Content Type

Free or Pro