Fakultas Ilmu Komputer UI

Commit f6ddbe8b authored by Tirta Abimanyu Purnomo's avatar Tirta Abimanyu Purnomo
Browse files

Add post about mocking

parent aec3b648
---
layout: post
title: Mocking with Jest
date: 2019-03-21 00:05:42 +0700
author: abi
---
Cara kami melakukan mocking menggunakan Jest.
<!--more-->
Ketika kita membuat unit/integration test, kita harus mengisolasi sebuah fungsi dari side effect yang ada. Agar lebih mudah menjelaskannya saya akan memakai contoh kasus ketika ingin mengetes component Servers di project kami.
```
import React, { Component } from "react";
...
import API from "services/api.js";
export default class Servers extends Component {
constructor() {
super();
this.state = {
servers: [],
active: null,
page: 1
};
}
componentDidMount() {
API.getServers(this.state.page).then(response => {
this.setState({ servers: response.data.results });
});
}
setActive(id) {
return API.getServerDetail(id).then(response => {
this.setState({ active: response.data });
});
}
renderList(servers) {
return servers.map(server => (
<Card
...
onClick={() => {
this.setActive(server.id);
}}
>
...
</Card>
));
}
renderDetail(server) {
return (
...
);
}
render() {
return (
<div className="servers-container">
<div className="sidebar-container">
<div className="sidebar-title-container">
<h3 className="sidebar-title">Servers</h3>
</div>
{this.state.servers ? this.renderList(this.state.servers) : null}
</div>
{this.state.active ? this.renderDetail(this.state.active) : null}
</div>
);
}
}
```
Untuk mengambil data server apa saja yang ada, saya memanggil fungsi API.getServers() di componentDidMount(). Ketika ingin mengetes apakah list server ditampilkan, seharusnya kita tidak lagi bergantung dengan fungsi API.getServers() karena sudah diluar dari scope, dan diasumsikan fungsi getServers selalu berhasil dijalankan.
Untuk mengatasinya, kita harus melakukan mocking pada class API. Caranya? Dengan menggunakan Jest.
```
import React from "react";
import { shallow, mount } from "enzyme";
import Servers from "./Servers";
import API from "services/api.js";
jest.mock("services/api.js");
it("should render servers content successfully", () => {
API.getServers.mockResolvedValue({
status: 200,
msg: null,
data: {
count: 1,
next: null,
previous: null,
results: [
{
ip: "192.88.96.46",
name: "Amber",
id: 1
}
]
}
});
API.getServerDetail.mockResolvedValue({
status: 200,
msg: null,
data: {
ip: "192.88.96.46",
name: "Amber",
id: 1
}
});
const servers = mount(<Servers />);
servers
.instance()
.setActive(1)
.then(() => {
expect(servers.find(".servers-main-container").length).toBeGreaterThan(0);
});
});
```
Fungsi jest.mock() menyebabkan semua fungsi di class API bisa dimock hasilnya. Jest menyediakan banyak fungsi untuk melakukan mocking terhadap return dari suatu fungsi tergantung tipe returnnya. Karena fungsi getServers merupakan promise, maka fungsi yang sesuai adalah mockResolvedValue().
Di test diatas, ketika kode memanggil fungsi getServers dan getServerDetail, aplikasi tidak akan memanggil fungsi aslinya, namun akan langsung mereturn value yang sudah ditentukan di fungsi mockResolvedValue.
Dengan begitu, kita dapat mengisolasi suatu fungsi agar bisa ditest dengan baik.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment