Learn Jest, Purescript 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

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

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

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Deserializing and serializing JSON manually is a boring, error-prone way to be able to handle JSON. This example shows how you can use Generics in Purescript to automatically derive de/serializers so that once you've written your type definition, you only need a few lines of code to handle JSON.

Automatically de/serialize JSON with Purescript-Foreign-Generics

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use Sets with Ord Typeclass instances



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

PureScript has a REPL (a console you can type expressions into) called `pulp`. In this lesson, we will show how you can use `pulp` to test your modules and functions. We will use code as we would in a file, like `import`ing modules. We will also use REPL specific syntax like `:type` (or `:t` for short) to view type definitions and `:reset` to re-compile changes to our files.

Technologies talked about in this lesson:

[Pulp](https://github.com/bodil/pulp) by [@bodil](https://twitter.com/bodil)
[Psci](https://github.com/purescript/purescript/wiki/PSCi)
[Purescript](https://github.com/purescript/purescript)

Using PureScript's psci with pulp

Currying is a significant aspect of functional programming. It allows you to break down one function that takes many arguments into a series of functions that take part of the arguments; this will enable you to build and compose functions together easily.

In this lesson, we will look at what currying is doing under the hood in PureScript, as it is used extensively. 

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Use One Function Argument at a Time with Currying and Partial Application in PureScript

JavaScript does its error-checking at runtime, but PureScript has a compiler, which makes sure that your program has no errors before it converts it all into JavaScript.

PureScript's compiler uses a type system to catch errors so that you aren’t accidentally mismatching your types. We will learn the very basics of type declarations, how they work in a statically typed language like PureScript, and see simple examples of them in action. 

Join in by going to [PureScripts online editor](http://try.purescript.org/)


Specify Function Arguments using Types in PureScript

Pattern matching in functional programming languages is a way to break up expressions into individual cases. 

We are going to go through how to pattern match in PureScript with simple patterns, guards, array patterns and record patterns.

Join in by going to [the online PureScript editor](http://try.purescript.org/).


Break up Expressions into Cases in PureScript using Simple Pattern Matching 

Let's learn how to unit test your JavaScript with [Jest](http://facebook.github.io/jest), a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

Test JavaScript with Jest

Jest comes pre-packaged with the ability to track code coverage for the modules you're testing, but it takes a little extra work to make it track untested files as well. Let's look at what Jest can do for you, what you have to do yourself, and how to setup code coverage thresholds so you can work to improving the code coverage numbers for your projects.

Track project code coverage with Jest

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

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Topics

Instructors

Content Type

Free or Pro