Forem: Vladislav Zimnikov

Modern JavaScript: Promise

Vladislav Zimnikov — Sat, 26 Mar 2022 10:24:45 +0000

Introduction
Promise
First Examples
Handling Promise
1. then()
2. catch()
3. finally()
4. Chaining
Advanced Usage
1. Server Request
2. Multiple Requests
3. First to settle
4. First to fulfill
Outro

Introduction

When it comes to JavaScript it executes code one line after another so next line of code will not start it's execution up until previous one have finished

But what if required operation takes too much time? Should we freeze whole application's execution waiting for result? Obviously, not

Most common and easily understandable example is request to some server. You never know how much time exactly there is needed to receive response. It may take few dozens of milliseconds or few seconds

And while waiting for response we still want our application to be responsive, usable and even let customer know about making server request like through showing some sort of loader animation

In addition, once application receives response it should process it somehow so we also need a way to tell the program how it should treat data it is going to receive in future and we are not able to know when exactly

Basically, we want to be able to tell our program such thing:

In background, without blocking whole execution process, make this request, wait for the response and once received perform given set of commands

But how can we achieve such kind of functionality if currently we are aware that JavaScript executes all of the code in strict sequence?

Promise

In short, Promise allows performing operations asynchronously

The concept of Promise is pretty straightforward:

Give it piece of code you want to execute asynchronously and specify in what case Promise should fulfil successfully and vice versa

To understand principle of Promise better before diving into examples few theory concepts have to be discussed

First of all, when we create Promise with code to process asynchronously, we should pass this code in form of callback.

Callback - function passed as an argument for another function that is going to be executed at some specific point of latter function execution

Callback that is being passed to promise is called executor

Executor - callback function, invoked by Promise with two arguments being passed: resolve and reject

resolve - callback function that should be called when operation inside of Promise finishes successfully. Usually, accepts one parameter - result of operation performed inside of executor

reject - callback function that should be called in case when error happens during executor's code processing

In terms of making server request we would call resolve with response as an argument right after receiving it to proceed with it's further processing

First Examples

When we need to create promise we have to use constructor of Promise class with keyword new. Basically, we create instance of class Promise

As it was mentioned earlier, to create promise we should pass executor

Simplest example of how to create new Promise:

new Promise((resolve, reject) => {})

Currently, our promise does nothing. To actually see, how promise executes code in async manner let me show you next example


    
new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('in promise');
    }, 1000)
})

console.log('after promise')

You can run this code right in browser or anywhere else to see what happens. First message to console we receive is 'after promise' and only after 1 second message 'in promise' is being printed out.

Function setTimeout allows to delay execution of code and I am going to use this feature to demonstrate more capabilities of promises.

Handling Promise

Basically, promise can be fulfilled or rejected. If code inside of an executor processed well, callback resolve is being invoked and promise starts fulfilling. In opposite case, callback reject is called and rejection happens.

Promise gives us, developers, possibility to control what has to be done in case of promise fulfilment and rejection.

Object of Promise provides two methods for such thing: then and catch. Both accept callback

then()

To understand better, let's firstly set up our playground. First of all, I will create promise and save it to constant. Inside of an executor I will utilize setTimeout to postpone invocation of resolve function up to 1 second. To resolve I will pass string 'Hello Promise'

const ourPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hello Promise'), 1000);
});

Now, let's use .then() for the first time. I know that promise will pass string to callback on fulfilling, so let's print received message

ourPromise
    .then((message) => console.log(message));


    
const ourPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hello Promise'), 1000);
});

ourPromise
    .then((message) => console.log(message));

console.log('after promise');

If you run code above you can see that message 'after promise' is being printed first, just like last time. Only difference is that message 'Hello Promise' is being printed in callback passed to .then() as an argument.

catch()

In case if executor's code fails, Promise should be rejected by reject invocation. To actually handle Promise's rejection, you should pass callback to .catch() method of Promise instance. Usually, error being passed as an argument.

Let's consider next code example:


    
const ourPromise = new Promise((resolve, reject) => {
    setTimeout(() => reject('Rejecting Promise'), 1000);
});

ourPromise
    .catch((message) => console.log(message));

console.log('after promise');

