Welcome

What Does A React Library Development Environment Look Like?

Introduction

Essential Files and Directories for Publishing a React Library

An Introduction to the 3 Types of Dependencies in React Libraries

Installing React and React-DOM as peerDependencies

A Beginner's Guide to Using Git to Push Code to GitHub

Initialize

Scroller schema

Implementing Scroller

How to Set Up Storybook to View and Test Code

Implement

Setting Up ESBuild to Simplify Code Maintainability

A Brief Guide to JavaScript Modules and What They Do

How to Use ESBuild to Export Multiple JavaScript Module Formats

How to Configure and Publish an NPM Package

Deploy

What it Takes to Make Your React Library More Maintainable

3 Ways to Add Typescript to a React Library

How to Install Jest and Run Your First Unit Test

How to Install and Run ESLint When Creating React Libraries

How to Prevent Bad Git Commits with Lint-staged

Maintain

Course Wrap Up - Creating React Libraries from Scratch

Summary

esbuild

react

In this course, we'll cover what it takes to write, maintain, and publish a React library from scratch. 
In the 2020 State of JS survey, an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development. Because React is so popular, building libraries in it can open you up to a wide range of users, contributors, and possibilities!

## Why this course

Building a library is so much more than just the code. 
We need to know the ins and outs of versioning, deploying, building, documenting, dependency management, module types, tooling, and more. 
This is a daunting task for just one tutorial to cover. Creating React Libraries from Scratch will teach you everything you need to know to succeed in creating a library.

Don't worry if you're not a React wizard. This course is designed for beginner/intermediate developers who have never deployed a library before and have minimal React experience. However, you should be familiar with JavaScript.

## Course Topics
 
Throughout Creating React Libraries from Scratch we'll develop a React Hook called Scroller that will provide a utility for scrolling around web pages—taking advantage of window.scrollTo. 
We'll start in module 1 with an empty directory; adding documentation files, installing dependencies, and setting up GitHub. Right away, you'll have a project that could be deployable as a fully functional library!
In module 2 we'll implement scroller while taking advantage of Storybook to visually test our code. By module 3 Scroller will be deployed to npm in multiple JavaScript module formats.
Finally, in module 4, we'll look at different tools and techniques in software development to maintain a library. This includes linting, unit tests, TypeScript, and Lint-Staged!
By the end of this course, you'll be able to run _npm install scroller_, and take advantage of React code __you__ wrote in future projects.

Creating React Libraries from Scratch will dive into:
- initializing a new npm package
- maintaining code quality
- publishing to npm
- keeping contributors on track
- exposing modules that work in NodeJS and the Web
- unit-testing
- Storybook for demoing components
- exposing typing using TypeScript
- and more!

In this course we'll cover what it takes to maintain, write, and publish a React library from scratch.

Creating React Libraries from Scratch

Creating a React library from `yarn init` to deployed on npm

The different types of JavaScript dependency types and versioning

Setting up documentation for contributers and consumers

Keeping up with code quality while multiple people work on a project

As our library grows in popularity, contributors, and lines of code, it can become hard to ensure code is correct. There are many forms of code testing: unit tests, integration tests, end-to-end tests, smoke tests, etc. Jest is a JavaScript testing framework that can run different forms of testing, but the most common is unit tests. Unit tests are automated tests, run by the computer, that check if a section of code is correct. Usually, this is a function or method. Unit tests are quick, small tests that don't require outside systems (for example databases).

To learn how to integrate testing and Jest into our project we'll add a unit test for 

Testing is only done in a development environment, so we'll install Jest as a devDependency. Run 

Continuing from the last lesson, we'll be using TypeScript to write our tests. To include types for Jest we need to install the TypeScript package. Run 

Jest natively doesn't know how to validate TypeScript types. To do this we'll need to install a plugin called 

