DEV Community: Jareth Tan

Typescript in React

Jareth Tan — Wed, 10 Aug 2022 07:03:46 +0000

1. Introduction
2. Functionalities and Examples
3. Conclusion

Another week, another post. Carrying on from my previous post about Typescript for beginners, I thought I would write a post about using typescript in a React application for beginners.

Introduction
As the popularity of React exploded in recent years, the demand to build React applications using Typescript has increase significantly as well.

Adding Typescript to React

I typically use create-react-app boilerplate to start my react application. To add Typescript when creating our react app, just type this additional wordings:

npx create-react-app my-app --template typescript

Once the boilerplate is completed, open the file and we will notice that some files are named .ts or .tsx. There is also a new file generated called tsconfig.ts. This file is where all the magic happens for Typescript. Typescript looks for the tsconfig.json file in the project root folder, and that file provides configuration options for the compiler.

Functionalities and Examples

Before we jump into the use cases of Typescript in React, lets have a quick overview on the different "Types" in Typescript.

void: denotes the absence of any type.
tuple: works like an array, but the number of elements here is fixed. The types of elements in a tuple are known and can be of different types.
enum: is a group of constant values that are closely related and known.
any: allows us to assign the value of any type to a variable. Used when a value type is unknown
never: is a type that contains no value, so we can’t assign any value to a variable with a never type.
union: this describes a value that can be one of several types number | string | boolean
object: To define an object type we list its properties and their types: {x:number, y:number}

There is a deeper dive on this types in the previous post. Do check it out for more information on this.

React functional components
With the release of react 16.8, majority of users have shifted away from using class components to functional components. A React Functional Component is a function that receives props objects and returns JSX elements. In React components, we need to consider the type of props coming in. Integrating Typescript with functional component is pretty straight forward as follows:

import {FC} from "react"

const Movies: FC<{title: string}> = ({ title }) => {
  return (
    <>
      <h1>{message}</h1>
    </>
  );
};

This is one of the ways to define a functional component with Typescript. We have assigned a FC type to the functional component. Well, FC is an alias for Function Component. Also, noticed we have assigned types for the props being passed into the component by declaring it right after FC.

Interface
Another way of assigning types to your props is by using an interface. Typescript interfaces are essential to enforcing a particular object shape. An interface is like an object that contains information about the object’s properties and types. It explicitly tells the Typescript compiler about the property names and the value types an object can have. Also, since TypeScript is able to infer the type of your variables, you can remove typing the component FC as well. So in the end, it will look like this:

import {FC} from "react"
// we can do it like this
const Movies: FC<{title: string, boxOffice: number}> = ({ title, boxOffice }) => {
  return (
    <>
      <h1>{message}</h1>
    </>
  );
};

// or with an interface
interface MovieProps{
 title: string;
 boxOffice: number;
}

const Movies = ({ title, boxOffice }: MovieProps) => {
  return (
    <>
      <h1>{message}</h1>
    </>
  );
};

// To keep the title prop optional. Just pass it this way
interface MovieProps{
 title?: string;
 boxOffice: number;
}

There are a few advantages for using interfaces. Firstly, the code is a little cleaner. Secondly, we can export the interface and use it in other parts of our code as a type as well by doing this: export interface MovieProps which ensures consistency in our code. We can also define our interfaces in a single file and reference from that file. Any changes made can also be made in one location.

Some React Hooks

useState
For useState hooks, the type expected can be inferred from the initial value passed into useState. For example:

const [title, setTitle] = useState("");
// is equal to
const [title, setTitle] = useState<string>("");

Since an empty string is passed as an initial value, typescript has inferred that the value stored will be a string type. However, if we are going set initial value as null or undefined, we need to pass a union of types like this:

const [title, setTitle] = useState<string | null>(null);

And if we are expecting an object in the useState hook, we can use interface to define the object type and assign it as a type in useState.

useRef
In most cases, useRef is used to reference input elements in HTML. Something like this:

function movieSearch() {
  const inputTitle = useRef(null);
  return (
    <>
      <input ref={inputTitle} type="text" />
    </>
  );
}

In such cases, we can use a generic type and note that we dont need to assign null as a type for generic types as it accepts null already.

const inputTitle = useRef<HTMLInputElement>(null)

useEffect
Typing the useEffect hook is not required because they don’t deal with returning values. The cleanup function for the useEffect hook is not considered a value that can be changed either so we can write these hooks as normal.

