Learn Jest, Netlify and Ruby

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Sell Products Using Stripe Checkout and Netlify Functions

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

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

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Up and Running with Gatsby

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

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. 

Test React Components with Enzyme and Jest

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

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

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. 

Rails Todo API Part 1

Jest is a painless JavaScript unit testing framework from Facebook. It is designed to be super easy to setup and is packed full of powerful features. In this lesson we see how easy it is to add to your TypeScript project. This will be followed by a quick example application.

Getting started with Jest using TypeScript

Create a search directive with AngularJS and Rails. You'll want to take a look at the related [Rails TODO API Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1) and [Rails TODO API Part 2](https://egghead.io/lessons/angularjs-rails-todo-api-part-2). This is **not** a Rails how-to, so some knowledge there is expected to get up and running.

Search Directive with Rails

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!
 




Jest Snapshot Testing with React Storybook

The reducer is at the center of how Redux manages state. In this lesson we’ll create a reducer function and see how Redux takes in state and actions and returns updated state. We’ll write and run unit tests using Jest to verify that our reducer function is working as expected.

Create a Redux-Style Reducer Function

In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a component called CounterConsumer that consumes the Render Prop component Counter. This integration test is great because it doesn't necessarily care that CounterConsumer uses Counter behind the scenes, just that it works when integrated.

Other resources:
[Testing ⚛️ components using render props](https://blog.kentcdodds.com/testing-%EF%B8%8F-components-using-render-props-5623ab1814c)


Integration test a React component that consumes a Render Prop 

In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component itself, as you can test each individual unit that makes up the component.

Unit test a React Render Prop component

In order to get up and going with Enzyme and Jest, some configurations are required. We will need to install some babel plugins, create a specific package json script, and depending on which version of Jest, add Jest configurations to our package.json. 

Install Enzyme and Configure Jest

Within some of React’s releases there are major breaking changes that require different setups for Enzyme. In this lesson we are going to walk through how to setup your testing environment with some of these releases. 

Test Against Different React Releases with Enzyme

In this lesson we will shallow render a component and pass through different config options. Shallow rendering is useful to test components as individual units. This helps ensure that tests aren’t indirectly asserting on behavior of child components. We’ll also use the debug method to show how we can easily view our component for debugging purposes. 

Search

Search Results