Blog

Belajar React Native - React Native Testing

by
published on
Belajar React Native - React Native Testing

Dalam pemrograman, kita dituntut untuk menulis kode yang berkualitas.

Dengan menulis kode yang berkualitas, diharapkan kita dapat meminimalisasi kesalahan dalam kode tersebut.

Salah satu cara untuk meminimalisasi kesalahan dalam kode adalah dengan melakukan testing.

Testing adalah sebuah proses untuk mengevaluasi sistem atau komponennya.

Testing dilakukan untuk memastikan bahwa sebuah sistem atau komponennya memenuhi requirement.

Testing ada tingkatan-tingkatannya:

  • Functional Testing.
  • Unit Testing.
  • Integration Testing.
  • System Testing.
  • Regression Testing.
  • Acceptance Testing.
  • Alpha Testing.
  • Beta Testing.
  • Snapshot Testing

Untuk melakukan snapshot testing di React Native, kita menggunakan Jest.

Tujuan dari snapshot testing adalah mengcapture snapshot dari large object untuk menyederhanakan testing dan untuk menganalisis bagaimana object tersebut berubah seiring dengan waktu.

Snapshot testing ini bisa dikategorikan sebagai unit testing.

Melakukan Testing Pertama Anda

Agar lebih mudah dipahami, Anda akan belajar testing dengan Jest sambil praktek.

Pertama, buatlah sebuah project React Native bernama "TestingDemo":

react-native init TestingDemo

Tunggu sampai project selesai dibuat.

Setelah selesai dibuat, ubah file "App.js" menjadi seperti ini:

import React, {Component} from 'react';
import { Text, View} from 'react-native';

class App extends Component {
	render() {
		return (
			<View>
				<Text>Ini adalah React Native!</Text>
				<Text>Mencoba snapshot testing.</Text>
			</View>
		);
	}
}

export default App;

Selanjutnya, ubah file "_test_/App-test.js" menjadi seperti ini:

/**
* @format
*/

import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
	const tree = renderer.create(<App />).toJSON();
	expect(tree).toMatchSnapshot();
});

Kali ini, Anda tidak perlu menjalankan emulator.

Cukup jalankan:

npm test

Pada PowerShell di folder "TestingDemo".

Nanti hasilnya seperti ini:

> TestingDemo@0.0.1 test H:\Release-John Doe\Ebook\Javascript for Everything\Codes\Bagian
4\_raw\TestingDemo
> jest
PASS __tests__/App-test.js
√ renders correctly (387ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 2.819s, estimated 8s
Ran all test suites.

Bagaimana? Cukup mudah bukan?

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.