How to setup Jest for your project

In this article, I am writing to introduce the following

1. Configurating Jest for unit testing
2. Preset vs plugin
3. Useful preset
4. Useful plugin

For me understanding how babel, eslint works has brought me lots of headache when I am researching to set up unit test for my company project, so I am writing this as a docuementation and hope others get some help from my experience.

Configurating Jest for unit testing

There are several things that need or can be config.

Configuring Jest itself, either in:

1. package.json or
2. jest.config.js (or jest.config.ts in typescript).

Options can be find here.

Configuring the unit test:

1. file specific in setupFiles
2. file specific in setupFilesAfterEnv

Preset and Plugin

In package.json and jest.config.js, you can specific which presets and plugins to use. Preset is just a collection of plugins.

If you are using a preset from a node_modules, you can specific it like that:

"jest": {
    "preset": "the_module"
}

And it would point to the node_modules the_module/jest-presest.js

Using Jest with Babel

Babel is a javascript code compiler. If you are using ES6 module syntax, you need to use Babel.

According to the docs, you can enable support for Babel by installing the babel-jest plugin.

Normally you don’t need to anything, but if you have other code processors, like CSS or image processors, you have to explicitly define babel-jest as a transformer for your JavaScript code. Here is how to do (in package.json/ jest.config.js)

// package.json / jest.config.js
"transform": {
  "\\.js$": "babel-jest",
  "\\.css$": "custom-transformer",
  ...
}

If you need to configure babel-jest

"transform": {
  "\\.js$": path.resolve(__dirname, 'babel-jest.js'),
  "\\.css$": "custom-transformer",
  ...
}

// in babel-jest.js
const babelJest = require('babel-jest');

// do something

module.exports = babelJest.createTransformer({
  babelrc: false,
  configFile: false,
  plugins,
  presets,

Commonly used preset and plugin in Babel

• @babel/preset-env - babel preset to transpile your code
• @babel/preset-typescript - typescript support with babel

If you are not using React, but other React based framework (e.g. Preact)

• babel-plugin-jsx-pragmatic - used specific how to transform JSX, instead of using React.createElement
  

// sample usage with Preact
[
    require.resolve('babel-plugin-jsx-pragmatic'),
    { module: 'preact', import: 'h', export: 'h' },
  ],

• @babel/plugin-transform-react-jsx - automatic import to each JSX file

As specific in the docs, it runs like this:

In

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Out

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

const profile = _jsxs("div", {
  children: [
    _jsx("img", {
      src: "avatar.png",
      className: "profile",
    }),
    _jsx("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }),
  ],
});

This is a basic introduction to how to config jest for your projects! Hopefully you now have better understanding on this topic. Thanks for reading!

2 Important CSS Concepts You Should Master

When I started learning about CSS, I thought it was all about margin, color and stuff. The world of CSS is very simple. Yet not until I start working as a software developer that I found out CSS can be much more complicated than I thought.

Here are 3 concepts that I only learnt after I start working full-time.

1. Reflow and Repaint

To understand what is reflow and repaint, we must first understand how is webpage generated. The most basic website can be generated with HTML and CSS, which are responsible for the DOM and the style respectively. Combining the two, we got a Render Tree.

Reflow and repaint come after we have the render tree:

• Reflow is related to position and size
• Repaint is related to color, background etc
• What caused reflow will cause repaint as well, so reflow is more computational expensive

Here is a list of what forces reflow.

Any change on other css property other than the list above trigger repaint.

Optimising reflow and repaint

1. Toggle class instead of style

const button = document.querySelector("button");
const div = document.querySelector(div);
button.onClick = () => {
  // toggle class
  div.classList.toggle("is-clicked");

  // toggle style
  div.style.backgroundColor = "red";
};

2. Batch operation

// bad code
const div1 = document.querySelector("#div1");
div1.style.backgroundColor = "red";

const div2 = document.querySelector("#div1");
div1.style.backgroundColor = "red";

const div3 = document.querySelector("#div1");
div1.style.backgroundColor = "red";

// good code
const div1 = document.querySelector("#div1");
const div2 = document.querySelector("#div1");
const div3 = document.querySelector("#div1");

div1.style.backgroundColor = "red";
div1.style.backgroundColor = "red";
div1.style.backgroundColor = "red";

Instead of separating the code, put the code together. Another library I have used is FastDom. This library automatically batch the operations for you, so that it makes your dom lightening fast.

Chrome devTools for inspecting reflow and repaint

Chrome provides a very good tools for us to anaylse the repaint and reflow, so we can improve base on the results. To use the tools go to Inspect > Performance. Clicke the record button, perform your operation then you will get something like I show above.

Here I found a nice video on how to use the performance tab.

2. Z-index and layer

Imagine the stacking context as stacks of layers, one layer on top of each other. And z-index, specified by a positive, zero or negative value on a positioned element (position: absolute/ relative/ fixed) determines the order of the layer.

More detail explanation can be found here

This articles gives a list on scenarios that will form a stacking context.

Chrome devTools for inspecting layer

For inspecting layer go to inspect > customize and control devTools (the three little gray dotts in the top right corners) > more tools > layer and you will see the following

Managing z-index

z-index becomes a problem when developer starts putting arbitrary number like z-index: 9999. The stacking context becomes very messy as the order and relation of each z-index are not clear.

Here gives a good solution on how to manage z-index.

Basically put the system looks like this, which makes the whole relation of different layers very clear.

const base = 0;
const above = 1;

export const backdrop = base;
export const openButton = above + backdrop;
export const dropdown = above + openButton;