DEV Community: Prasanna Shandilya

JEST (HOW TO MOCK)

Prasanna Shandilya — Sat, 18 Jul 2020 19:34:14 +0000

What is Mock?

According to Jest documentation:-

Mock functions make it easy to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls).

Lets Mock now:-

1.) Mock Functions

const mockFn = jest.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

2.) Mock function to return value (mockReturnValue , mockImplementation)

You can provide a value to be returned by the mock by calling the mockReturnValue() function.

  const mockFn = jest.fn();
  myMock.mockReturnValue("hello");
  expect(mockFn()).toBe("hello");

With mockReturnValue it does not matter what arguments you are passing to it,
but in some cases, it may be useful to return a value from your mock, based on arguments given to it. This can be achieved by mockImplementation() function.

let store = {}
jest.fn().mockImplementation((key, value) => {
    store[key] = value;
}),

3.) Mock Fetch call

You can also mock the implementation for asynchronous functions. In this case, just return a promise from the implementation.

     global.fetch = jest.fn().mockImplementation(() =>
      Promise.resolve({
        status:200,
        statusText:"success",
        json: () => {
          return { ok: true, result:data, };   // return result which you expect from api
        }
      })
    );

4.) Mock imported file

There may be a case where your component is importing some other modules or icons but you don't want to handle it.
In that case, mock the whole path to return a string

jest.mock("file/pathname", () => "Module");

5.) JEST Mock Imported Function from different file

Let's combine above two points, a situation where you are making an async call in the imported file

import * as utils from "./LoginUtils";
utils.postToLogin = jest.fn().mockImplementation(() =>{
    let userLogin=new Promise((resolve, reject)=>{
      return resolve({status:"OK"})
    })
    return userLogin;
   }
 );

6.) Mock localStorage, sessionstorage, cookie

Using mockImplementation you can also mock localstorage

let store = {};
global.localStorage = {
  setItem: jest.fn().mockImplementation((key, value) => {
    JSON.stringify((store[key] = value));
  }),
  getItem: jest.fn().mockImplementation(key => store[key])
};

7.) Mock REFS

First, create an instance of your component, then we can mock refs by

tree.instance().refs = {target:something}

Example:-

const instance_refs = tree.instance();
    let mockFunction=jest.fn();
    instance_refs.refs = {
           yourRefName:{getWrappedInstance:()=>{return({changePaginationDetails:mockFunction})}}           
        }; 
    instance_refs.changeCurrentPage();

8.) setTimeout, setInterval, clearTimeout, clearInterval

Jest provides us with timer functions useFakeTimers and runAllTimers to mock timers

jest.useFakeTimers();

test('waits for timer', () => {
  jest.runAllTimers();
  expect(something).toHaveBeenCalled();
});

9.) How to mock react portal (Example to test modal )

Let's test the modal component created using the React portal. this modal mounts to a dom node on the root of the "body"

Modal code:-

import React from "react";
import ReactDOM from "react-dom";

export default props => {
  const domNode = document.getElementById("fullPageModal");
  const modal = <div className="fullPageModal">{props.children}</div>;
  return ReactDOM.createPortal(modal, domNode);
};

First, we need to add a div with #fullPageModal id to the global body

Test-

describe("FullPageModal component", () => {
  let component;
  const Child = () => <div>Yolo</div>;

  // add a div with #fullPageModal id to the global body
  const modalRoot = global.document.createElement("div");
  modalRoot.setAttribute("id", "fullPageModal");
  const body = global.document.querySelector("body");
  body.appendChild(modalRoot);

  beforeEach(() => {
    component = mount(
      <FullPageModal>
        <Child />
      </FullPageModal>
    );
  });

it("should render Modal, on dom node fullPageModal", () => {
    const domNode = global.document.getElementById("fullPageModal");
    expect(component.find(".fullPageModal").exists()).to.equal(true);
  });
});

Please share your experience also where you have mocked something, would love to read it.

How to implement loadable components for bundle splitting with SSR support.

Prasanna Shandilya — Sun, 31 May 2020 20:24:36 +0000

Before Jumping into code spitting using loadable lets understand some concepts:-

Client-side rendering vs Server-side rendering

In Client-Side Rendering, browser downloads a minimal HTML page, then it renders the JavaScript and fills the content into it.

In Server-side rendering, on the other hand, browser renders components on the server. output is HTML which is already filled with content, so there is no need to fetch any JS.
After that, we need a mechanism to hydrate it on the client-side with your JS and make it functional.

Choosing the right library

1. React.lazy and Suspense

React.lazy provides syntax on top of your bundler’s code splitting (webpack or parcel) and call import when it’s getting rendered within the component.

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content

React.lazy supports SSR
but Suspense does NOT.

Suspense is not available server-side and React.lazy can only work with Suspense. That's why today, React.lazy is not an option if you need Server Side Rendering.

2. Loadable components

@loadable/component provides a complete solution to make Server Side Rendering possible and takes care of synchronously loading components

import loadable from “@loadable/components“;
const MyComponent = loadable(() => import(“../my/component/path.js”), 
{ssr: true});
<MyComponent /> // Just render your Component

here will have its separate javascript bundle and its done using module bundler
there is option to pass object with SSR as key to choose wether you can your component to SSRed or not

If its true, then component gets rendered on the server and then we can hydrate the functionality on the client-side by executing the injected JavaScript from loadable-stats.json

Now lets get into Steps

1. Install `@loadable/babel-plugin`

.babelrc

{
  "plugins": ["@loadable/babel-plugin"]
}

If you don’t want to follow this step, you can add this in the webpack config file where you have plugins for babel defined.

2. Install `@loadable/webpack-plugin`

3. Create a webpack loadable plugin.

webpack.config.js

const LoadablePlugin = require('@loadable/webpack-plugin')
module.exports = {
  // ...
  plugins: [new LoadablePlugin()],
}

new LoadablePlugin({ filename: 'stats.json', writeToDisk: true })

loadable-stats.json

It maintains mapping of all the components by chunk name.

It informs loadable about the component dependencies. It also tells about all the CSS and JS bundles required for that component.

4. Setup ChunkExtractor server-side

ChunkExtractor is a constructor function, that takes loadable-stats.json file as argument and return instance of function of your stats file.

It takes your main app component to this instance and fetch the chunks required for this component.

The chunks we extract using “extractor.collectChunks” is the JSX that will be passed to the renderToString function.

Collecting chunks

The basic API goes as follows:

import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(extractor.collectChunks(<YourApp />))
const scriptTags = extractor.getScriptTags() // or extractor.getScriptElements();

The collectChunks method wraps your element in a provider. Optionally you can use the ChunkExtractorManager provider directly, instead of this method. Just make sure not to use it on the client-side.

getScriptTags- returns a string of script tags which are “async”.

getStyleTags- returns a string of link elements with the “data-chunk” attribute set to the component’s chunk name.

import { renderToString } from 'react-dom/server'
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(
  <ChunkExtractorManager extractor={extractor}>
    <YourApp />
  </ChunkExtractorManager>,
)
const scriptTags = extractor.getScriptTags() // or extractor.getScriptElements();

The extractor.getScriptTags() returns a string of multiple <script> tags marked as "async". You have to wait for them to be ready using loadableReady.

Alternatively the ChunkExtractor also has a getScriptElements() method that returns an array of React elements.

5. Add `loadableReady` client-side

Loadable components loads all your scripts asynchronously to ensure optimal performances. All scripts are loaded in parallel, so you have to wait for them to be ready using loadableReady.

import { loadableReady } from '@loadable/component'
loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})

6. Fallback without Suspense

If in case you have loadable({ssr:false}). You would like to have some loading state.

You can specify a fallback in loadable options.

const OtherComponent = loadable(() => import('./OtherComponent'), {
  fallback: <div>Loading...</div>,
})
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

You can also specify a fallback in props:

const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent fallback={<div>Loading...</div>} />
    </div>
  )
}

THE END
This was quite the ride, wasn’t it? I hope it was helpful, Do share you feedbacks and suggestions. Thanks YOU !!!

How to Lazy Load Images

Prasanna Shandilya — Sat, 22 Feb 2020 19:58:01 +0000

What is lazy loading images?

Lazy loading is a technique that defers the loading of non-critical resources at page load time. Instead, these resources are loaded when required. Where images are concerned, "non-critical" is often synonymous with "below the fold" images
Lazy Loading defers the loading of an image that is not needed on the page immediately. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually become visible. If the user never scrolls, an image that is not visible to the user never gets loaded.

It carries two main advantages.

1. Performance Improvement

With lazy loading, we are reducing the number of images that need to be loaded on the page initially. Lesser resource requests mean lesser bytes to download and lesser competition for the limited network bandwidth available to the user. This ensures that the device is able to download and process the remaining resources much faster. Hence, the page becomes usable much sooner as compared to one without lazy loading.

2. Cost reduction

The second benefit for us is in terms of delivery costs. Image delivery, or delivery of any other asset, is usually charged on the basis of the number of bytes transferred.

Lazy Load Images

1.)Using Intersection Observer

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

It lets you register a callback function that is executed whenever an element you wish to monitor enters or exits another element (or the viewport).

You need to pass option object into Intersection Observer constructor, It has following fields-

root:-

The element that is used as the viewport for checking visibility of the target. Defaults to the viewport.

rootMargin:-

Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages.

threshold:-

It can take either a single number or an array of numbers which indicate at what percentage you want to detect and fire callback. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you pass an array like [0, 0.25, 0.5, 0.75, 1] then callback will run every time visibility passes another 25%. The default is 0 (meaning as soon as even one pixel is visible, the callback will execute).

2.)Using event handlers (Most compatible)

Using event listener on scroll event and every time user scroll to end of the page we can fire the fetch call for more images.
This method works for all the browser.
Note:-Use intersection observer wherever possible, and fall back to event handlers if the widest possible compatibility is a critical application requirement.

3.)Native lazy-loading for the web

Chrome already loads images at different priorities depending on where they're located with respect to the device viewport. Images below the viewport are loaded with a lower priority, but they're still fetched as soon as possible.

In Chrome 76, you can use the loading attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:
If lazy load is not enabled in your browser you can enable it here:- chrome://flags/

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

Here are the supported values for the loading attribute:

->auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
->lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
->eager: Load the resource immediately, regardless of where it's located on the page.

Demo Time:-

This demo shows difference between different approaches discussed above

First radio button is for Intersection Observer, You can see based on rootMargin only three image request is made on load,

Second is for Native chrome support in this case, out of 100 images on load 20 images are fetched

The third one is the default case, in this case, we can see all 100 images are downloaded, even though the user might not scroll that far