How we protect our users from bugs

How we protect our users from bugs

Oct 26, 2020

4 mins

Omowunmi Sogunle

Omowunmi Sogunle

At Eyowo, our user’s satisfaction is our core concern...

At Eyowo, our user’s satisfaction is our core concern so we make sure that all our users are well-protected from bugs. Testing is one of various ways to achieve this.

At Eyowo, our user’s satisfaction is our core concern so we make sure that all our users are well-protected from bugs. Testing is one of the various ways to achieve this.

Our web applications rely heavily on React hooks and React custom hooks.

In this article, testing React custom hooks will be explored.

What are React Hooks ?

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Click here to learn more about react hooks.

React Custom Hooks

Traditionally in React, we’ve had two popular ways to share stateful logic between components: render props and higher-order components. Custom Hooks solve many of the same problems without forcing you to add more components to the tree. Another advantage of using custom hooks is that it lets you extract component logic into reusable functions so you don’t have a long line of codes inside your component. In this article, we will be creating a custom hook useEncryption and then write a few tests for it. See the entire code in this article here.

useEncryption Custom Hook

useEncryption is a simple library built on Crypto JS to enable Functional React components to decrypt and encrypt data. Few tests will be written for this simple custom hook.

Let’s get coding!

Open your terminal and paste this command to create a new react-app:

npx create-react-app useEncryption

As earlier stated, we will be using the Crypto JS library. You can grab it and then install it using

yarn add crypto-js

Open src folder, create a new file and name it useEncryption.js file. Copy and paste these lines of code below in the newly created useEncryption.js file.

import CryptoJS from “crypto-js”;

const useEncryption = (key) => {

const encryptData = (data) => {

return CryptoJS.AES.encrypt(data, key).toString();

};

const decryptData = (encryptedData) => {

const bytes = CryptoJS.AES.decrypt(encryptedData, key);

return bytes.toString(CryptoJS.enc.Utf8);

};

return {

encryptData,

decryptData,

};

};

export default useEncryption;

Explanation

The useEncryption hook takes a key as a parameter. The key is an encryption key private to anyone using this custom hook to encrypt and decrypt data. We are also exposing two functions, the encryptData, and the decryptData to enable the user of this hook to have access to its functionality.

In index.js

export { default as useEncryption } from ‘./useEncryption’;

We have a basic implementation of encryption and decryption using a custom hook, so let’s write a test with react-testing-library

Tests

Let’s install all the packages we need to test our custom hook as a dev dependency, using yarn

yarn add -D @testing-library/react

yarn add -D @testing-library/react-hooks

yarn add -D @testing-library/user-event

In src, create a folder and name it tests, and then in the folder, create a file named useEncryption.test.js. We are going to write a test to determine if the custom hook functions do what we expect of it.

In useEncryption.test.js

import { renderHook, act } from “@testing-library/react-hooks”;

import useEncryption from “../useEncryption”;

const encryptionKey = “;.xy.se.”;

test(“it should encrypt a string”, () => {

const { result } = renderHook(() => useEncryption(encryptionKey));

let dataTobeEncrypted = “hello”;

let encryptedData;

act(() => {

encryptedData = result.current.encryptData(dataTobeEncrypted);

});

expect(encryptedData).toHaveLength(44);

});

test(“it should decrypt a string”, () => {

const { result } = renderHook(() => useEncryption(encryptionKey));

let dataTobeEncrypted = “hello”;

let encryptedData;

let decryptedData;

act(() => {

encryptedData = result.current.encryptData(dataTobeEncrypted);

});

act(() => {

decryptedData = result.current.decryptData(encryptedData);

});

expect(decryptedData).toBe(dataTobeEncrypted);

});

Note:

In the code snippet above, Create React App uses Jest as its test runner, renderHook is used to simulate the custom hook and the functions derived from the custom hook. Act is used to simulate a user-event as seen above. See: act.

We run the tests running this command in the terminal

yarn test

All our tests should be passing. Tada!! You can reach out to me on Twitter should you have any questions!

We’re done (for now). In cases where we use our custom hooks to extract the component’s logic, the tests are written a little bit differently in scenarios where the component that uses the custom hook is a child of a higher-order component (E.g Redux Provider). I’ll be writing extensively on that in my next article.

Experience Eyowo now

Join over 3,000,000 people who spend, send, receive, save and borrow money with just their phone number.