10. Testing Components | React Components

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React Components

By : Pitt

React Components

By: Pitt

Overview of this book

The reader will learn how to use React and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will establish throughout this book and the reader will discover the power of React components with many examples. After reading the book and following the example application, the reader has built a small to a mid-size application with React using a component based UI architecture. The book will take the reader through a journey to discover the benefits of component-based user interfaces over the classical MVC architecture. Throughout the book, the reader will develop a wide range of components and then bring them together to build a component-based UI. By the end of this book, readers would have learned several techniques to build powerful components and how the component-based development is beneficial over regular web development.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Thinking in Components

1. Thinking in Components

Why components?

Using modern JavaScript

Compiling modern JavaScript

Debugging in the browser

Managing common tasks

Testing in JSBin

Summary

2. Working with Properties and State

2. Working with Properties and State

Nesting components

Shared component actions

Component life cycle methods

Summary

3. Saving and Communicating Data

3. Saving and Communicating Data

Validating properties

Storing cookies

Using local storage

Using event emitters

Summary

4. Styling and Animating Components

4. Styling and Animating Components

Adding new pages

Adding styles to components

Changing and reverting

Animating new components

Working with CSS transitions

Organizing styles with Sass

Alternatives

Summary

5. Going Material!

5. Going Material!

Understanding material design

Surfaces

Keeping your head above water

Alternative resources

Summary

6. Changing Views

6. Changing Views

Location, location, location!

Using a router

Creating public pages

Summary

7. Rendering on the Server

7. Rendering on the Server

Rendering components to strings

Creating a simple server

Creating a server backend

Communicating through Ajax requests

Communicating through web sockets

Structuring server-side applications

Summary

8. React Design Patterns

8. React Design Patterns

Where we are

Flux

Redux

Summary

9. Thinking of Plugins

9. Thinking of Plugins

Dependency injection and service location

Extending with callbacks

Stores, reducers, and components

Summary

10. Testing Components

10. Testing Components

Eat your vegetables

Types of tests

Testing with assertions

Summary

Index

Index

Testing with assertions

Assertions are the spoken/written language constructs made in the code. They look and function similar to how I've been speaking about them. In fact, most tests are structured in the same way we've been describing tests:

Given some pre-conditions
When something happens
We see some post-conditions

The first two points happen as we create objects and components and call their various methods. Assertions happen in the third point. Node.js ships with a few basic assertion methods, which we can use to write our first tests:

import assert from "assert";

assert(
    rendered.match(/<h1 data-reactid=".*">Home<\/h1>/g)
);

There are quite a few assertion methods we can use:

assert(condition), assert.ok(condition)
assert.equal(actual, expected)
assert.notEqual(actual, expected)
assert.strictEqual(actual, expected)
assert.notStrictEqual(actual, expected)
assert.deepEqual(actual, expected)…
assert.notDeepStrictEqual(actual, expected)
assert.throws(function, type)

You can add an...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

React Components

Search

Your notes and bookmarks