Learn Jest, Nuxt and React-storybook

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

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create a News App with Vue.js and Nuxt

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

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

Kent walks us through the internals of dom-testing-library and react-testing-library. 

There is a lot of set-up and tear down when testing UI components. These two libraries take away a lot of the work required to test React components well. 

Jest is commonly used in tandem with react-testing-library to assert results of your components. Jest simulates most browser apis with jsdom. react-testing-library helps you get values out of your components the same way your end users will. 

Links from the show:
- [Testing Library](https://testing-library.com)
- [Testing Javascript](https://testingjavascript.com)
- [Unit vs Integration vs E2E](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests)
- [Why you shouldn't ReactDOM.render to the body](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375)
- [Effective Snapshot Testing]( https://kentcdodds.com/blog/effective-snapshot-testing/)
- [Dev Tips with Kent](https://youtu.be/ttmvAm6esSc)
- https://kcd.im/news

Understanding how react-testing-library works with Kent C. Dodds

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

To be useful and trustworthy, your CLIs should be extraordinarily reliable. Investing in testing early will reap rewards in future. We show how to set up basic tests with Jest and Oclif's test helpers.

Test Node.js CLIs with Jest and Oclif

Components do more than just render an initial view based on props. Components may also maintain their own internal state and update that state in response to events. Those state changes, will then lead to updates to the rendered output. In this lesson, we'll cover how to test a component and verify that it behaves as expected when we simulate a click event.

Test Component Interactions with Jest and Testing Library

As the core unit of functionality in a React application, our components should be tested. Using Jest and Testing Library, we can render our individual components right in a test context and make assertions about their rendered output and behavior. Tests are a great way to work through API decisions, provide living documentation for your code, and to allow for confidence when refactoring. In this lesson, we'll create an initial test to verify the initial rendered output for a component, given specific props.

Test Component Rendering with Jest and Testing Library

Our unit tests should never rely on code that is outside our control and they certainly shouldn't be calling across the network to a server. A good test needs to be repeatable and fast and relying on outside systems and/or data doesn't help us meet those goals. In this lesson, we'll use mocks to create an environment where we control the response for service calls. This will allow us to be confident in our assertions and ensure our tests aren't flaky.

Mock Modules in a React Component Test

Any time your test interacts with a React component in a way that results in a state update, you need to make sure you wrap that interaction in an `act` function call, otherwise you'll get the "not wrapped in act(...)" warning.

In this lesson you'll learn how you can use `act` with `@testing-library/react-hooks` to avoid potential bugs in your custom React hooks.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning when testing Custom Hooks

The dreaded `act(...)` warning is really annoying, but actually really important. I've yet to see it be wrong (even when I thought it must be!). Every time it's pointing out something that is important that I'm missing in my test. In this lesson we'll identify a missing piece to our test and use act to make sure we avoid that in the future.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning

There aren't many places you need to manually use `act` if you're using [React Testing Library's async utilities](https://testing-library.com/docs/dom-testing-library/api-async), but if you're using fake timers, you need to manually use `act` to avoid missing bugs in your code.

In this lesson you'll learn how to identify the cause of `act` warnings and how to resolve them.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning with Jest fake timers

Use cases for `useImperativeHandle` are few and far between, but if you're testing a component that uses this React hook, you need to wrap any function you expose which results in state updates when called in React's `act` utility. Otherwise you could be missing important things in your tests that could result in bugs shipped to production.

In this lesson we'll learn how to identify what needs to be wrapped in `act(...)` and how to wrap those interactions.

This is based on my blog post: [Fix the "not wrapped in act(...)" warning](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning)

Fix the "not wrapped in act(...)" warning when testing the useImperativeHandle Hook

If you're not careful you can write a test that's worse than having not tests at all. In this lesson we'll learn why that is and how you can avoid it by making sure your test can fail.

This is based on my blog post: [Make Your Test Fail](https://kentcdodds.com/blog/make-your-test-fail)

Make Your Test Fail

[Storybook](https://storybook.js.org/) is a framework that allows you to develop components in isolation. It is ideal for a variety of use cases, most commonly when you're building some shared component toolkit. As such, Nx comes with a dedicated package `@nrwl/storybook` that adds a series of useful code generators to add storybook to an existing React library, but also to automatically generate stories and more.

Use Storybook to Develop React Components in Nx

[Nx](https://nx.dev) combines a lot of the best tools on the market, integrates them, and provides tooling to provide the best possible developer experience. One such pair is [Cypress](https://www.cypress.io/) and [Storybook](https://storybook.js.org/). Storybook allows developing components in isolation, which is also a great basis for testing components, which is where Cypress shines.
In this lesson, we're exploring some of the `@nrwl/storybook` code generation utilities that allow you to not only configure Storybook for a React application but automatically also set up a Cypress test configuration for it along with some spec files generated from the Storybook stories.

Use Cypress and Storybook to test your React Components in Isolation

One of the strengths of [Nx](https://nx.dev) is that it provides you easy access to some of the best tooling available. As such, whenever you generate a new app or lib inside an Nx workspace, it automatically preconfigures Jest for you and even sets up some pre-generated tests.

Run Jest tests for a React app with Nx

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Topics

Instructors

Content Type