test props - Enzyme

此篇使用Enzyme來測試props

enzyme's github 介紹

1.新建Home.js

新建於 root/app/Home.js

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

export default class Home extends Component {

  render() {
    return (
      <View style={styles.wrapper}>
        <Text style={styles.text}>{this.props.data}</Text>
      </View>
    )
  }
}

Home.defaultProps = {
  data: 'Default',
};

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

ps. Home.defaultProps... 為預設此Home (Componen) 內的props

2.修改入口，渲染Home.js

修改App入口，root/App.js (舊版的react native init的話是index.android.js和index.ios.js)

import React, { Component } from 'react';
import Home from './app/Home';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Home />
    );
  }
}

執行後畫面如下圖

3.install enzyme

$ npm i --save-dev enzyme enzyme-adapter-react-16 react-dom
$ yarn 

需要react-dom的原因是: enzyme-adapter-react-16 has peer dependencies on react, react-dom, and react-test-renderer, ，而 react 和 react-test-renderer 本身就有載入了

3.撰寫test case

新建 root/__tests__/HomeProps-test.js

1) 先打印出wrapper，再找我們要的 props 執行後可以看到如下圖的紅框內， children 值為 Default，是因為現在的 test case 透過shallow時，並沒有傳入data，所以會顯示在 Home.js 內預設的 data

import 'react-native';
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Home from '../app/Home';
configure({ adapter: new Adapter() });

it('Testing props', ()=>{
    const wrapper = shallow(<Home />).props();
    console.log(wrapper);
})

2) 在shallow Home組件時，將 data 帶入值

import 'react-native';
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Home from '../app/Home';
configure({ adapter: new Adapter() });

it('Testing props', ()=>{
    const wrapper = shallow(<Home data='this is testing..' />).props();
    console.log(wrapper);
})

執行後如下圖

3) 測試 Home組件內的 props - data

import 'react-native';
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Home from '../app/Home';
configure({ adapter: new Adapter() });

it('Testing props', ()=>{
    const wrapper = shallow(<Home data='this is testing..' />).props();
    // console.log(wrapper);
    expect(wrapper.children.props.children).toEqual('this is testing..');
})

執行後如下圖

參考

• React-Native Test with jest #6 | how to test props