Modern ways of UI end to end testing with Cypress


If you would have asked me few days weeks ago, to setup a complete build and boiler system for new react project, i would have handed you a [C.R.A](https://github.com/facebook/create-react-app).
So if your response is the same, this blog post is for you.

All the headings point to git commits, so you can browse the project at that title/step state in Github.

## Prepare new project

### [Add package json](https://github.com/M-ZubairAhmed/react-scaffolding-kit/tree/9056c5bfa7e699ae6cba6c5325ca36d9934c737f)

Start with an empty folder and run `yarn init`. This will ask you bunch of questions and make file such as `package.json` for you. You can fill in your project name and other details.

### [Install react libraries](https://github.com/M-ZubairAhmed/react-scaffolding-kit/tree/92c95d6ee96e9991e8e56cb27959be6ae4530a92)

Install React and its dom library

```bash
yarn add react react-dom
```

### [Install webpack](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/29e5cdb7463dc404f74506918f72cf6cb3302427)

Install core [webpack](https://github.com/webpack/webpack) package as \*devDependencies and along with that lets also add another two webpack packages; [webpack cli](https://github.com/webpack/webpack-cli), which will be required if we are to run webpack with command line or via npm scripts and [webpack-dev-server](https://github.com/webpack/webpack-dev-server), this packages gets us up and running our local dev environment without too much hassle of making our own server.

```bash
yarn add --dev webpack webpack-cli webpack-dev-server
```

_\* devDependencies : are those packages which you would not like to include in the app, but only while building or developing them._

### [Install prettier](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/7d0474cba6fda4a579b2e6ff0d5dc6e07d50b506)

[Prettier](https://prettier.io/) provides beautifully code formatting. As this has nothing to do with the production code, we are only going to use it while developing code, So install this as devDependency too.

```bash
yarn add prettier --dev --exact
```

There are lots of configurations available to suite your preferences. Head over to [docs](https://prettier.io/docs/en/options.html) to configure. Make a new file with name `prettier.config.js` in your root and Add this just two configuration to it. Feel free to add your own later.

```javascript
module.exports = {
  trailingComma: "all",
  semi: false,
};
```

### [Write some react code](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/491dd4a9f5168232c2afe4c988051d9c49d35dee)

Create a folder named `src` in your root and add files `index.js` to it.
Index.js will be starting point of src. Currently the file is simple, it can be extended later. Follow [here](https://reactjs.org/docs/hello-world.html) to lean how to write react code.

```javascript
import React from "react";
import { render } from "react-dom";

const App = () => (
  <div>
    <h1>React scaffolding kit</h1>
    <strong>An opinionated but customizable react starter kit</strong>
  </div>
);

render(<App />, document.getElementById("REACT_ROOT"));
```

### [Run the app](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/ea1684f0005f076ef85601582d6b8968dcfbb818)

Lets make use of `webpack-dev-server` we installed earlier to run the app. Its a good idea to have a start script in package.json for easy start up. Add the start script in `package.json`.

```json
"scripts": {
    "start":"node_modules/.bin/webpack-dev-server",
  },
```

Now app can start with a simple command in terminal

```bash
yarn start
```

You might see webpack related content appearing in your terminal and finally ending with an error. If error is something on the lines of **You may need an appropriate loader to handle this file type** or related. Then don't worry you have followed instructions correctly. Lets tackle that error in next section. Go drink a glass of water.
On side note, You might have noticed that webpack was able to identify the code you wrote in _src/index.js_ without you having to provide it with any configuration. Thats because webpack now provides lots of default to get you going soon. Hence placing `index.js` file under `src` was the [default entry point](https://webpack.js.org/concepts#entry) for webpack.

### Transpile Javascript code

The error we stumbled, means our server wasn't able to understand the code we wrote. It was not compatible with what usually browsers understand. To be able to make it understand we transpile our code to much better browser understanding code with [Babeljs](https://babeljs.io).

### [Install babeljs](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/842e57e18cbdfa2bd2c5b5d129049919497b7c95)

```bash
yarn add --dev @babel/core
```

Babel core installs the core functionality of the babel library. In order to make webpack aware of babel and say hey! webpack i want babel to transpile my code before you can do your stuff, we will add another package

```bash
yarn add --dev babel-loader
```

### [Connecting babel and webpack](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/f1ece0ce227b351fff4892955e3bb46574a1d4a0)

By adding the package, webpack still wont be aware of babel. To do that lets add in a configuration file for webpack, and name it `webpack.dev.config.js`. Why dev in the name ? thats because we would like to keep our production and dev webpack configuration separate.

```javascript
module.exports = {
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }],
  },
};
```

With the above we are saying that we would first like to run [babel-loader](https://github.com/babel/babel-loader) on all **js** file except the ones in `node_modules`

### [Configuring babel](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/c2ce7526e0bed1a3b72081009a66ec8747292f0b)

Ok, now you've configured Babel but you haven't made it actually do anything. Lets create `babel.config.js` in our root. Babel depends on many plugins to do its job. These plugin contains instruction on how to parse the code to more compatible one.
Lets add few plugins that we require. To start, add [env preset](https://babeljs.io/docs/en/babel-preset-env), which enables transforms for ES2015+ and [react preset](https://babeljs.io/docs/en/babel-preset-react), which contains most common plugin used along with React. You are free to add and [include others](https://babeljs.io/docs/en/plugins). Presets are just a bunch of plugins grouped together.

```javascript
module.exports = function (api) {
  if (api) {
    //   https://babeljs.io/docs/en/config-files#apicache
    api.cache.using(() => process.env.NODE_ENV);
  }

  const presets = ["@babel/preset-env", "@babel/preset-react"];

  const plugins = [];

  return {
    presets,
    plugins,
  };
};
```

### [Start the app again](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/6bd27dae7a1c1fa5e3e55e378f2d3500e6753f72)

Lets run the start command we ran previously. Just a slight modification before we start, we need to tell _webpack dev server_ to read config from the new `webpack.dev.config.js` file we created earlier.

```json
"start": "node_modules/.bin/webpack-dev-server --config webpack.dev.config.js",
```

Now you must be seeing that our terminal didn't threw any error when we starter the server. You may now go to the localhost which is mentioned there. Don't be disappointed if you see just bunch of folders over in your website, we haven't configured the app to output **HTML** yet so its just showing us the content of the website instead.

### [Make app spit html](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/7612a5cb99635fb0d87b983304ac3a1264893269)

Webpack contains ecosystem of plugins and loaders. To enable webpack to output html, we are going to add in [HTML webpack plugin](https://webpack.js.org/plugins/html-webpack-plugin/).

```bash
yarn add --dev html-webpack-plugin
```

Create an html file, which will be served by our app in _src_ folder and add just the simple HTML5 supporting content. Remember [we asked](#write-some-react-code) react to find element id `REACT_ROOT`, include that too so that our react apps renders on that element tree.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>React scaffolding kit</title>
  </head>

  <body>
    <div id="REACT_ROOT"></div>
  </body>
</html>
```

Now we need to configure webpack and ask it to take our html as template and output that instead. All webpack configurations are done in webpack config file. Add a new key `plugins` for webpack object and import our newly added plugin. The plugin can now be added to plugins array. We will ask it to use the html we just created by providing `template` option.

```js
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};
```

Once its done, you can restart the app from _start_ script. Now the app should greet you with **React scaffolding kit** written big in H1 tags.

### [Add styling](https://github.com/M-ZubairAhmed/react-scaffolding-kit/commit/9b02e51d8b35b554c3e2f3407a48ea8af5ee12e2)

The app looks rather bland, lets now add the ability to add styles. I am going to add **SCSS** support because i feel thats the best way to write CSS. Create a new file inside src directory and name it `index.scss`.

```scss
h1 {
  color: blue;
}
```

Include the styles in your `index.js` by importing them.

```js
import "./index.scss";
```

But as you have noticed, styling doesn't seems to be picked up by the app. Reason for that there is only so much webpack can do on its own. We will have to provide a way for webpack to include the styling in the app, here comes webpack loaders to rescue.

```sh
yarn add --dev style-loader css-loader sass-loader node-sass
```

Lets look at what those are by adding them in the configuration. Add a new object inside your `models/rules` in webpack config.

```js
{
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader",
    ],
},
```

Here we are telling webpack to take all our scss files, convert them from scss to css (via sass-loader), resolve css syntax such as _import_ or _url_ (via css-loader) and then take the compiled css and load it up inside `<style>` under our html's head tag (via style-loader). We have also include node-sass as its required to internal working of sass-loader.

## Recap

Congratulations you have now a minimal react app bootstrapped with webpack up and running. If you have come till here, you deserve an applause.

Lets see what have we done till now

- [x] Installed required libraries such as react , webpack etc.
- [x] Setup prettier for code formatting
- [x] Added webpack and a basic configuration
- [x] Configured Babel and connected it to webpack
- [x] Attached plugin to render HTML from webpack
- [x] Styled app with scss and styling loaders

## More setup

Communities around react, webpack etc are huge, as such we have some very powerful support libraries, plugins to work with. Let see what more we could do with the above setup

- [ ] We could add [separate webpack config](https://webpack.js.org/configuration/#use-different-config-file) for production use.
- [ ] Add more webpack plugins as required such as one for [copying assets folder](https://webpack.js.org/plugins/copy-webpack-plugin/#root), [minimizing css files](https://webpack.js.org/plugins/mini-css-extract-plugin/#root), [adding global constants](https://webpack.js.org/plugins/define-plugin), [optimizing the build](https://webpack.js.org/configuration/optimization/#root).
- [ ] Have webpack [code split](https://webpack.js.org/guides/code-splitting/#root) with split chunks.
- [ ] Have [resolved path](https://webpack.js.org/configuration/resolve/#root) to our source file, so we can directly import like we do for node_modules.
- [ ] Ability to Write and transpile latest ES code with [additional babel plugins](https://babeljs.io/docs/en/plugins).
- [ ] Make robust server in your choice language for [serving production code](https://webpack.js.org/guides/production/#root).
- [ ] and much more

> The configuration and build one uses for production varies from application to application.

This blog post purpose was to get you familiar with setting up a tiny, less configuration webpack setup for you next react project.


Setting up webpack for react project doesnt have to be scary


Fetch API have come a long way into becoming a more mature, stable and supportive Web API. We use it extensively in our app. However we weren’t using its abort-able functionality i.e to stop or terminate requests in mid way. Support for abort able fetch was proposed in 2̶0̶1̶5̶ forever ago. Then in 2017 it finally was included in the standard and Edge was first to support it. Now it [mostly supported](https://caniuse.com/#feat=abortcontroller) amongst browsers.

### The poly fill

Still to support other browsers we use `whatwg-fetch` , which is a polyfill that implements Fetch whatwg [specifications](https://fetch.spec.whatwg.org/). In addition to that, we had to see if abort able feature was natively supported in the browser ; if not then we use poly filled fetch.

```javascript
import { fetch as fetchPloyfilled } from "whatwg-fetch";

const isAbortableFetchSupported = "signal" in new Request("");

const _fetch = isAbortableFetchSupported ? window.fetch : fetchPloyfilled;

// _fetch is then passed down via props to be used in app
```

### Preparing for aborting

Promises are aborted using the new API provided by the DOM standard. We create a new instance of `AbortController`. From this controller we grab a reference to `AbortSignal` object using the `AbortController.signal` property. This `AbortSignal` can then be passed on to fetch in its options.

```javascript
const abortController = new AbortController();
const abortSignal = abortController.signal

..
...

// later in fetch

await this.props.fetch(requestURL, {
    method: 'GET',
    signal: abortSignal
    })

```

### Aborting

```javascript
abortController.abort();
```

Calling the above method will stop your fetch promise and throw an error, which you will need to catch and handle properly.

```javascript
(err.name === 'AbortError') {
console.error(’fetch safely aborted for quick stats’, err);
}
```

### Why abort at all?

Are you familiar with “Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op”. This usually happens if you have a state that is dependent on after effects of your network call, and the context in which that call was made is lost. In simple terms : You went to a page, that started a network request to get list of stuff. You then quickly navigated away to another page. There might be a state responsible for getting list and updating the UI. But now since you navigated away , setState was still called on the former page which is now unmounted. And hence the warning. Its important to take care of it as it leads to memory leaks and uncertainty.

> We abort all our network request in componentWillMount

That way we make sure no setStates are called if fetch request are aborted.


The Abort-able Fetch


The first question i get is why use Fetch API instead of Axios library. Well there are many post online which do well to show the similarities and differences in both libraries. Well for us what worked will be discussed some other time.

Lets jump to the post.

### Current situation

Our fetch calls are long and cumbersome to write.

```javascript
await fetch(URL_GOES_HERE, {
   method: 'GET',
   mode: 'cors',
   credentials: 'same-origin',
   headers: {
     Authorization: `token ${this.props.user.loggedInUser.token}`,
     'Accept-Language': language,
     'Content-Type'] = 'application/json'
   }
 }
);
```

That's a lot of code to just “GET” from the API. Most of the above boiler plate code is repeated for other similar fetch functions across the app. It was evident that mode, credentials, headers can be abstracted out and shared with other fetch functions.

### Improvement

To be able to do this effectively, a createFetch wrapper was created which will pass default values to fetch. This new wrapper fetch was then passed down to app via Context React API.

```javascript
context.fetch = createFetch(window.fetch, {
    baseUrl: context.apiConfig.apiUrl,
    language: store.getState().intl.locale,
    authToken: store.getState().user.loggedInUser.token
```

You might be wondering where does token come even before app is started. So this context is created after appropriate APIs are called just before starting the app.

The createFetch wrapper consists of defaults which will add to the options of fetch function. As mentioned below :

#### Headers

```javascript
let options = {};

// language variable is passed down from createFetch params.
options.headers[’Accept-Language’] = language;


// Since mostly JSON object is returned.
options.headers[’Content-Type’] = 'application/json’;


// authToken variable is passed from createFetch params.
options.headers.Authorization = `token ${authToken}`;
```

#### Mode

```javascript
options.mode = "cors";
```

#### Credentials

```javascript
options.credentials = "same-origin";
```

All the above options are only alloted if they are not explicitly passed. Concluding the defaults we then return the function as follows:

```javascript
fetch(url, options);
```

End result

```javascript
await this.props.fetch(URL_GOES_HERE, {
  method: "GET",
});
```

This resulted in a clean and crisp fetch function. Since it was passed down though context, fetch was accessed via props. However the above function is completely flexible to other values.

> The default values can be overridden if required, to bring in different options.


The Abominable Fetch


We had this constant error showing up in our development logs :

> squelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/sequelize/lib/sequelize.js:236:13

On simple google search, lead me to this huge issue on GitHub [https://github.com/sequelize/sequelize/issues/8417](https://github.com/sequelize/sequelize/issues/8417).

Conversation over there is huge, there seems to be many potentials solutions, the ones which collaborators most suggested was to disable operator aliasing. So any string based operator will be disabled without any aliases instead symbol based built in operators will be used. This prevents cross site attacks.

```javascript
const sequelize = new Sequelize(config.databaseUrl, {
  operatorsAliases: false,
});
```

[Follow here](https://github.com/sequelize/sequelize/issues/8417#issuecomment-341617577) for even in detail explanation.


Fixing a very common warning of Sequelize.js


We have used bluebird because it was one of the best libraries for promises. But then promises have gained support in both nodejs and browser. That was the easy catch so we decided to remove it from our code base.

The functions we were using of that library were

- [BlueBirdPromise.promisify](http://bluebirdjs.com/docs/api/promise.promisify.html)
- [BlueBirdPromise.delay](http://bluebirdjs.com/docs/api/promise.delay.html)

### Promisify

Node.js ships with `util` api which provides same requirement as that of bluebird.

The method works by taking in the common error-first callback-style functions and returns a promises.

```javascript
// Before

import Promise from "bluebird";
const readFile = Promise.promisify(fs.readFile);

// After

import util from "util";
const readFile = util.promisify(fs.readFile);
```

### Delay

Purpose of this method is to returns a promise that will be resolved after given milliseconds. Native way to do this was to promisify setTimeout function.

```javascript
// Before

import Promise from "bluebird";
await Promise.delay(1000);

// After

import util from "util";
const setTimeoutAsync = util.promisify(setTimeout);
await setTimeoutAsync(null, 1000);
```


M Zubair Ahmed

Software Engineer

Talks #

The Curious Case of Micro Frontends

Federated modules and Monorepo at Mattermost

Getting a remote developer job in 2023 ft. M Zubair Ahmed

Finding memory leaks with Chrome DevTools

Cypress JS can't do that?

Mattermost's top contributors AMA

Overcoming fears to participate in Hackathons

Making a live contribution to an open source project

How to contribute to large open source projects?

Modern ways of end to end testing with Cypress JS

Making Webpack less scary for React apps

Code walkthrough of Coderplex's app in React And Django

Getting started with React

Blog #

Modern ways of UI end to end testing with Cypress

Setting up webpack for react project doesnt have to be scary

The Abort-able Fetch

The Abominable Fetch

Fixing a very common warning of Sequelize.js

Migrating Bluebird promises to native ones