Learn Jest, Prisma and React-storybook

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.

prisma

Build a full-stack app with Prisma

This collection explores one of the most promising and coolest releases of early 2020 - prisma v2. First part of the prisma infrastructure to exit experimental mode - prisma client is an auto-generated and type-safe query builder for Node.js & TypeScript. We will explore and learn it  in this collection!

Get started with Prisma v2. Prisma Client

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

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

In this tutorial we will spin the docker container with official postgres image and access the database with `psql` to set up an easy playground for PostgreSQL relational database.


Run postgres database in docker container

In this lesson you write initial boilerplate for prisma (spoiler: it's not bigger than this summary) with typescript infrastructure.

Create new project with prisma

In this lesson you will learn how to connect your prisma to postgres db to be able to introspect it. We will also go trough the models and touch prisma naming convention.

Connect prisma to PostgreSQL database running in docker container

In this lesson you will learn how to generate type safe orm client with `prisma generate` and do first write operation using it.

Topics

Instructors

Content Type