It's almost the same as previous one, but we call reject instead of resolve and replace .then() with .catch(). As a result we get the same output in console.

finally()

It's pretty common occasion when you need to perform code on Promise's settlement despite the outcome. To avoid duplication of logic in .then and .catch methods there is .finally.

Callback passed to method .finally is going to be executed in any case: either Promise resolved successfully or was rejected


    
const ourPromise = new Promise(
  (resolve, reject) => {
    if (Math.random() > 0.5) {
      reject('Rejecting');
    }
resolve('Resolving');

}
);

ourPromise
  .then(msg => console.log(msg))
  .catch(err => console.log(err))
  .finally(() => console.log('Final action'));

Important note

callback passed to finally does not accept any arguments

Chaining

Methods .then, .catch and .finally return promise itself, so they can be chained. That's what makes working with Promises neat and concise. Try to run below example multiple times and see how in different cases different callbacks are being invoked


    
const ourPromise = new Promise(
  (resolve, reject) => {
    if (Math.random() > 0.5) {
      reject('Rejecting');
    }
resolve('Resolving');

}
);

ourPromise
  .then(msg => console.log(msg))
  .catch(err => console.log(err))
  .finally(() => console.log('final action'));

Another important thing is that you are not limited to one .then invocation, for example. There can be occasions when you receive another promise while handling previous one and to process new promise we can just return it and use .then again. Let me just show you


    
const ourPromise = new Promise(
  (resolve, reject) => {
    if (Math.random() > 0.5) {
      reject('Rejecting');
    }
resolve('Resolving');

}
);

ourPromise
  .then(msg => msg + ' x2')
  .then(msg => console.log(msg))
  .catch(err => console.log(err))
  .finally(() => console.log('final action'));

As you can see from first callback I returned original message plus some extra characters. Value, returned from previous callback is being passed to next one.

Now let me show example with multiple Promises:


    
const ourPromise = new Promise(
  (resolve, reject) => {
    if (Math.random() > 0.5) {
      reject('Rejecting');
    }
resolve('Resolving');

}
);

ourPromise
  .then(
     msg => new Promise((resolve) => resolve('Another Promise'))
  )
  .then(msg => console.log(msg))
  .catch(err => console.log(err))
  .finally(() => console.log('final action'));

If you run code above and first promise is going to be resolved then you will see that message we passed to resolve function inside of our second Promise successfully got to callback we passed to our second .then. This way we can handle multiple consecutive Promises in beautiful and convenient way

Advanced Usage

Server Request

Modern JS libraries and APIs for making and handling requests to server are built around Promise. Client side Fetch API is built around Promise

Let me show you one example using quite well-known library axios


    
const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/users')
    .then(res => console.log(res.data));

console.log('Something after request');

As you can see, we were able to perform request and process it response without blocking execution process

Multiple Requests

Sometimes there is need to perform multiple requests simultaneously. Specifically for this reason one of the methods provided by Promise can be utilised.


    
const axios = require('axios');

const requests = [
    axios.get('https://jsonplaceholder.typicode.com/users'),
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    axios.get('https://jsonplaceholder.typicode.com/comments')
]

Promise.all(requests)
    .then(res => console.log(res))

Promise.all() accepts iterable object like array, for instance, with promises we need to wait for. Once all Promises are resolved or at least one is rejected, then result of method all which is Promise itself is resolved or rejected

First to settle

If you are waiting on multiple promises and you need to perform some action once one of them resolves or rejects there is method for that: Promise.race

There is an example:


    
const ourPromise = new Promise(
  (resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
      reject('Rejecting 1');
    }
resolve('Resolving 1');
}, Math.floor(Math.random() * 1000))

}
);

const ourPromise2 = new Promise(
  (resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
      reject('Rejecting 2');
    }
resolve('Resolving 2');
}, Math.floor(Math.random() * 1000))

}
);

Promise.race([ourPromise, ourPromise2])
    .then(res => console.log(res))
    .catch(res => console.log(res));

First to fulfill

If you want to perform action once first among many promises fulfils there is solution for you as well: Promise.any. Be aware that Promise.any exists in Node since version 15 so you might need to change the version of runner below


    
const ourPromise = new Promise(
  (resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
      reject('Rejecting 1');
    }
resolve('Resolving 1');
}, Math.floor(Math.random() * 1000))

}
);

const ourPromise2 = new Promise(
  (resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
      reject('Rejecting 2');
    }
resolve('Resolving 2');
}, Math.floor(Math.random() * 1000))

}
);

Promise.any([ourPromise, ourPromise2])
    .then(res => console.log(res))
    .catch(res => console.log(res));

Outro

That's it for today. Hope you enjoyed this little article.

Don't hesitate to leave a comment, I would appreciate it.

Have a nice day :)

Testing modern ReactJS Application: Unit Testing(Part 2)

Vladislav Zimnikov — Fri, 18 Mar 2022 22:24:58 +0000

As I promised in previous post in this part I would like to tell about unit testing of components, difference between testing functional and class components and how to test react hooks

Class vs. Function
Testing React Components
1. Experiment Subjects
2. Rendering Result
3. Asynchronous Rendering Result
Hook testing

Class vs. Function

As you may know ReactJS offers two ways of writing components: class-based and function-based. Latter approach offered more concise way of writing components and in the meantime enabled usage of React Hooks

In terms of testing there is significant difference between classes and functions. Functions, defined inside of function components cannot be mocked. If for some reason you want to have possibility to mock any of methods used in your component consider using class-based approach

In my opinion, this limitation is not limitation at all since React components represent some parts of User Interface and therefore should not be tested the same way we test backend code. You'll get what I mean a bit later

Testing React Components

Experiment Subjects

Before writing any tests we need few components to test. In the beginning of each section I will provide content of component I'm going to test. You are free to use any other component for experimenting

Rendering Result

Component to test:

import React from 'react';

export default function TestComponent({ children }) {
    return (
        <div>
            { children }
        </div>
    );
};

When it comes to testing rendering output we can't rely on snapshots since they meant for regression testing

Regression testing is a software testing practice that ensures an application still functions as expected after any code changes, updates, or improvements

When we need to ensure that component renders properly on given input(or without it) @testing-library/react steps in

Firstly, we will need to render component. For this to manage we need to import render function from @testing-library/react. Component will be rendered in artificial DOM. To easily find nodes in this DOM we will import screen object

import { render, screen } from '@testing-library/react';

Next we use this render function to render component the way we need. Simply pass JSX as argument

render(
            <TestComponent>
                <div>Node</div>
            </TestComponent>
        );

Now we can use queries provided by testing-library in screen object. As React components are about building User Interface that is presented to end user those queries provide methods to find nodes the way users see them. It becomes more clear when you see it in action

Now we expect to see node with text Node. Let's literally try to find such element. We can do it following way

screen.findByText('Node')

And to actually check that we found it, let's expect that resulted value is defined

expect(screen.getByText('Node')).toBeDefined();

If we run script test we should see successful output. In case you need to update snapshots don't forget to add -u flag

But currently our new test suite is not self-descriptive and informative. Library @testing-library/jest-dom provide many additional matchers for DOM nodes. Import it into test file

import '@testing-library/jest-dom';

And now replace matcher toBeDefined with the one called toBeInTheDocument

expect(screen.getByText('Node')).toBeInTheDocument();

Rerun script test and check if testing passes

Asynchronous Rendering Result

It's very common when component performs request to API and waits for response before rendering final result. Firstly, adjust TestComponent to mock server request and append conditional rendering

import React, { useEffect, useState } from 'react';

export default function TestComponent({ children }) {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => setTimeout(() => setIsLoading(false), 100), []);

    if (isLoading) {
        return (
            <div>Loading</div>
        );
    }

    return (
        <div>
            { children }
        </div>
    );
};

I'll use useState and useEffect hooks combined with setTimeout to postpone state change

Now since our component renders result not instantly, different query should be used. Queries provided by testing-library that allow to work with asynchronous rendering start with find prefix instead of get we used previously for synchronously rendered content

Important notice: find queries waits up to 1000ms

Make test suite's callback async, replace query with findByText and await on returned Promised. Looks like following

it('should render properly', async () => {
        render(
            <TestComponent>
                <div>Node</div>
            </TestComponent>
        );

        expect(await screen.findByText('Node'))
            .toBeInTheDocument();
    });