HTML events
The most commonly HTML events are button events, onChange events and form submits. These are the following example on how to type those events.

import { useState, ReactElement, ChangeEvent, FormEvent } from "react";

const App = (): ReactElement => {
  const [title, setTitle] = useState<string | null>(null);
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    // handle event here...
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <span>Email:</span>
        <input
          type="email"
          name="email"
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            setTitle(e.currentTarget.value)
          }
        />
      </div>
      <div>
        <input type="Submit" value="Submit" />
      </div>
    </form>
  );
};

As seen from above, the events for submitting the form is typed as FormEvent as import from the react node module. As for the change event, it is typed as ChangeEvent<HTMLInputElement> as onChange prop is in an input element which handles a change event. as for button events, it is shown as:

<button onClick={ (e: MouseEvent<HTMLButtonElement, MouseEvent>) => console.log("Clicked")}>button</button>

Do note that for most of the time, button and change event types can be inferred by Typescript hence there is no need to explicitly assigned the types to such events.

Conclusion
Well, there we go, this are the more commonly used types when using React with Typescript. This list is by no means exhaustive and I do realize I have not covered some critical parts such as generics, type definition for some hooks (useContext or useMemo) or typing different type of React components. However I have not apply Typescript consistently on these topics or understand the core concepts behind them to write about it confidently yet. Once I do, I will update this blog post with more information. For now, I believe the information in this post is sufficient enough to get start with Typescript in a React application. As always, more information can be found in the official document: https://www.typescriptlang.org/docs/handbook/react.html
Till next time. Take care and stay safe.

Typescript for Beginners

Jareth Tan — Wed, 03 Aug 2022 03:18:14 +0000

1. Introduction
2. Purpose and Uses
3. Functionalities and Examples
4. Conclusion

Alright... Another week, another post! For this week, I will write about Typescript. I have been using typescripts in my project for my past few projects but only recently have I gotten serious about trying to understand the core functionalities of it. Hopefully this post is more beginner friendly.

Introduction
So what is Typescript? Well, from what I gathered from the documents, it is a superset of Javascript that builds on top of Javascript. So some consider it both a language and a set of productivity tools. Ohh.. and it is created by Microsoft and open source too.

Once a typescript project is deployed, typescript code is compiled into plain javascript using a typescript compiler. So instead of a file ending with .js when using Javascript, a typescript file will end with .ts. And if we are using react, your file will end with .tsx or .ts.

Purpose and Uses
From my beginner's understanding, Typescript serves three core purposes as follows:

Since Javascript is a loosely typed language, Typescript introduces types to JavaScript with static typing. This is one of the main advantage for using Typescript.
It helps highlight some errors and bugs at the time of development and before deploying your projects.
It can be a productivity tool. Using features such as enum, types, interface, etc can create a richer IDE environment for providing suggestions and auto-corrections as we type.

Functionalities and Examples
As mentioned above, Typescript have some fundamental types. Javascript already has some in built types such as number, string, boolean, null, undefined, and object. However, Typescript introduces even more of these such as tuple, enum, never, unknown, and any.

To start off, let's see what is the fuss about Typescript. We will create a variable call money and assign a type number to the variable in a Typescript file named index.ts

As seen from the image above, an error have appeared in line 5 with an error message Type 'string' is not assignable to type 'number'. As we have declared the variable money to be a number type, on line 5, when we assigned a string type to the money variable, the error was generated. If we were to type our code in a JavaScript file, the error will not be highlighted in our IDE as it is acceptable in JavaScript.

On a side note, even if we do not explicitly assign a type number to the money variable, Typescript will implicitly assumes the type is a number as in the initial declaration, a number 10 was assigned to the variable. Take a look below how it works in our index.ts file:

As we can see, an error was generated as well. How cool is that!

Moving on, for number, string, boolean, assigning of types is pretty straight forward. As for arrays, it requires a little more understanding. Lets say we want pass an array of strings into a function, to assign an array of strings, we can do the following:

By using the [] symbol to represent an array and the type of elements we expect in the array, we can explicitly assign a type. Hence in the example above, when we insert a number into the array, Typescript caught the error and alerted us.

Another advantage of using Typescript is having better code completion (IntelliSense) when typing your code. Lets take for the example below:

In the code snippet, we can see that when the array element are assign to a string type, when we want to manipulate each element in the array using a forEach method, all the string methods are suggested to us. This help us to quickly scan and identify which method are available for us to use which can boost productivity.

Next we have functions. The way to apply Typescript in functions is as shown below:

As seen above, besides assigning a type to the function argument, we also need to assign the type for the return value. Based on the example above, the type assigned for the return value is after the function brackets :number. However, if the function does not return anything, we will use :void instead. Also, if we want the argument being passed to the function to be optional, we can insert a ? symbol such as expenses?: number to inform TypeScript this argument is optional.

Next on the list of types are Tuples. They are fix length array where each element have a particular type. For instance, we want to declare that for each movie, we want to represent the movie information by creating an array that have two values, movie name, box office amount. We can use the following syntax to annotate:

Note that if only two elements were type assigned, only two elements can be declared in the array. No more, no less. For best practice, we typically only assign two values in a tuples. Anything more than that, the code readability suffers. Also, when we access the each elements in the array. For example movies[0] or movies[1], you get the methods for strings and numbers respective with IntelliSense which helps with productivity.

Then there is the Enum type. The Enum allows us to group certain const together into a type and access it. For example, if we want to decide the price of food at three different serving sizes (small, medium and large). We can do it the old school way of declaring three different variables like what is shown below

const small = 3
const medium = 5
const large = 7

or we can use Enum to declare the variable

const enum FoodCost {
  small = 3,
  medium = 5,
  large = 7,
}

let myFoodCost: FoodCost = FoodCost.medium;

Note that the declared name for the enum is in Pascal case. In the example shown above, when we console.log myFoodCost, 5 will be logged in the console. One useful thing about Enum, we are able to export the Enum to other files to use. So typically, we can create a file just to store all our Enums and import it into different files to use.

Next, we have objects. We can assign a type for a object by this way:

let food: {
  name: string;
  price: number;
  calories?: number;
} = {
  name: "fish and chips",
  price: 10,
  calories: 700,
};

By assigning the type this way, every key/value pair in the object is assigned a type. Also, we have assign the calories key/value pair to be optional. Which means if it was not declared in the object, an error will not be generated. However for name and price key/value pair, it must be declared in the food object or else Typescript will generate an error. Type assignment for Object are very useful as it keep a strict shape of the Object.

Lastly, we have the any type. We typically use this type if we want to bypass strict typing from Typescript. example would be:

let movies:any = 'batman'

It is highly not recommended to do this as we are removing one of the key functionalities of Typescript. However in some cases, if we have an error which we cannot resolve and want to move forward with the project OR we want to run certain code first before assigning the correct types, we can use the any type. However as mentioned before, this will defeat the purpose of using Typescript in the first place.

Alright, I hope I have covered a fair bit of Typescript for beginners. Maybe for the next post, I will write about using Typescript specifically for React. To learn more about Typescript, refer to the official documentation at https://www.typescriptlang.org/docs/. Thanks for reading and stay safe!

Implementing Jest and RTL for beginners (3/3)

Jareth Tan — Tue, 26 Jul 2022 10:17:00 +0000

1. Introduction
2. Examples and Methods
3. Conclusion

Alright, another new post! I need to get back to writing since I missed one month of posting. I had to attend to some urgent family matters so I had to miss that period of time.

Introduction
For this post, we will be completing this Jest testing series with the following content:

How to test for conditional conditions (such as the game win or draw scenario) that renders specific content/elements.
How do we test the winning combination of the game

Examples and Methods
To test conditional renders, what we will focus on rendering specific messages in this snippet of code taken from the Board component code in the previous post (part 2/3):

      {winner ? (
        <h2 data-testid="winnerMessage">
          {winner === "Draw"
            ? "Round Draw. Restart Round."
            : `Player ${winner} is the Winner!`}
        </h2>
      ) : (
        ""
      )}

testing for conditional renders and attributes
As shown above, this is a ternary operator nested in another ternary operator. There is a winner state which holds a string that has 4 outcomes: X or O or Draw or "". If it is empty, the game will continue. If the Winner is X or Y, a winner message as shown above will be rendered. If it is a draw, it will render the draw message.

To test if different rendered messages, we will use simulate different move sets. Refer below for the testing logic:

  test("Winner message for player X should appear when winner is decided and button disabled", () => {
    const { getByTestId } = render(<Board />);
    const moveArr = [0, 5, 1, 6, 2];
    for (let index of moveArr) {
      const button = getByTestId(`squareButton${index}`);
      fireEvent.click(button);
    }
    const playerTurnMsg = getByTestId("winnerMessage");
    expect(playerTurnMsg).toHaveTextContent("Player X is the Winner!");
    expect(getByTestId(`squareButton3`)).toHaveAttribute("disabled");
  });

