Course Introduction

Introduction

Introduction to GraphQL

Using Hasura to Generate GraphQL APIs and Protect Data

How to Create a Comments Database Table and Set Permissions

Storing comments with Hasura

Setting Up Next.js Blog Starter and Understanding Its Structure

Fetching Blog Comments from a Database with a Custom React Hook

A Brief Tutorial on Building the UI for a Blog Comments Section

How to Use GraphQL to Add Comment Features to a Frontend App

Using React Testing Library and Jest to Test Hooks and Components

Implementing a comments system

An Overview of Optimistic Updates for React Hooks

Adding Pagination to a Comments Section with Hasura and React

Extending the comments system functionality

How to Publish a Custom React Hook as an NPM Library

Coding a Comments Section that Requires Manual Content Approval

Bonus

Summary

react

next.js

### The newline Guide to Full Stack Comments with Hasura and React

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

### Why this course

Many developers would like to add a comments section to their website or blog for users to post comments or hold discussions. While it's possible to use existing hosted solutions such as Disqus or Facebook Comments, they often charge a fee and impose their UI leaving little to no control for modifications or customization. 

Another option is to build your own from scratch — which is what we'll do in this course. We’ll use Hasura, which generates GraphQL API from a database so that the backend part is as easy and the least time-consuming as possible. Along the way, we’re going to learn about databases, GraphQL, building UI components with React and TypeScript, and more.
By the end of this course, you’ll have a commenting system added to a website we’ve called, Why comments?, with all comments stored by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

This course focuses on building a commenting widget, however, the skills you’ll acquire will allow you to build any fullstack widget you can think up for your application.  You’ll be able to contribute to fullstack React, GraphQL, and Hasura projects at work, in open source, or your own projects. You'll discover that this stack not only eliminates the need for having large teams of backend developers, but it lets your projects move faster.

### Your Instructors

Hi, I'm Aleksandra, and I'm your instructor for this course. I’m the former tech lead of Hasura console and lead maintainer of Bliz.js. This course combines my knowledge in a few areas such as TypeScript, React, Hasura, GraphQL, and general application development.

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

The newline Guide to Full Stack Comments with Hasura and React

Implementing pagination and optimistic updates

Importance of tests, and how to test React components

We implemented a custom React hook in the previous lessons and tested it
manually from within a sample application. However, we want to ensure that it's
working as expected without trying it manually after every change to the
front-end application. We want to make sure that the development of the
application won't break existing functionality. That's why we're going to cover
testing React components in this lesson.

We can find the following recommendation in the

If you need to test a custom Hook, you can do so by creating a component in
your test and using your Hook from it. Then you can test the component you
wrote. To reduce the boilerplate, we recommend using

 which is designed
to encourage writing tests that use your components as the end-users do.

The React Testing Library allows us to test React components smoothly. It comes
with utility functions that empower us to write maintainable and thorough tests.
As Testing Library is only a testing utility, we also need a test runner. We'll
use 

So, let's get to the setup part. We need to install a few things:

yarn add jest @types/jest ts-jest @testing-library/react @testing-library/user-event node-fetch

We're also going to add a new script in the 

 in the terminal, and Jest will run all the tests:

  "scripts": {
    ...
    "test": "jest"
  },

The last step for setting the test runner is adding a Jest configuration. For
that, we'll create a 

 file in the root directory, and we'll set
the following settings:

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./test/setup.ts"],
  globals: {
    "ts-jest": {
      tsconfig: {
        jsx: "react-jsx",
      },
    },
  },
};

 file. In there, we'll put the following
code:

if (!global.fetch) {
  global.fetch = require("node-fetch");
}

, so we need to declare
that it should use the 

 hook we implemented, you may notice that it's

 a function. It may be tempting to call it and test the result. However,
we can't do that for the following reasons:

What's more — the hook is intended to be used inside a component, so testing it
outside won't cover its functionality. Ideally, we should always test things in
the way they are used.

We will test the whole comments section in this course — we'll write a test for
both the hook behavior and the component behavior.

. Let's extract the
comments section to a separate component. It will accept the 

import { useState } from "react";
import { useComments } from "../lib/useComments";

export interface PostCommentsProps {
  postSlug: string;
}