Script test result:

Now let's also make sure that Loading node is rendered initially. Simply use query getByText to look for node containing Loading text before last expect were we await until final result is rendered

expect(screen.getByText('Loading'))
            .toBeInTheDocument();

expect(await screen.findByText('Node'))
            .toBeInTheDocument();

Script test result:

More info on queries provided by testing-library

Hook testing

I'll write simple hook that mocks request to server the same way I did it previously using setTimeout to add artificial delay

export function useMockRequest(delay) {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => setTimeout(() => setIsLoading(false), delay), []);

    return [isLoading];
}

TestComponent file:

import React, { useEffect, useState } from 'react';

export function useMockRequest(delay) {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => setTimeout(() => setIsLoading(false), delay), []);

    return [isLoading];
}

export default function TestComponent({ children }) {
    const [isLoading] = useMockRequest(100);

    if (isLoading) {
        return (
            <div>Loading</div>
        );
    }

    return (
        <div>
            { children }
        </div>
    );
};

Firstly, let's add new describe block to our test file and give it a title useMockRequest. Create one test inside of new describe for further usage. I will name it should change state after given delay

In real world application you would create new file for new test block but currently I want to keep it simple

Now let's clarify what are React Hooks.

React Hooks are functions that enable control on your component's behavior. When it comes to testing it can be a bit misleading since you cannot really use capabilities of React hooks outside of a component. Or can we?

testing-library provides one more library exactly for such purpose allowing us to avoid headache and safe strength for actual testing. It is called @testing-library/react-hooks

Let's add it as development dependency

npm:

npm install -D @testing-library/react-hooks

yarn:

yarn add -D @testing-library/react-hooks

It provides a lot of tools for easy and comfortable hook testing but let's check them step-by-step

First thing that needs to be done is hook rendering. Our new library will do all hard work itself. See how it looks like below

import { renderHook } from '@testing-library/react-hooks';

...

const result = renderHook(() => useMockRequest(100));

To render hook we need renderHook. Pretty straightforward, isn't it?

Then you call it and pass callback as argument inside of which you invoke your hook with or without arguments

The result of invocation is an object that provides many fields and utility functions to proceed with rendered hook testing

First thing we need to get is the actual result of hook invocation since we have to verify that initial state is equal to true. Hook's return value can be accessed by result field of an object returned by renderHook function. I will utilise destructuring to keep code concise

const { result } = renderHook(() => useMockRequest(100));

Object result also contains multiple fields but we should be interested in current as it is containing exactly what we need

Since our hook returns array of two elements, current property will be exactly this array. To validate that state, returned by hook initially is false, just access first element of current property and add assertion on that

expect(result.current[0])
            .toBeTruthy();

First state is tested, next thing that should be checked is that state changes after some time and to achieve that we need to wait for hook to rerender. Exactly for this purpose renderHook returns function called waitForNextUpdate

To wait for next hook update we have to... await a Promise this function returns

await waitForNextUpdate();

Be aware that by default it waits up to 1000ms but it can be changed by passing additional argument

Once promise had been awaited, we can check absolutely the same value to be changed - the one inside of result.current[0]. Now we expect it to be false

expect(result.current[0])
            .toBeFalsy();

Full test case looks like that

const { result, waitForNextUpdate } = renderHook(() => useMockRequest(100));

expect(result.current[0])
    .toBeTruthy();

await waitForNextUpdate();

expect(result.current[0])
    .toBeFalsy();

Run script test to invoke all tests

This was only top of the mountain in regards of testing hooks. I'll dive deeply into this topic in separate post or series of posts

Here is the GitHub repo with all my code in one place if you need

In addition, feel free to leave a comment about what did you like and what did you not

In regards of this post this is it for today. See you next time!

Testing modern ReactJS Application: Unit Testing(Part 1)

Vladislav Zimnikov — Sun, 13 Mar 2022 12:59:37 +0000

More libraries
Experiment Subject
Experiment Environment
Snapshot Testing
1. Little bit of terminology
2. Getting Started
3. Running tests
Useful Links

More libraries

To append additional layer of abstraction and make our as developer life easier few extra libraries should be added to project:

Open root of project in your terminal and invoke following command

npm:

npm install -D react-test-renderer @testing-li
brary/react @testing-library/jest-dom @testing-library/user-event

yarn:

yarn add -D react-test-renderer @testing-li
brary/react @testing-library/jest-dom @testing-library/user-event

Experiment Subject

Before starting performing tests component is needed. To save time contents of mock component is provided below:

component.jsx

import React from 'react';

export default function TestComponent() {
    return (
        <div>
            Test Component
        </div>
    );
};

Experiment Environment

In the same folder create component.test.jsx. This file will contain all tests written in this post

import React from 'react';
import TestComponent from './component';

describe('TestComponent', () => {

});

Snapshot Testing

Little bit of terminology

Jest Documentation on Snapshot testing

The first time this test is run, Jest creates a snapshot file. On subsequent test runs, Jest will compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code that should be fixed, or the implementation has changed and the snapshot needs to be updated

Getting Started

Exactly for purpose of snapshot testing react-test-renderer was installed

1 - Import function create from react-test-renderer into component.test.jsx

import { create } from 'react-test-renderer';

2 - Create test suite

it('should match snapshot', () => {

    });

3 - Populate test suite

expect(
            create(<TestComponent />)
                .toJSON()
        )
            .toMatchSnapshot();

What happens in test suite we created:

Rendering component using function create and passing JSX component as argument
On result of calling create calling method toJSON to serialise output
Passing serialised value to expect function and calling matcher toMatchSnapshot

Jest will process snapshot itself, no additional input from developer is needed

Running tests

Now try to invoke script test

If you did everything correctly output should be nearly the same. In short, since snapshot didn't exist Jest saved it inside of __snapshots__ directory next to test file and passed test. Run test again to see difference

Jest used existing snapshot for comparison. Now make some changes in component, e.g. change text in it and run script test again

Since content that is being rendered has been changed snapshot test had failed. That is exactly the purpose of snapshot tests: track down changes/errors in render process/result

Now, if we know that received change is correct, we need to update snapshot accordingly. To do that just call script test with argument -u

npm:

npm run test -u

yarn:

yarn test -u

Here is the result

That is everything you need to know to start with snapshot testing and apply it ещ your components

Useful Links

Next time will share on how to perform more granular unit testing of components, difference between testing functional and class components and how to test react hooks

Testing modern ReactJS Application: Setting Up

Vladislav Zimnikov — Sun, 13 Mar 2022 09:05:22 +0000

Foreword
1. Do you have to read this
2. Create React App
3. TypeScript
Your way of ReactJS
How to bootstrap ReactJS App
Installing and configuring Jest
Holy Babel

Foreword

Do you have to read this

If you have already Jest installed and configured you can skip this part of series

Create React App

I am completely aware that create-react-app provides Jest configuration out of the box, but this fact breaks the whole point of this series. I want to demonstrate how to install everything from scratch.

TypeScript

Regarding TypeScript - I will cover all additional configuration needed, but firstly I want to focus on setting up essentials using JavaScript only

Your way of ReactJS

If for some reason you don't want to use Vite for app bootstrapping or you are already having ReactJS app you can skip this part of series as it does not matter really what bundling tool you are using.

In case you are going to scaffold application your way be aware you can face issues not covered in this tutorial series

How to bootstrap ReactJS App

Our initial goal is to bootstrap ReactJS application quickly without any need to perform manual configurations ourselves.

For this tutorial I am going to use starter based on such bundling tool as Vite. Basically, it will only matter only on this step since Jest(testing framework) invokes all tests in it's own environment and does not care what bundling tool you are using for development

Use following command to scaffold ReactJS application named react-testing-app:

npm:

npm create vite@latest react-testing-app -- --template react

yarn:

yarn create vite react-testing-app --template react

Once you are done with this step follow given instructions.

cd react-testing-app/
yarn(just yarn and it will start installation by default)/npm install

After all previous steps you can invoke script dev to start up dev server:

npm:

npm run dev

yarn:

yarn dev

And make sure that application starts properly and running on port 3000

If everything works properly you can stop dev server and proceed further with tutorial

Installing and configuring Jest

First thing we need is Jest. In short, Jest is testing framework. I won't go deep in details regarding Jest, this post is about bit different thing.

