Add post about mocking

_posts/2019-03-21-mocking-with-jest.md

+---
+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.