Post

Learn To Build React Boilerplate #4

Pada article sebelumnya kita sudah melakukan integrasi antara react dan webpack, membuat addtional NPM, dan index.js yang dinamis. Dan untuk selankjutnya, sebelum kita menambahkan React test, kita perlu mengintegrasikan "Enzym", yaitu suatu library yang akan memungkinkan kita untuk asserting, manipulating dan traversing komponen - komponen react.

Mari kita mulai dengan menginstal Enzyme dan enzyme-adapter-react-16, yang diperlukan untuk menghubungkan Enzyme ke proyek menggunakan react v16 ke atas. Enzyme-adapter-react-16 ini memiliki peer dependencies pada react, react-dom, dan react-test-renderer.

Segera menuju terminal anda dengan active directory pada root project dan lakukan perintah "npm i enzyme enzyme-adapter-react-16 react-test-renderer --save-dev".

Bila sudah, buatlah file "src/enzyme.setup.jd" lalu tambahkan code seperti berikut.

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({
adapter: new Adapter()
})

Lalu kita juga perlu mengconfigurasikan Jest pada package.json kita seperti ini.

{
...
"jest": {
"setupTestFrameworkScriptFile": "./src/enzyme.setup.js"
}
...
}

Selanjutnya mari kita uji App Componen kita i dan memastikannya membuat teks yang diharapkan. Selain itu, kiat akan mengambil snapshot dari komponen tersebut sehingga kita dapat memastikan bahwa strukturnya tidak berubah pada setiap test yang kita lakukan.

Buatlah sebuah file sebagai test case seperti ini "src/client/app.test.js", lalu tambahkan code sebagai berikut.

import App from './app'
import React from 'react'
import {shallow} from 'enzyme'
describe('App', () => {
test('should match snapshot', () => {
const wrapper = shallow(<App/>)
    expect(wrapper.find('div').text()).toBe('Welcome to React Boilerplate App')
expect(wrapper).toMatchSnapshot()
})
})

Namun, bila kita melakukan npm test sekarang, tentunya akan ada beberapa warning yang menyarankan kita untuk memastikan kita memiliki polyfil. Karena itu, pada terminal anda lakukan perintah "npm i raf --save-dev" untuk menginstal sebuah library bernama raf yang merupakan polyfill.

Bila sudah, ubah lagi configurasi Jest pada package.json menjadi seperti ini.

{
...
"jest": {
"setupTestFrameworkScriptFile": "./src/enzyme.setup.js",
"setupFiles": ["raf/polyfill"]
}
...
}

Selanjutnya kita dapat melakukan test sekali lagi dengan perintah npm test.

Setelah menjalankan react test, kita akan melihat file baru di "src/client/snapshots/ app.test.js.snap". File ini berisi struktur serial dari react component kita. File ini harus di check ke dalam Git sehingga dapat digunakan untuk membandingkan dengan snapshot yang dihasilkan secara dinamis selama test running.

Selanjutnya, kita dapat menjalankan web server lagi dengan perintah npm start dan silahkan menuju browser anda untuk mengakses http://localhost:3000 untuk memastikan semua berjalan dengan baik.

Sampai disini, saya harap article ini dapat membantu dan memberikan pada anda sebuah wawasan baru tentang bagaimana memulai suatu project dengan ExpressJs, React, Jest, Webpack, dan Babel.

Selanjutnya, anda dapat melakukan commit dan push project ini pada Github anda ataupun cloud repository anda yang lain. Dan tentunya, merupakan suatu ide bagus bila anda memulai untuk membuat boilerplate pribadi dengan pengembangan anda sendiri.

Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.