Learn Jest, Nginx and Twit

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

In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker. 

Twitter API Client for node

Supports both the REST and Streaming API.

twit

Create your own twitter bots

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

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

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

We’ll get a real-time stream of tweets, and learn how to filter a stream by keyword, location, and user.

Use the Twitter Stream API with Twit.js

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers by creating and mounting a volume to an Nginx proxy, and then verify the output with curl. You'll also see how changes to files within volumes of one container propagate to other containers with the same volume mounted, and learn various commands to inspect Docker volumes.

Manage Data within Docker Volumes

In this lesson, our bot will tweet hello to the Twitter world! We'll do this by using Twit's POST method to post our status to the statuses/update endpoint.

Post Statuses with Twit.js

In this lesson, we’ll create multiple functions to request, download, and save photos and data from NASA's API, and then have our bot upload these photos to Twitter and post them along with their descriptions. We'll also learn how to tweet videos using a video from NASA’s space archives.

Tweet Media Files with Twit.js

We’ll learn how your bot can get its list of followers, follow people, and look up friendships. We'll use Twit's GET method to get our followers at the followers/list endpoint, to get the users we follow at the friends/ids and friends/list endpoints, and to look up our friendships with the friendships/lookup endpoint. We'll also use Twit's POST method to follow someone at the friendships/create endpoint, and to send messages by posting to the direct_messages/new endpoint. 

Topics

Instructors

Content Type