Unit Tests VS Integration Tests

Unit Tests vs. Integration Tests

While developing the front end you’ll need to be familiar with 2 types of tests for the application.

• Unit Tests
• Integration Tests

Here are the few key differences between Unit Tests and Integration Tests.

Let’s jump directly into the code, Shall we?

Now following are the few snippets for both the test cases designed in React.

Let’s take a look at them one by one.

A unit test is a test written by the programmer to verify that a relatively small piece of code is doing what it is intended to do. They are narrow in scope, they should be easy to write and execute, and their effectiveness depends on what the programmer considers to be useful..

Now if you look at it, Following test case is for checking a button which should be disabled when the page loads. This goes like, Rendering an element, Getting the instance of the button Get Users List, And checking if it is disabled. Very simple right?

// Unit Test - Checking if the button is enabled on page load

test(‘GetUsers button should be enabled on load’, async () => {

render(<UserList />);

const GetUsersButton = screen.getByText(‘Get Users List’);

expect(GetUsersButton).toBeEnabled();

});

Integration tests do a more convincing job of demonstrating the system works (especially to non-programmers) than a set of unit tests can, at least to the extent the integration test environment resembles production.

Here you can see an Integration Test case. It is used to check multiple scenarios fused together.

Clicking on the Get User List button, checking button enabled/disabled status, fetching User List from the server and checking if it is saved in store.

// Integration Test

// Making API call on clicking on a button

// Updating fetched data in the store

// Checking updated list in the store

test(‘Fetch Users List and update list in the store’, async () => {

render(<Photo />);

const GetUsersButton = screen.getByText(‘Get User List’);

expect(GetUsersButton).toBeEnabled();

fireEvent.click(GetUsersButton);

expect(GetUsersButton).toBeDisabled();

await waitForElementToBeRemoved(() =>

document.querySelector(‘#loader’));

expect(store.users.size).toBe(10);

expect(GetUsersButton).toBeEnabled();

});

Another example of integration test.

// Integration Test

// Get the input

// Add input value as ‘Sample Todo’

// Click on Add Todo button

// Check if respective todo list item is defined in screen

test(‘Entering a todo in form adds a todo’, async () => {

render(<Photo />);

const todoInput = screen.getByPlaceholderText(‘Enter todo text’);

todoInput.value = ‘Sample todo’;

const todoAddButton = screen.getByText(‘Add Todo’);

fireEvent.click(todoAddButton);

const checkAddedInput = screen.getByTestId(‘Sample todo’)

expect(checkAddedInput).toBeDefined();

});

• An integration test is done to demonstrate that different pieces of the system work together.
• Integration tests can cover whole applications, and they require much more effort to put together.
• They usually require resources like database instances and hardware to be allocated for them.

Conclusion :

Unit tests are written for a single piece of code not depending on other modules.

Integration tests are written for multiple functionalities/modules working together.

Code Demo : https://codesandbox.io/s/nifty-cray-t7lsb?file=/src/Photo.test.js

Cheers!!

Sangwin Gawande

About me : https://sangw.in