Learn Jest, Radium and Screen-reader

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


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

Develop Accessible Web Apps with React

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

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

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

screen-reader

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.  

Radium: Updating Button Styles via Props

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like `:hover` and `:active`. By using Radium to listen to mouse events we can restore `:hover` and `:active` selectors to inline styles.

Styling a React button component with Radium

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

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. 

Shallow Render a React Component with Enzyme

Once we have a shallowed rendered component, we can now test that the expected nodes rendered are correct. We will use Jest’s built in assertions as well as some Enzyme shallow render methods in our tests. The render methods include .find, .exists, .children, .hasClass, and .text. 

Find Nodes from a Shallow Rendered Component

Many of the methods used in Enzyme’s API accept a selector as an argument. In this lesson we will go over the valid CSS, prop, object property, component displayName, and component constructor selectors that can be used as method arguments.

Understand the Different Accepted Selectors in Enzyme

In this lesson we will utilize Jest's snapshot testing to make sure our component's rendered output stays consistent. Unit testing the component elements can take us far, however sometimes it is helpful to test the entire component interface. 

Test Enzyme Rendered Components with Jest Snapshots

With our component rendered and our assertions testing our nodes, lets test our component’s props. We will use the shallow render methods .props and .prop to test that our component’s props are being passed through correctly. Next we’ll use .setProps to set new props within our components and test that our component handles them correctly. 

Test React Component Props with Enzyme and Jest

Full DOM rendering is ideal for use cases where you have components that interact with DOM APIs, or require React lifecycles. In this lesson we will render components with the mount method from Enzyme. We’ll pass through customized options to render our component differently. 

Search

Search Results