The first line of code is the test description. We are looking to generate a winner message for X and when a winner is decided, all buttons from all squares shall be disabled until the reset button is clicked. The move set we mentioned above is as shown: const moveArr = [0, 5, 1, 6, 2]; The number are the array indexes and we use a for loop and a fireEvent.click to simulate the test moves. In the backend, the game board should look something like this:

This move set will allow player X to win and we will use getByTestId to get the ID of the JSX element that displays the winner message and use toHaveTextContent matcher to confirm if the winner message is generated.
Right after that test, we will use the toHaveAttribute matcher and get the ID of any unclicked buttons to test if the buttons are indeed disabled after a winner is selected.

testing winning combinations
To test winning and drawing combinations, a new test file was created called Winner.test.ts. The combinations are as shown:

export const drawCombi = [
  ["X", "O", "X", "X", "O", "O", "O", "X", "X"],
  ["X", "O", "X", "O", "O", "X", "X", "X", "O"],
  ["X", "O", "X", "X", "O", "X", "O", "X", "O"],
  ["O", "X", "O", "X", "O", "X", "X", "O", "X"],
  ["X", "O", "O", "O", "X", "X", "X", "X", "O"],
  ["X", "X", "O", "O", "X", "X", "X", "O", "O"],
  ["X", "X", "O", "O", "O", "X", "X", "O", "X"],
  ["O", "X", "X", "X", "O", "O", "X", "O", "X"],
  ["X", "X", "O", "O", "O", "X", "X", "X", "O"],
  ["O", "X", "X", "X", "O", "O", "O", "X", "X"],
  ["X", "O", "X", "O", "X", "X", "O", "X", "O"],
  ["O", "X", "O", "O", "X", "X", "X", "O", "X"],
];

export const winCombi = [
  ["X", "X", "X", "", "", "", "", "", ""],
  ["", "", "", "X", "X", "X", "", "", ""],
  ["", "", "", "", "", "", "X", "X", "X"],
  ["X", "", "", "X", "", "", "X", "", ""],
  ["", "X", "", "", "X", "", "", "X", ""],
  ["", "", "X", "", "", "X", "", "", "X"],
  ["X", "", "", "", "X", "", "", "", "X"],
  ["", "", "X", "", "X", "", "X", "", ""],
];

To decide if there is a winner, a function called decideIfThereIsWinner was created as follows:

export const winIndexCombi = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

export function decideIfThereIsWinner(arr: String[], select: String) {
  const playerArr: Number[] = [];
  arr.map((a: String, c: Number) => (a === select ? playerArr.push(c) : ""));
  const filteredCombi = winIndexCombi.filter(
    (comb) => comb.filter((steps) => playerArr.includes(steps)).length >= 3,
  );
  const result = filteredCombi.flat(1).length >= 3;
  return result;
}

The function will take all the possible winning index combination and map the array through with a nested filter method. If the newly filter array filteredCombi has a length of 3 or more, it will return a result variable with a true boolean. With all the move pieces set, we will set up our test logic as shown below:

afterEach(cleanup);

describe(Board, () => {
  for (let combi of winCombi) {
    test("Winning Combination for both X and O", () => {
      const arr = combi;
      const result = decideIfThereIsWinner(arr, "X");
      expect(result).toBeTruthy();
    });
  }
  for (let combi of drawCombi) {
    test("Draw Combination check X", () => {
      const arr = combi;
      const result = decideIfThereIsWinner(arr, "X");
      expect(result).toBeFalsy();
    });
  }
  for (let combi of drawCombi) {
    test("Draw Combination check O", () => {
      const arr = combi;
      const result = decideIfThereIsWinner(arr, "O");
      expect(result).toBeFalsy();
    });
  }
});

To test the winning combi, since there are only 8 combinations to win, we will expect all 8 scenarios to be return a true boolean from decideIfThereIsWinner function regardless it is X or O player. We can use toBeTruthy() to confirm it returns a true boolean for each case. However for the draw combination, since X always starts first, we need to check both X and O draw combinations and we can use the toBeFalsy() matcher for all cases to confirm the case returns a false boolean

And that's it! That's all the test I can come up with. I hope this series provide a little insight on how to start testing your application. This is just the tip of the ice-berg. If you want to learn more, the official documents can be found in https://jestjs.io/. Thank you and until next time!

Implementing Jest and RTL for beginners (2/3)

