> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://twins-bamboo.gitbook.io/react-native-note/test/test-props.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.