export const PostComments = ({ postSlug }: PostCommentsProps) => {
  const { comments, error, loading, addComment } = useComments(
    "https://newline-guide.hasura.app/v1/graphql",
    postSlug
  );

  const [username, setUsername] = useState("");
  const [comment, setComment] = useState("");
  return (
    <section className="pt-6 max-w-2xl mx-auto">
      <form
        className="mb-6"
        onSubmit={(e) => {
          e.preventDefault();
          addComment({ author: username, content: comment });
        }}
      >
        <div className="mb-4">
          <label
            className="block text-gray-600 text-sm font-bold mb-2"
            htmlFor="username"
          >
            Name
          </label>
          <input
            id="username"
            className="border rounded w-full py-2 px-3 text-gray-700"
            type="text"
            placeholder="Jon Snow"
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="mb-4">
          <label
            className="block text-gray-600 text-sm font-bold mb-2"
            htmlFor="comment"
          >
            Name
          </label>
          <textarea
            name="comment"
            className="border rounded w-full py-2 px-3 text-gray-700"
            placeholder="Tell me what you think..."
            onChange={(e) => setComment(e.target.value)}
          />
        </div>
        <button
          className="bg-purple-700 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded"
          type="submit"
        >
          Add comment
        </button>
      </form>
      <h3 className="font-bold text-gray-500">{count} comments</h3>
      {loading
        ? "Loading comments..."
        : comments.map(({ author, content, created_at, status }) => (
            <article key={created_at} className="bg-gray-100 rounded my-6 p-4">
              <div className="font-bold mb-2">
                {author} {new Date(created_at).toLocaleDateString()}
                {status ? ` ・ ${status}` : null}
              </div>
              <p className="text-gray-700">{content}</p>
            </article>
          ))}
    </section>
  );
};

 component in place of the previous code:

---
title: Using React Testing Library and Jest to Test Hooks and Components
isPublicLesson: false
description:
  This lesson introduces many things — React Testing Library, Jest, MSW, and
  we'll get a sneak peek of testing React Components and React hooks.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/wwja3angql
---

We implemented a custom React hook in the previous lessons and tested it
manually from within a sample application. However, we want to ensure that it's
working as expected without trying it manually after every change to the
front-end application. We want to make sure that the development of the
application won't break existing functionality. That's why we're going to cover
testing React components in this lesson.