Jareth Tan — Tue, 28 Jun 2022 08:28:24 +0000

1. Introduction
2. Examples and Methods
3. Conclusion

Hi everyone. It is another week and another post from yours truly. This post will be a continuation from the "Implementing Jest and RTL for beginners" series.

Introduction
For this post, we will cover a few more testing methods with the TicTacToe game I created with React framework just to familiarize with Jest and RTL. More details of this game can be found in the previous post of this series.

Examples and Methods
In the previous post, we looked at setting up Jest and RTL in a React Application, went thorough some definitions and did a basic render test to confirm the game board is render on the screen. For today, we will cover two more types of test we can do for the game.

Test: Click Action

A click test is simulating a click event to test if the logic works by confirming what is rendered on the screen. This means the only way to confirm the click is working as expected is through confirmation on what is "expected" to render on the screen when it is clicked. For example in the Board component, nine Square components were components were rendered as follows:

  const [arr, setArr] = useState<any[]>(
    Array(9)
      .fill("")
      .map((a) => a),
  );
  const [select, setSelect] = useState<String>("X"); // start with X
  const [winner, setWinner] = useState<String>("");
  const [disable, setDisable] = useState<boolean>(false);

  const onHandleSelect = (i: any) => {
    if (arr[i] === "X" || arr[i] === "O") return;
    if (select === "X") {
      setSelect("O");
      arr[i] = "X";
    } else {
      setSelect("X");
      arr[i] = "O";
    }
    const result = decideIfThereIsWinner(arr, select);
    if (result === true) {
      setWinner(select);
      setDisable(true);
    }
    if (drawCombi.find((a) => arr.toString() === a.toString())) {
      setWinner("Draw");
      setDisable(true);
    }
  };

  return (
    <div className={classes.container} data-testid="board">
    <span data-testid="playerTurn">Player {select} Turn</span> 
      <div className={classes.gridContainer}>
        {arr.map((a, i) => (
          <Square
            key={Math.random()}
            index={i}
            onHandleSelect={onHandleSelect}
            moveName={a}
            disable={disable}
          />
        ))}
      </div>
      {winner ? (
        <h2 data-testid="winnerMessage">
          {winner === "Draw"
            ? "Round Draw. Restart Round."
            : `Player ${winner} is the Winner!`}
        </h2>
      ) : (
        ""
      )}
      <button
        onClick={onHandleReset}
        type="button"
        className={classes.buttonReset}
      >
        reset
      </button>
    </div>
)

and each Square component is a button as shown:

import React from "react";
import classes from "./Square.module.scss";

interface SelectProps {
  onHandleSelect: (event: React.MouseEvent<HTMLButtonElement>) => void;
  moveName: String;
  index: any;
  disable: boolean;
}

function Square({ moveName, onHandleSelect, index, disable }: SelectProps) {
  return (
    <div className={classes.container} data-testid="board">
    <button
      data-testid={`squareButton${index}`}
      onClick={() => {
        onHandleSelect(index);
      }}
      key={Math.random()}
      type="button"
      disabled={disable}
      className={classes.square}
    >
      {moveName}
    </button>
  );
}

export default Square;

For this test, we are going to test when we click the square button, will an "X" show up in the Square box. Dirst we have to confirm that X is the current turn. For that, we will run this test:

describe(Board, () => {
  test("First player turn is X", () => {
    const { getByTestId } = render(<Board />);
    const playerTurnMsg = getByTestId("playerTurn");
    expect(playerTurnMsg).toHaveTextContent("Player X Turn");
  });
}

which means we will find the HTML element which has a data_testid of "playerTurn" (line 2 in the JSX portion of the board component) and we expect the "player turn message" rendered on the screen to be "Player X turn". Once we confirm this, we will do a click test on the square itself as follows:

  test("Next player turn is O after click", () => {
    const { getByTestId } = render(<Board />);
    const button = getByTestId("squareButton0");
    const playerTurnMsg = getByTestId("playerTurn");
    fireEvent.click(button);
    expect(playerTurnMsg).toHaveTextContent("Player O Turn");
    expect(getByTestId("squareButton0")).toHaveTextContent("X"); // confirm click produce X on button
  });

In this test, we use a new method from React Testing Library called fireEvent. This method acts like a click action. Also in this test we have two expected result to happen

The player turn message (data_testid= playerTurn) to change to "Player O Turn".
The square that we click to have a string "X". In this case we will use the .toHaveTextContent matcher from Jest to confirm that. Note that I selected the data_testid of squareButton0 for the first square in the board. If the test is shown in the board, this is how it will render after the click event happens.

Because the component rendered as expected, the test was successful.

Test: Test number of components rendered

The next test is to check the number of Square components rendered. On the board, we expect nine squares to be rendered to form the game board. We can do a basic test as follows:

  test("Game Rendered nine squares", () => {
    const { container } = render(<Board />);
    const renderSquares = container.getElementsByClassName("square");
    expect(renderSquares).toHaveLength(9);
  });

What is different about this test is, since we have specific data-testid for each Square component (squareButton0, squareButton1, etc), we cannot use the data-testid to find out the number of Square components being rendered. We need to find a common identifier in the Square component which Jest and RTL is able to search and count the number of component.

Hence we will not be using the query getByTestId and instead use the query getElementsByClassName. However before that, we must destructure the container object from the render method. This is because the container object consist of DOM node of your rendered React Element. These methods enable us to search for specific attributes in the DOM (eg getAttribute, getElementByTagName, etc). Then, we can use the method to call on the className (which is square) for the Square component button. From there, we will call a matcher toHaveLength and expect that the number of renderSquares to be 9. If everything goes well, the test should be successful.

Just a note: According to RTL official docs, it is not advisable to use container frequently to query for rendered elements in our app as it maybe not be resilient to change as compared to other built in queries in RTL such as getByTestId. But for the sake for demonstration, we will use this. If we want to use RTL built in queries, we can add in placeholders into the Square component buttons and use getByPlaceHolderText query to find the html element.

Conclusion
Well, this conclude the second part of this series. In the last part, we will dive into how do we test the winning combination of the game and how to test for conditional conditions (such as the game win or draw scenario) that renders specific content/elements.

Thank you!

Implementing Jest and RTL for beginners (1/3)

Jareth Tan — Tue, 21 Jun 2022 08:02:11 +0000

1. Introduction
2. Getting Started
3. Examples and Methods
4. Conclusion

So, for this week's post, we will be looking at Jest.js and React Testing Library. I just recently started learning how to test my code. So likely for the next few posts, I will be documenting the learning and pointers I gathered along the way. It will be pretty basic testing but hopefully the complexity increases as I learn more about testing.

Introduction
So just a little introduction to this topic. I decided to create a simple TicTacToe game using React Library with the intention to implement testing into my simple game app to get exposure to a testing framework.

What is Jest?
Jest is a testing framework which was first build for React applications. It allows developers to run tests on JavaScript and TypeScript code and integrates well with React. It offer functions for test suites, test cases, and assertions which we will get into more later in the post.

What is React Testing Library (RTL)?
React Testing Library is a JavaScript testing utility built specifically to test React components. It is a DOM testing library that handles DOM elements and how they behave in front of real users instead of dealing with instances of rendered React components. The library comes with a set of testing helpers which we will get into later in this post.

So what is the difference between both of them? Can they replace one another?
No they are not a replacement for one another. In fact, we need both to test our component completely.

Getting Started
Fortunately, if we create our React app using create-react-app, Jest and RTL already comes as part of the installation. Once we created our app, there is a file called app.test.js which uses Jest and React Testing Library.

To run the test, open our terminal and run

npm run test // if using npm

yarn test // if using yarn

This will initialize the test. The output for a successful and failed test will be shown at the end of the post.

Examples and Methods
In this section, we will reference certain lines of code from the TicTacToe app.

For this post, we will use the Board component to conduct certain tests. Below is the board component which renders a board with nine squares as shown below:

And the JSX for this component are as shown:

  return (
    <div className={classes.container} data-testid="board">
      <span data-testid="playerTurn">Player {select} Turn</span>
      <div className={classes.gridContainer}>
        {arr.map((a, i) => (
          <Square
            key={Math.random()}
            index={i}
            onHandleSelect={onHandleSelect}
            moveName={a}
            disable={disable}
          />
        ))}
      </div>
      {winner ? (
        <h2>
          {winner === "Draw"
            ? "Round Draw. Restart Round."
            : `Player ${winner} is the Winner!`}
        </h2>
      ) : (
        ""
      )}
      <button
        onClick={onHandleReset}
        type="button"
        className={classes.buttonReset}
      >
        reset
      </button>
    </div>
  );
}

To start off, we would like to test if the board itself is rendered in the DOM. To begin, we will create a __test__ folder in the folder which houses the Board component and create a test file called Board.test.tsx. like this:

