This article helps you by providing some interesting tricks to handle certain test case scenarios.

By Akanksha Yadav— A Quick Learner!

Unit testing is quite helpful while writing code, it helps to have smooth debugging, improve the quality of code, reduce the cost of building products, and so on.

In this blog, we will be covering 5 scenarios of unit testing that you may come across while writing code for React components.
We will be using jest@23.6.0, and enzyme@3.9.0 to write the test cases.

1. Testing window.addEventListener resize event

In situations, where you require to get the window size to handle certain views, you use window.addEventListener(‘resize’, callbackFn).

To write a test case for the above event listener function, you can create a resizeWindowFunc function, to set the window.innerWidth and window.innerHeight and dispatch resize events.
Now you can call the resizeWindowFunc with different innerWidth and innerHeight as per the test requirement inside your test case.

Note: You can use window.dispatchEvent(new Event(‘eventName’)), to trigger another window event.

2. Testing window/document object properties

In situations, where you are required to check for certain window/document object properties that exist with a given value, such as if document.readyState ===’loading’.

To write a test case for the above scenario, you can change the document object property readyState value as loading using the Object.defineProperty function, and write configurable as true, so that you can provide different values to readyState and test it.

In the below code, you can replace the document with window and readyState with any window property to test for window properties.

To know more about Object.defineProperty you can refer to the link.

3. Testing the prop function of a child component

In situations, where you have a child component inside a parent component with some parameter passed to it, as given below:

In situations, where you have a child component inside a parent component with some parameter passed to it, as given below:

To write a test case for the above scenario, you can find the child component from your wrapper component using find() and then use the prop() method to execute the respective handleClick function with the parameter as ‘test’.

Note: In case there is no parameter required you can pass empty parentheses.

4. Testing the generator function in the saga file

Generator functions are the functions which are defined in the saga file using *. These return a generator object with a series of values. Each iteration has a yield statement and is called with the next() method, which returns an object like this:

{value: ‘any value’, done:false}

Here,
next().value will return the value for that particular statement.
next().done is a boolean which tells us if the generator function is done or still has other yield statements to run.

Let us assume the below saga.js file, with some generator functions, rootSaga with takeEvery function, and watchSagaFunc function with yield statement.

To write a test case for the above scenario, you can get the rootSaga() function and then use rootS.next().value to return the takeEvery() function. You can then use the expect() method to test the value equal or not.

5. Testing some event attach to the element

In situations, where you have some element(ex. button), with an event attached to it such as onChange and we need to trigger the event.preventDefault() function.

To write a test case for the above scenario, you can find the button element using the find() method, then use simulate() method and pass the preventDefault mocked as jest.fn() as its parameter, to trigger the onChange event.

So, the above scenarios were the ones that I came across while working on unit testing. There are still a lot of testing scenarios that you will get while working on unit test cases. So, keep on exploring while writing test cases to improve your code quality and make it bug free!!

References:

Meet the team!

Author

Akanksha Yadav

Editor

Seema Jain

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!