We can find the following recommendation in the
[React docs](https://reactjs.org/docs/hooks-faq.html#:~:text=If%20you%20need%20to%20test,as%20the%20end%20users%20do):

> If you need to test a custom Hook, you can do so by creating a component in
> your test and using your Hook from it. Then you can test the component you
> wrote. To reduce the boilerplate, we recommend using
> [React Testing Library](https://testing-library.com/react) which is designed
> to encourage writing tests that use your components as the end-users do.

The React Testing Library allows us to test React components smoothly. It comes
with utility functions that empower us to write maintainable and thorough tests.
As Testing Library is only a testing utility, we also need a test runner. We'll
use [Jest](https://jestjs.io/) for that.

### Installing dependencies

So, let's get to the setup part. We need to install a few things:

-   `jest` — the test runner.
-   `@types/jest` — type declarations for Jest.
-   `ts-jest`:

    > ts-jest is a Jest transformer with source map support that lets you use Jest
    > to test projects written in TypeScript.
    >
    > <https://kulshekhar.github.io/ts-jest/>
-   `@testing-library/react` — testing utilities for React components. Docs:
    <https://react-hooks-testing-library.com/>.
-   `@testing-library/user-event` — it provides an advanced simulation of browser
    interactions.
-   `node-fetch` — our tests will be run by `node`, but the Fetch API is not
    implemented there. Thus, we need an external module to handle fetch requests.

```sh
yarn add jest @types/jest ts-jest @testing-library/react @testing-library/user-event node-fetch
```

We're also going to add a new script in the `package.json` so that we can type
`yarn test` in the terminal, and Jest will run all the tests:

```json
  "scripts": {
    ...
    "test": "jest"
  },
```

The last step for setting the test runner is adding a Jest configuration. For
that, we'll create a `jest.config.js` file in the root directory, and we'll set
the following settings:

-   `preset: 'ts-jest`,
-   `testEnvironment: 'jsdom'` — The default environment in Jest is the `node`
    environment. However, we have a web application, so we need a browser
    environment.
-   `globals: { 'ts-jest': { tsconfig: { jsx: 'react-jsx' }}}` — we're going to
    use JSX in our test, so we need to let `ts-jest` know how it should transform
    JSX syntax.
-   `setupFilesAfterEnv: ['./test/setup.ts'],` — we want Jest to run a custom
    setup steps before running the tests.

```js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./test/setup.ts"],
  globals: {
    "ts-jest": {
      tsconfig: {
        jsx: "react-jsx",
      },
    },
  },
};
```

We also need to create the`setup.ts` file. In there, we'll put the following
code:

```ts
if (!global.fetch) {
  global.fetch = require("node-fetch");
}
```

As we mentioned before, `fetch` doesn't exist in `node`, so we need to declare
that it should use the `node-fetch` module instead.

### Testing React Hooks

When you look at the `useComments` hook we implemented, you may notice that it's
_just_ a function. It may be tempting to call it and test the result. However,
we can't do that for the following reasons:

-   It's not a pure function. Our hook has side effects (API calls), so the test
    result is not solely dependant on the parameter, but it relies on the outside
    world — the API.
-   We would break the rules of hooks — hooks are only supposed to be called
    inside of a function component. If we call it outside of a component, we'll
    get an error:

        Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
        1. You might have mismatching versions of React and the renderer (such as React DOM)
        2. You might be breaking the Rules of Hooks
        3. You might have more than one copy of React in the same app

        See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

What's more — the hook is intended to be used inside a component, so testing it
outside won't cover its functionality. Ideally, we should always test things in
the way they are used.

We will test the whole comments section in this course — we'll write a test for
both the hook behavior and the component behavior.

Previously, we wrote the whole code in `[slug].tsx file`. Let's extract the
comments section to a separate component. It will accept the `postSlug` prop and
call the `useComments` hook.

```tsx
import { useState } from "react";
import { useComments } from "../lib/useComments";

export interface PostCommentsProps {
  postSlug: string;
}

export const PostComments = ({ postSlug }: PostCommentsProps) => {
  const { comments, error, loading, addComment } = useComments(
    "https://newline-guide.hasura.app/v1/graphql",
    postSlug
  );

  const [username, setUsername] = useState("");
  const [comment, setComment] = useState("");
  return (
    <section className="pt-6 max-w-2xl mx-auto">
      <form
        className="mb-6"
        onSubmit={(e) => {
          e.preventDefault();
          addComment({ author: username, content: comment });
        }}
      >
        <div className="mb-4">
          <label
            className="block text-gray-600 text-sm font-bold mb-2"
            htmlFor="username"
          >
            Name
          </label>
          <input
            id="username"
            className="border rounded w-full py-2 px-3 text-gray-700"
            type="text"
            placeholder="Jon Snow"
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="mb-4">
          <label
            className="block text-gray-600 text-sm font-bold mb-2"
            htmlFor="comment"
          >
            Name
          </label>
          <textarea
            name="comment"
            className="border rounded w-full py-2 px-3 text-gray-700"
            placeholder="Tell me what you think..."
            onChange={(e) => setComment(e.target.value)}
          />
        </div>
        <button
          className="bg-purple-700 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded"
          type="submit"
        >
          Add comment
        </button>
      </form>
      <h3 className="font-bold text-gray-500">{count} comments</h3>
      {loading
        ? "Loading comments..."
        : comments.map(({ author, content, created_at, status }) => (
            <article key={created_at} className="bg-gray-100 rounded my-6 p-4">
              <div className="font-bold mb-2">
                {author} {new Date(created_at).toLocaleDateString()}
                {status ? ` ・ ${status}` : null}
              </div>
              <p className="text-gray-700">{content}</p>
            </article>
          ))}
    </section>
  );
};
```

This lesson introduces many things — React Testing Library, Jest, MSW, and we'll get a sneak peek of testing React Components and React hooks.

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Full Stack Comments with Hasura and React

Module 1: Introduction

Introduction:

Start Here

Introduction: (3:03)

Course Introduction

Module 2: Storing comments with Hasura

Lesson 1: (9:21)

Introduction to GraphQL

Lesson 2: (10:35)

Using Hasura to Generate GraphQL APIs and Protect Data

Lesson 3: (6:03)

How to Create a Comments Database Table and Set Permissions

Module 3: Implementing a comments system

Lesson 1: (4:56)

Setting Up Next.js Blog Starter and Understanding Its Structure

Lesson 2: (9:32)

Fetching Blog Comments from a Database with a Custom React Hook

Lesson 3: (5:43)

A Brief Tutorial on Building the UI for a Blog Comments Section

Lesson 4: (3:51)

How to Use GraphQL to Add Comment Features to a Frontend App

Lesson 5: (9:20)

Using React Testing Library and Jest to Test Hooks and Components

Module 4: Extending the comments system functionality

Lesson 1: (3:16)

An Overview of Optimistic Updates for React Hooks

Lesson 2: (4:18)

Adding Pagination to a Comments Section with Hasura and React

Module 5: Bonus

Lesson 1: (3:55)

How to Publish a Custom React Hook as an NPM Library

Lesson 2: (2:52)

Coding a Comments Section that Requires Manual Content Approval

Module 6: Summary

Lesson 1: (2:35)

Summary

Using React Testing Library and Jest to Test Hooks and Components