DEV Community: Jakub Jadczyk

How to write unit test in jest.

Jakub Jadczyk — Sat, 03 Dec 2022 18:02:32 +0000

In this post I will show nice way to create unit test in jest.js.

Create test file first and describe all possible scenarios.

In this case we have 3 scenarios. We just describe how the test looks like without any knowledge about our function.

import { short } from "./short";

describe("short", () => {
  test("If array length < 3 should return array without modification", () => {
    const result = short(["1", "2"]);
    expect(result).toBe(result);
  });

  test("If array length > 3 Should return just first 3 elements of an array if there is no 2nd argument", () => {
    const result = short(["1", "2", "3", "4"]);
    expect(result).toBe(["1", "2", "3"]);
  });

  test("Should consider 2nd argument as a number which describe how long an array could be", () => {
    const result = short(["1", "2", "3", "4"], 2);
    expect(result).toBe(["1", "2"]);
  });
});

Create function that will cover the tests scenarios.

Right now we can create function remembering about the tests we previously described.

const short = (array, number) => {
  if (number) return array.splice(0, number);

  return array.length < 3 ? array : array.splice(0, 3);
};

export default short;

useMemo and useCallback

Jakub Jadczyk — Thu, 01 Dec 2022 20:26:19 +0000

Main reason to use it

The essential idea with useMemo and useCallback is that it makes possible to "remember" a computed value / callback between renders. So we want to use it as a prevention against re-rendering which can use resources in a unwanted way.

useMemo

const calculation = useMemo(()=>{
   heavyCalculation(count)
},[count])

The useMemo Hook accepts a second parameter to declare dependencies. The expensive heavyCalculation function will only run when its dependencies have changed. It will check if the parameter "count" has changed. If not the function will not be re-rendered.

useCallback

const calculation = useCallback((id)=>{
   setUsers(users.filter((user) => user.id !== id))
},[users])

The useCallback Hook also accepts a second parameter to declare dependencies. That's the biggest difference between useMemo and useCallbackis are that the first one get function and return memoized value, the second get function and returns memoized callback.

React life-cycle events in functional components

Jakub Jadczyk — Tue, 29 Nov 2022 19:41:14 +0000

Functional components are easier to deal with. We need less code to get the same result comparing to Class components.

So the question is: how to deal with life-cycle events? The answer is hook useEffect.
This hook is equivalent to life cycle methods componentDidMount, componentDidUpdate and componentWillUnmount.

import React, { useEffect } from 'react';
const ourComponent => () => {
   useEffect( () => {
      // Anything in here is fired on component mount.
   });
}

How many times this code inside will be executed depends on array of dependencies passed as a second argument.
If we don't pass any array (even empty) our effect will be fired with every render.
If we want to execute effect only on first render we need to pass empty array.

useEffect(() => {
   console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once

If we pass value inside array in second parameter, the effect will be fired only when the value from previous render is not the same.

const[state, setState] = useState(0); 
     useEffect(() => { 
          console.log(state); 
          // since we are using state, we have 
          // to pass it as a dependency 
     }, [state])

We can manage componentWillUnmount adding return function inside effect. Everything inside return will be fired when component unmounts.

const ComponentExample => () => {
    useEffect(() => {
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}

There is also possibility to use it in both situations. componentDidMount and componentWillUnmount

const ComponentExample => () => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}