How to use jest.fn()
Jest is a powerful and popular JavaScript testing framework maintained by Facebook. It’s designed to make testing simple and enjoyable for developers by providing a delightful and intuitive testing experience.
Among its array of utilities of Jest, jest.fn() shines as a fundamental tool for creating mock functions, facilitating robust and focused testing practices.
Understanding jest.fn()
jest.fn() is a Jest method primarily used for generating mock functions. These mock functions replicate the behavior of actual functions within your codebase, enabling controlled testing scenarios without executing the original functions themselves.
Basic usage
The syntax for creating a mock function with jest.fn() is straightforward:
const mockFunction = jest.fn();
This single line of code creates a mock function named mockFunction. However, the true potential of jest.fn() is unveiled when you manipulate these mock functions for testing purposes.
Mocking behavior
jest.fn() allows us to define specific behavior for the mock function, including return values and implementation logic:
const mockFunction = jest.fn();mockFunction.mockReturnValue('mocked value');const result = mockFunction();
In the above code, the result will be mocked value.
Mock implementation
Let's see the implementation of the mock function.
const mockFunction = jest.fn((a, b) => a + b);const result = mockFunction(2, 3);
In the provided code, a mock function is defined to accept two values and add them together. Following its definition, the mock function is invoked in line 2, resulting in a returned value of 5.
Testing scenarios
Now, let's test some functions using Jest, a popular JavaScript testing framework.
<!DOCTYPE html>
<html>
<head>
<title>React Testing</title>
<style>
body {
background: #eee;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#app {
width: 600px;
background: white;
border: 1px solid #ddd;
padding: 10px;
margin: 20px auto;
}
#app h1 {
margin-top: 0;
}
.todo p:hover {
cursor: pointer;
}
.done-todo {
text-decoration: line-through;
}
.add-todo {
margin-top: 30px;
border-top: 1px solid #ddd;
padding: 20px 0 10px 0;
}
.add-todo input, .add-todo button {
display: block;
width: 100%;
margin: 5px 0;
padding: 5px 0;
box-sizing: border-box;
font-size: 15px;
}
.add-todo button {
background: #ddd;
border: 1px solid #000;
}
.add-todo button:hover {
cursor: pointer;
}
.todo {
position: relative;
border-bottom: 1px solid #eee;
}
.todo a {
position: absolute;
right: 20px;
top: 0;
}
</style>
</head>
<body>
<div id="app">
</div>
<script src="/dist/bundle.js"></script>
</body>
</html>
Code explanation
In this math.test.js file:
Line 5: Creates a mock function named
mockAdd.Line 7: Use the mock function.
Line 9: Check the result of the mocked function.
Line 10: Check if the function was called once.
Line 11: Check if the function was called with specific arguments.
If any of these conditions (toBe, toHaveBeenCalledTimes, toHaveBeenCalledWith) are not satisfied, the test will not pass. Therefore, all three statements must be true simultaneously for the test to pass successfully.
Conclusion
Jest, with its versatile utilities like jest.fn(), empowers developers to conduct thorough and efficient testing of JavaScript code. By creating mock functions with jest.fn(), developers can simulate various scenarios and behaviors, ensuring robust and focused testing practices. Through this, they can gain confidence in the reliability and functionality of their code. Incorporating Jest into the testing workflow improves the development process by ensuring quality and reliability in software projects.
Free Resources