function and state testing

1.新建組件(Component)

新建 root/app/Home.js

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

export default class Home extends Component {

 constructor() {
   super();
   this.state = {
     data: 'test', 
   };
 }

  changeState(s) {
    this.setState({data: s});
  }

  doubleInput(x) {
    return x * 5;
  }

  render() {
    return (
      <View style={styles.wrapper}>
        <Text style={styles.text}>Home Component</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex:1, 
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 14,
  }
})

2.撰寫test case

__tests__/HomeFunState-test.js

import 'react-native';
import React from 'react';
import Home from '../app/Home';
import renderer from 'react-test-renderer';

it('function and state test case in Home.js', ()=>{
  let HomeData = renderer.create(<Home />).getInstance();

  expect(HomeData.doubleInput(2)).toEqual(10);
})

3.執行HomeFunState-test.js 此頁 test

$ yarn test HomeFunState-test.js

test成功，如下圖

ps.故意將toEqual(10)修改成toEqual(5)，造成test失敗，會如下圖

4.state test case

import 'react-native';
import React from 'react';
import Home from '../app/Home';
import renderer from 'react-test-renderer';

it('function and state test case in Home.js', ()=>{
  let HomeData = renderer.create(<Home />).getInstance();
//   console.log(HomeData);
  expect(HomeData.doubleInput(2)).toEqual(10);
  expect(HomeData.state.data).toEqual('test');

  HomeData.changeState('change');
  expect(HomeData.state.data).toEqual('change');
})

console.log 查看內容

HomeFunState-test.js 內加入 console.log(HomeData);

import 'react-native';
import React from 'react';
import Home from '../app/Home';
import renderer from 'react-test-renderer';

it('function and state test case in Home.js', ()=>{
  let HomeData = renderer.create(<Home />).getInstance();
  console.log(HomeData);
})

執行 test 透過console.log打印，可查看HomeData的所有內容

參考

• React-Native Test with Jest # 2 function and state testing