In Board.test.tsx, import render and cleanup from react test library and also the Board component itself.

import { render, cleanup } from "@testing-library/react";
import Board from "../Board";

Before writing test logic, we need to call the describe method from Jest. describe is used describe our test suite and each test suite can consist of multiple test as shown below

describe(Board, () => {
  test("Board is rendered on screen", () => {
     // our test function comes in here.
  });
  it("Reset button is rendered on screen", () => {
     // ourtest function comes in here.
  });
  // other tests
});

The test method from Jest takes in two argument (test description, test function). Instead of test, the method it can be used as well. Both methods exist to enable the user to make a readable English sentence from our test.

Next, we have to call on the render() method from RTL and insert the component we want to render (in this case it is the Board component). One of the key feature of render() is that we can destructure the rendor method and select different ways to queries the DOM. There are quite a few queries to choose from (for example: byRole, byText, byTitle, etc) and they can be found in RTL official document. For now, we will use getByTestId.

const { getByTestId } = render(<Board />);

From there, we will use getByTestId to search the DOM for the html element with the specified test ID and assign it to a variable.

const renderBoardElement = getByTestId("board");

In this case, the main div in the highest component has the the data-testid prop and can be seen in an abstract from the Board component JSX

  return (
    <div className={classes.container} data-testid="board"> // data-testid *************
      <span data-testid="playerTurn">Player {select} Turn</span>
      <div className={classes.gridContainer}>
        {arr.map((a, i) => ( .....

Then we will use the expect method from Jest and insert the variable in and choose a matcher method to decide the requirement of our test. There are many matchers to choose from and they can be found in Jest official documents. In this case, the matcher we choose will be .toBeInTheDocument()

expect(renderBoardElement).toBeInTheDocument();

Lastly, we will need to use the cleanup method from RTL to clean up the test everytime it finishes executing. The clean up method Unmounts React trees that were mounted with render. The whole testing function for checking the board will be render in the DOM would look something like this:

import { render, cleanup } from "@testing-library/react";
import Board from "../Board";

afterEach(cleanup);

describe(Board, () => {
  test("Board is rendered on screen", () => {
    const { getByTestId } = render(<Board />);
    const renderBoardElement = getByTestId("board");
    expect(renderBoardElement).toBeInTheDocument();
  });
});

If we type npm run test in the terminal and the test is successful, we will see this printout:

This means the div with test-dataId of board was rendered in the DOM.

To generate a fail test, we will change the test-dataId from board to boar and this is what a fail test looks like.

Conclusion
Alright, this is the end of the first part of testing. it is a very basic test to check if the html element are rendered. This is an extremely high level check and there will be many other more in depth to conduct to ensure the test is working correctly. Such as fire-events, number of components rendered, etc. I will document more as I develop my testing skills along the way. If I have any inaccuracies, do tell me as I would love to learn from my mistakes. Apologies for the long intro and for more information on Jest and RTL, refer to the official documentations at:

For Jest: https://jestjs.io/
For React Test Library: https://testing-library.com/docs/react-testing-library/intro/

Function Declaration vs Function Expression

Jareth Tan — Tue, 14 Jun 2022 07:58:22 +0000

1. Introduction
2. Definitions
3. Key Differences
4. Conclusion

Introduction
So for this week's learning, I thought I would touch on the difference between function declaration and function expression. Even though I have been learning JavaScript for more than a year, I still feel there is so much to cover. This was one of the challenge I faced while learning JS earlier on and I thought I would document my learnings and understanding so far.

Definitions
So what is function declaration?
Function declaration is a way of declaring a function with the function keyword. So an example of a structure would be as follows:

function calNum(paramA, paramB) {
    // Set of statements
};

To call a function declaration, you would call it like this: calNum().

So what is function expression then?
In short, function expression can be store in a variable assignment. Something like this:

const calNum = function(A, B) {
    // Set of statements
};

Or if you are using ES6 syntax, you can make use of arrow functions => to declare your function expression and omit the function keyword. Like this:

const calNum = (A, B) => {
    // Set of statements
};

To call a function expression, you would call it similar to a function declaration, like this: calNum().

Key Differences
So you might ask, what is the difference between both types? they seem to serve the same purpose of defining a function. Well, there is one key difference which make both types serve different use cases.

Function declaration can be hoisted while function expression cannot. This means that for function declaration, even if you call the function above the line of code where you define the function, the function would still work as the function is available "at the top" and "globally" in your code base rather than on the position in which you created your code. For example:

calNum(); // will not have an error, the function will execute

function calNum(A, B) {
    // Set of statements
};

However with a function expression, this is not possible and an undefined error will be generated. Function expression will execute only when it reaches that line of code. So you must always call it after you define a function expression.

So you may think since function declaration is hoisted, it's use case is pretty strong as compared to function expression. However it actually depends on when and where you wish to call a function. By having a function available globally, it pollutes the global scope making the codebase more congested than it really should be. In order to prevent this, we can use Function Expressions to execute the function as once it is done executing, it will be forgotten immediately. An example of this use case is using the defined function as a callback can be seen below:

function calNum(A, B) {
    // Do something
};

array.filter(callNum)

In this instance, we are using a function declaration for calNum which is available globally even though we are only going to use this function in one instance. By using a function expression to define the callNum, the function block will be forgotten once the callback is executed. This makes the global scope less congested as the function is not stored.

Another difference between function declaration and function expression is that the function itself can be anonymous. For example:

array.map(function(A, B) {
    // Do something
}); // The function will still work.

The function defined in the map() method works even though is not named. However, it is encouraged to name your function as it will aid in debugging and organizing your code. A simple change like this:

array.map(function count(A, B) {
    // Do something
}); // function named as count.

Conclusion
In conclusion, if you want your function to be available globally, function declaration will be the way to go. If not, function expression should serve most of your needs as they can often result in cleaner and more readable code. Moreover, function expression are more flexible especially with the introduction of arrow function in ES6. I know I am not even close to covering the difference between both ways of defining functions, however this is what I understand so far. I will update the post as I become more and more proficient in JavaScript. For now, that's all folks!

Controlled vs Uncontrolled Components

Jareth Tan — Fri, 10 Jun 2022 01:11:43 +0000

1. Introduction
2. Definitions
3. Key Differences
4. Conclusion

Introduction
Recently, to aid in my learning journey, I decided to delicate some time to blog down learning points along the way. As I have recently started learning React, I am still unfamiliar with many definitions and concepts. So I gave myself an assignment today to find out:

What is the difference between controlled and uncontrolled components?

While building my personal projects, I was unclear why it is best practice to use controlled component over uncontrolled component bar from a few exceptions. Upon reading further, apparently, there are some performance and functional advantage for using a controlled component over an uncontrolled one.

Definition
What is a controlled component?
Let's take form data elements such as textbox or input as an example, a controlled component is a component which input element value is controlled by the component react state via useState hook or some global state management tool. By using the form element event handlers such as onChange or onClick, we can store input element value in the react state.

What is an uncontrolled component?
As you can guessed it, uncontrolled components are components which react state is not present. The component owns its own state. Think of it as traditional HTML input elements. The value of the input element is directly handled by the DOM and you can extract the value from the DOM by using the useRef hook and referencing it to the ref prop in the element.

Key Differences

With controlled components, we are able to perform dynamic form validation even before we submit the forms. As the input values are stored in local storage, with the input element onChange prop, validation can be perform on every keystroke. Hence your data (state) and UI (inputs) are always in sync. However in uncontrolled component this is not possible as no state is being stored. Validation can only occur once the form is submitted.
Uncontrolled components are easier to reuse with minimal setup. However you will not have control on how the data flows and only receive the data after the form is submitted. If your app doesn’t need to know the state of the component, you can consider using it. The typically use case would be setting the focus props in an input element.

Conclusion
So to conclude, you can decide whether you want to use controlled or uncontrolled component when creating a form in react. If you want the quick and easy way to create an input element, uncontrolled could be the way to go. However if you want more control on the data flow within a component to make use of certain functionalities such as instant validation, maybe consider using a controlled component instead. Also, referencing from React documents, it is recommended to use controlled component. One point to note, avoid creating a component which has the same input values being referenced on both controlled and uncontrolled properties as the input value does not reside in a single source of truth and your form may break.

If you want an easier way to implement forms in a react application, check out react hook forms. It is a great library for implementing intuitive forms for react applications.

DEV Community: Jareth Tan

Typescript in React

Table Of Contents

Typescript for Beginners

Table Of Contents

Implementing Jest and RTL for beginners (3/3)

Table Of Contents

Implementing Jest and RTL for beginners (2/3)

Table Of Contents

Implementing Jest and RTL for beginners (1/3)

Table Of Contents

Function Declaration vs Function Expression

Table Of Contents

Controlled vs Uncontrolled Components

Table Of Contents