Next, we'll tell Jest to use ts-jest by using ts-jest's init script. Run 

 will allow us to use browser-specific functionality inside the testing Node environment (for example, the 

 object). Older versions of Jest come with 

 has been moved to a separate package. We can install 

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
};

  "scripts": {
    "build": "node esbuild.js && tsc",
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

---
title: How to Install Jest and Run Your First Unit Test
slug: jest
description: Testing our code through unit tests.
privateVideoUrl: https://fullstack.wistia.com/medias/m5rwt1ipgu
isPublicLesson: false
---

:::note
Jest can be found at [https://jestjs.io](https://jestjs.io/).
:::

As our library grows in popularity, contributors, and lines of code, it can become hard to ensure code is correct. There are many forms of code testing: unit tests, integration tests, end-to-end tests, smoke tests, etc. Jest is a JavaScript testing framework that can run different forms of testing, but the most common is unit tests. Unit tests are automated tests, run by the computer, that check if a section of code is correct. Usually, this is a function or method. Unit tests are quick, small tests that don't require outside systems (for example databases).

To learn how to integrate testing and Jest into our project we'll add a unit test for `useScroller()`.

## Installing Jest

Testing is only done in a development environment, so we'll install Jest as a devDependency. Run `yarn add jest --dev` to install Jest.

Continuing from the last lesson, we'll be using TypeScript to write our tests. To include types for Jest we need to install the TypeScript package. Run `yarn add @types/jest --dev`.

Jest natively doesn't know how to validate TypeScript types. To do this we'll need to install a plugin called `ts-jest` by running `yarn add ts-jest --dev`.

Next, we'll tell Jest to use ts-jest by using ts-jest's init script. Run `yarn ts-jest config:init` which will create a new `jest.config.js` file.

Open this file and change the `testEnvironment` from `node` to `jsdom`. `jsdom` will allow us to use browser-specific functionality inside the testing Node environment (for example, the `window` object). Older versions of Jest come with `jsdom` out of the box, but as of version [28](https://jestjs.io/blog/2022/04/25/jest-28#jsdom-19) `jsdom` has been moved to a separate package. We can install `jsdom` by running `yarn add jest-environment-jsdom --dev`.

```js { actualFilename=./protected/jest.config.js endChar=71 endLine=5 startChar=0 startLine=1 statedFilename=jest.config.js url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_02/protected/jest.config.js }
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
};
```

To make testing easier we'll add a `test` command to our `package.json` file. Add a new script called **test** which runs the Jest command.

```json { actualFilename=./protected/package.json endLine=14 startLine=9 statedFilename=package.json url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_02/protected/package.json#L9 }
  "scripts": {
    "build": "node esbuild.js && tsc",
    "test": "jest",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
```

## Writing our first test

In the `src/` directory create a new file called `useScroller.test.ts`. Jest will automatically run files with `.test.` in their file extension. Enter the following code:

```ts { actualFilename=./protected/useScroller.test.ts endChar=420 endLine=24 startChar=0 startLine=1 statedFilename=src/useScroller.test.ts url=https&#x3A;//gitlab.com/fullstackio/books/creating-react-libraries-from-scratch/module_05/lesson_02/protected/useScroller.test.ts }
import { useScroller } from "./useScroller";

Getting an error of "syntaxerror cannot use import statement outside a module" whenever trying to import the scroller into the `useScroller.test.js` file

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating React Libraries from Scratch

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:16)

Welcome

Introduction: (2:25)

What Does A React Library Development Environment Look Like?

Module 2: Initialize

Lesson 1: (5:25)

Essential Files and Directories for Publishing a React Library

Lesson 2: (4:36)

An Introduction to the 3 Types of Dependencies in React Libraries

Lesson 3: (3:07)

Installing React and React-DOM as peerDependencies

Lesson 4: (5:11)

A Beginner's Guide to Using Git to Push Code to GitHub

Module 3: Implement

Lesson 1: (1:07)

Scroller schema

Lesson 2: (2:52)

Implementing Scroller

Lesson 3: (3:56)

How to Set Up Storybook to View and Test Code

Module 4: Deploy

Lesson 1: (2:18)

Setting Up ESBuild to Simplify Code Maintainability

Lesson 2: (4:54)

A Brief Guide to JavaScript Modules and What They Do

Lesson 3: (2:54)

How to Use ESBuild to Export Multiple JavaScript Module Formats

Lesson 4: (5:34)

How to Configure and Publish an NPM Package

Module 5: Maintain

Lesson 1: (0:43)

What it Takes to Make Your React Library More Maintainable

Lesson 2: (7:01)

3 Ways to Add Typescript to a React Library

Lesson 3: (4:33)

How to Install Jest and Run Your First Unit Test

Lesson 4: (4:33)

How to Install and Run ESLint When Creating React Libraries

Lesson 5: (2:23)

How to Prevent Bad Git Commits with Lint-staged

Module 6: Summary

Lesson 1: (0:34)

Course Wrap Up - Creating React Libraries from Scratch

How to Install Jest and Run Your First Unit Test