Firstly, let's add Jest as development dependency to our project and install it

npm:

npm install -D --save jest

yarn:

yarn add -D jest

Once command is completed you can open your package.json and make sure that Jest is now listed in your devDependencies:

...
"devDependencies": {
  ...
  "jest": "^27.5.1"
}
...

Now we can initialize Jest. Basically, it will create jest.config.js that we are going to use for Jest configuration

Run following command to start Jest initialization:

npm:

npx jest --init

yarn:

yarn jest --init

You will be prompted to answer few questions. Answers provided below

When you are done just create App.test.js inside of src directory with following contents

describe('jest', () => {
    it('should work', () => {
        expect(2).toBe(2);
    })
});

And then execute script test to verify that Jest runs test properly

npm:

npm run test

yarn:

yarn test

Result will be as follows

Holy Babel

Babel will be responsible for turning JSX and other modern language features to such state it can be understood by runtime environment Jest using under the hood since currently if you try to import file with JSX into test file you will get an error

Firstly, adding Babel itself and few additional packages as development dependencies to our project

npm:

npm install -D babel-jest @babel/core @babel/preset-env @babel/preset-react

yarn:

yarn add -D babel-jest @babel/core @babel/preset-env @babel/preset-react

Then create file named babel.jest.config.js. The reason behind such name is to avoid possible collision with default babel.config.js. For example NextJS automatically starts using babel compiler if it sees babel.config.js in root of project

Set following content of babel.jest.config.js:

module.exports = {
  presets: [
        ['@babel/preset-env', {targets: {node: 'current'}}],
        '@babel/preset-react'
    ],
};

In short such we are telling Babel to use following presets while transpiling our JavaScript code

Now we need explicitly tell Jest to use this babel configuration for transpiling JS code. To do that open jest.config.js, find transform key, uncomment and replace undefined with following:

"\\.(js|jsx)$": ["babel-jest", { "configFile": "./babel.jest.config.js" }]

As a result you should have:

...
transform: {
    "\\.(js|jsx)$": ["babel-jest", { "configFile": "./babel.jest.config.js" }]
  },
...

Now, to test whether Jest is configured properly for parsing modern JS and JSX, create file component.jsx, export some mock component from there, import into App.test.js and invoke test script. Here are contents of my component.jsx and App.test.js respectively:

import React from 'react';

export default function TestComponent() {
    return (
        <div>
            Test Component
        </div>
    );
};

import React from 'react';
import TestComponent from './component';

describe('jest', () => {
    it('should work', () => {
        expect(2).toBe(2);
    })
});

npm run test/yarn test result:

If you have similar successful output, congratulations, you have set up Jest and Babel properly for transpiling and understanding JSX. Now you are ready to start testing your application.

Next time I'm going to cover unit testing of components using react-test-renderer, @testing-library/react, @testing-library/jest-dom and @testing-library/user-event

Testing modern ReactJS Application: Introduction

Vladislav Zimnikov — Wed, 09 Mar 2022 09:48:15 +0000

Hello everyone! In this series I'm going to share with you my experience and knowledge in testing ReactJS-based applications using modern libraries such as jest, @testing-library/react, @testing-library/user-event and react-test-renderer using both JavaScript and TypeScript

Forem: Vladislav Zimnikov

Modern JavaScript: Promise

Table of contents

Introduction

Promise

First Examples

Handling Promise

then()

catch()

finally()

Chaining

Advanced Usage

Server Request

Multiple Requests

First to settle

First to fulfill

Outro

Testing modern ReactJS Application: Unit Testing(Part 2)

Table of contents

Class vs. Function

Testing React Components

Experiment Subjects

Rendering Result

Asynchronous Rendering Result

Hook testing

Testing modern ReactJS Application: Unit Testing(Part 1)

Table of contents

More libraries

Experiment Subject

Experiment Environment

Snapshot Testing

Little bit of terminology

Getting Started

Running tests

Useful Links

Testing modern ReactJS Application: Setting Up

Table of contents

Foreword

Do you have to read this

Create React App

TypeScript

Your way of ReactJS

How to bootstrap ReactJS App

Installing and configuring Jest

Holy Babel

Testing modern ReactJS Application: Introduction