> For the complete documentation index, see [llms.txt](https://twins-bamboo.gitbook.io/react-native-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://twins-bamboo.gitbook.io/react-native-note/test/test-props.md).

# test props - Enzyme

{% hint style="info" %}
enzyme's  [github](https://github.com/airbnb/enzyme)   [介紹](http://airbnb.io/enzyme/)
{% endhint %}

### 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 />
    );
  }
}
```

執行後畫面如下圖

![](/files/-LHh3H3m14V-SRmHhxeu)

### 3.install enzyme

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

{% hint style="danger" %}
需要react-dom的原因是:\
enzyme-adapter-react-16 has peer dependencies on **react**, **react-dom**, and **react-test-renderer, ，**&#x800C; react 和 react-test-renderer 本身就有載入了
{% endhint %}

###

### 3.撰寫test case

新建 root/\_\_tests\_\_/HomeProps-test.js

1\) 先打印出wrapper，再找我們要的 props\
&#x20;   執行後可以看到如下圖的紅框內， 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);
})
```

![](/files/-LHiNWw-ldT_gdZ4x5rh)

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);
})
```

執行後如下圖

![](/files/-LHmpj8yI5-mD9f3DBiQ)

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..');
})
```

執行後如下圖

![](/files/-LHmqJpWYe4Ll4IQRx7n)

### 參考

* [React-Native Test with jest #6 | how to test props](https://www.youtube.com/watch?v=5Asw1fIZoOw\&index=7\&list=PL8p2I9GklV46mGMh5X1pzuDWidnRrlHyp)