Add 3 articles about Jest

api/jest-in-action-components.md

@@ -2,4 +2,136 @@
 
 欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：[413381701](http://shang.qq.com/wpa/qunwpa?idkey=3b9474dacbf35e4a9659e89399758406e510e5b8a3f81109f7d07efaadc6056d)
 
-
+### 如何配置 Jest
+
+* 【必选】安装依赖，`yarn add --dev jest`，是不是非常简单，就一句话。
+* 【可选】如果你习惯了写 ES6 的代码，需要安装 `yarn add --dev babel-preset-env`
+* 【可选】如果安装了上一步，这一步就变成必选操作了，那就是在项目根目录创建 `.babelrc` 文件，并在里面配置`"presets": ["env"]`
+* Jest **约定**把所有的单元测试文件放在一个叫`__tests__`的目录里，所以在项目根目录创建一个。当然你可以放在别的目录里，只需要在 package.json 另写配置代码即可。
+
+### React Components 怎么写？
+
+请参考 [开发 React 自定义组件](https://github.com/Kennytian/learning-react-native/blob/master/advanced/custom-components.md)
+
+下面是一个简单的「数据加载失败，请重试」的控件，代码如下：
+
+* LoadFailed.js
+
+```javascript
+import React, { PropTypes, PureComponent } from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+const styles = {
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    fontSize: 14,
+    color: "#333"
+  }
+};
+
+class LoadFailed extends PureComponent {
+  static propTypes = {
+    onPress: PropTypes.func,
+    text: PropTypes.string,
+    style: PropTypes.object,
+    textStyle: PropTypes.object
+  };
+
+  static defaultProps = {
+    onPress: null,
+    text: "数据加载失败，请重试",
+    style: null,
+    textStyle: null
+  };
+
+  onPress = () => {
+    this.props.onPress && this.props.onPress();
+  };
+
+  render() {
+    const { text, style, textStyle } = this.props;
+    const btnStyle = StyleSheet.flatten([styles.container, style]);
+    const txtStyle = StyleSheet.flatten([styles.text, textStyle]);
+    return (
+      <TouchableOpacity onPress={this.onPress} style={btnStyle}>
+        <Text style={txtStyle}>{text}</Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default LoadFailed;
+```
+
+### React Components 单元测试怎么写？
+
+* LoadFailed.test.js
+
+```javascript
+import "react-native";
+import React from "react";
+import renderer from "react-test-renderer";
+
+import LoadFailed from "../LoadFailed";
+
+it("LoadFailed 默认显示，耗时：", () => {
+  const tree = renderer.create(<LoadFailed />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('LoadFailed text="数据加载失败，点击重试" 显示，耗时：', () => {
+  const tree = renderer
+    .create(<LoadFailed text="数据加载失败，点击重试" />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it("LoadFailed 点击 onPress，耗时：", () => {
+  const onPressMock = jest.fn();
+  const component = renderer
+    .create(<LoadFailed onPress={onPressMock} />)
+    .getInstance();
+  component.onPress();
+  expect(onPressMock).toBeCalled();
+});
+```
+
+### 怎么运行单元测试
+
+* 先在 package.json 的 script 里配置如下代码：
+
+```json
+"scripts": {
+    "test": "./node_modules/.bin/jest"
+}
+```
+
+* 在项目根目录命令行执行：`yarn test -u`
+
+* 命令行里就会出现：
+
+```
+PASS  __tests__/LoadFailed.test.js
+  ✓ LoadFailed 默认显示，耗时： (3722ms)
+  ✓ LoadFailed text="数据加载失败，点击重试" 显示，耗时： (3ms)
+  ✓ LoadFailed 点击 onPress，耗时： (2ms)
+
+Tests:       3 passed, 3 total
+Snapshots:   2 passed, 2 total
+Time:        11.508s
+```
+
+### Q & A
+
+* 问：jest 与 react-native 有没有什么注意事项？
+* 答：package.json 里的 `react-test-renderer` 版本必须与 `react-native` 一致。
+
+* 问：.snap 是什么？
+* 在执行这一组测试后，Jest 测试库会生生类似于 `LoadFailed.test.js.snap` 快照文件。如果报有存在的 snap 文件，无法生成新的 snap 文件，只需删除旧 snap 文件，重新运行测试用例即可。 也可以用`-u`的参数来自动删除。
+
+* 问：能不能模拟控件的点击事件？
+* 可以，详情见上面的例子。

api/jest-in-action-redux-action.md

@@ -3,59 +3,67 @@
 欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：[413381701](http://shang.qq.com/wpa/qunwpa?idkey=3b9474dacbf35e4a9659e89399758406e510e5b8a3f81109f7d07efaadc6056d)
 
 ### 如何配置 Jest
-- 【必选】安装依赖，`yarn add --dev jest`，是不是非常简单，就一句话。
-- 【可选】如果你习惯了写ES6的代码，需要安装 `yarn add --dev babel-preset-env`
-- 【可选】如果安装了上一步，这一步就变成必选操作了，那就是在项目根目录创建 `.babelrc` 文件，并在里面配置`"presets": ["env"]`
-- Jest **约定**把所有的单元测试文件放在一个叫`__tests__`的目录里，所以在项目根目录创建一个。当然你可以放在别的目录里，只需要在 package.json 另写配置代码即可。
+
+* 【必选】安装依赖，`yarn add --dev jest`，是不是非常简单，就一句话。
+* 【可选】如果你习惯了写 ES6 的代码，需要安装 `yarn add --dev babel-preset-env`
+* 【可选】如果安装了上一步，这一步就变成必选操作了，那就是在项目根目录创建 `.babelrc` 文件，并在里面配置`"presets": ["env"]`
+* Jest **约定**把所有的单元测试文件放在一个叫`__tests__`的目录里，所以在项目根目录创建一个。当然你可以放在别的目录里，只需要在 package.json 另写配置代码即可。
 
 ### 关于 Redux
+
 如果你想复习一下整个 Redux 知识或 Redux Actions 知识，请查看:
-- http://cn.redux.js.org/
-- http://cn.redux.js.org/docs/basics/Actions.html
+
+* http://cn.redux.js.org/
+* http://cn.redux.js.org/docs/basics/Actions.html
 
 ### Redux Action 怎么写？
-- `addTodo.js`
+
+* `addTodo.js`
+
 ```javascript
-export const ADD_TODO = 'ADD_TODO';
+export const ADD_TODO = "ADD_TODO";
 
 export function addTodo(text) {
   return {
     type: ADD_TODO,
-    text,
+    text
   };
 }
-
 ```
- 
+
 ### Redux Action 单元测试怎么写
-- `__tests__/addTodo.test.js`
+
+* `__tests__/addTodo.test.js`
+
 ```javascript
-import { addTodo, ADD_TODO } from '../addTodo';
+import { addTodo, ADD_TODO } from "../addTodo";
 
-describe('actions', () => {
-  it('should create an action to add a todo', () => {
-    const text = 'Finish docs';
+describe("actions", () => {
+  it("should create an action to add a todo", () => {
+    const text = "Finish docs";
     const expectedAction = {
       type: ADD_TODO,
-      text,
+      text
     };
     expect(addTodo(text)).toEqual(expectedAction);
   });
 });
-
 ```
 
 ### 怎么运行单元测试
-- 先在 package.json 的 script 里配置如下代码：
+
+* 先在 package.json 的 script 里配置如下代码：
+
 ```json
 "scripts": {
     "test": "./node_modules/.bin/jest"
 }
 ```
 
-- 在项目根目录命令行执行：` yarn test`
+* 在项目根目录命令行执行：`yarn test`
+
+* 命令行里就会出现：
 
-- 命令行里就会出现：
 ```
  PASS  __tests__/addTodo.test.js
 
@@ -67,8 +75,22 @@ Ran all test suites.
 ```
 
 ### Q & A
-- 为什么是安装 `babel-preset-env`
-- 答：
 
-- 如何放把单元测试文件放在 `__tests__` 外？
-- 答：
+* 为什么是安装 `babel-preset-env`
+* 答：现如今不同的浏览器和平台 Chrome, Opera, Edge, Firefox, Safari, IE, iOS, Android, Node, Electron。不同的模块 "amd" ， "umd" ， "systemjs", "commonjs" 这些 ES 运行环境对 ES6, ES7, ES8 支持不一，有的支持好，有的支持差。为了充分发挥新版 ES 的特性，我们需要在特定的平台上执行特定的转码规则，说白了就像是按需转码的意思。 摘自[babel-preset-env 使用介绍](https://www.cnblogs.com/ye-hcj/p/7070084.html)
+
+* 如何放把单元测试文件放在 `__tests__` 外的其它路径？
+* 答：如果你取名叫 `otherFolder`, 那就在 package.json 根节点里添加如下代码：
+
+```
+"jest": {
+    "testMatch": [
+      "**/otherFolder/**/?(*.)(spec|test).js?(x)"
+    ],
+}
+```
+
+更多配置，请参考:
+
+* https://facebook.github.io/jest/docs/zh-Hans/configuration.html
+* https://facebook.github.io/jest/docs/en/configuration.html

api/jest-in-action-redux-reducer.md

@@ -2,4 +2,113 @@
 
 欢迎您帮忙纠错, 一起帮助更多的人。 一起来学习交流 React, QQ 群：[413381701](http://shang.qq.com/wpa/qunwpa?idkey=3b9474dacbf35e4a9659e89399758406e510e5b8a3f81109f7d07efaadc6056d)
 
-
+### 如何配置 Jest
+
+* 【必选】安装依赖，`yarn add --dev jest`，是不是非常简单，就一句话。
+* 【可选】如果你习惯了写 ES6 的代码，需要安装 `yarn add --dev babel-preset-env`
+* 【可选】如果安装了上一步，这一步就变成必选操作了，那就是在项目根目录创建 `.babelrc` 文件，并在里面配置`"presets": ["env"]`
+* Jest **约定**把所有的单元测试文件放在一个叫`__tests__`的目录里，所以在项目根目录创建一个。当然你可以放在别的目录里，只需要在 package.json 另写配置代码即可。
+
+### 关于 Redux
+
+如果你想复习一下整个 Redux 知识或 Redux Actions 知识，请查看:
+
+* http://cn.redux.js.org/
+* http://cn.redux.js.org/docs/basics/Reducers.html
+
+### Redux Reducer 怎么写？
+
+* news.js
+
+```javascript
+export function newsDetail(state = {}, { type, data }) {
+  switch (type) {
+    case "NEWS_DETAIL":
+      return { ...state, ...data };
+    default:
+      return state;
+  }
+}
+```
+
+### Redux Reducer 单元测试怎么写
+
+* `__tests__/news.test.js`
+
+```javascript
+import { newsDetail } from "../news";
+
+describe("News reducer", () => {
+  it("newsDetail has a default store", () => {
+    const received = newsDetail(undefined, { type: "unexpected" });
+    const expected = {};
+    expect(received).toEqual(expected);
+  });
+
+  it("newsDetail can handle 'NEWS_DETAIL'", () => {
+    const received = newsDetail(
+      {},
+      {
+        type: "NEWS_DETAIL",
+        data: {
+          title: "Redux Reducer 单元测试",
+          viewCounts: 40
+        }
+      }
+    );
+    const expected = {
+      title: "Redux Reducer 单元测试",
+      viewCounts: 40
+    };
+    expect(received).toHaveProperty("title");
+    expect(received).toEqual(expected);
+  });
+});
+```
+
+### 怎么运行单元测试
+
+* 先在 package.json 的 script 里配置如下代码：
+
+```json
+"scripts": {
+    "test": "./node_modules/.bin/jest"
+}
+```
+
+* 在项目根目录命令行执行：`yarn test`
+
+* 命令行里就会出现：
+
+```
+PASS  __tests__/news.test.js
+  News reducer
+    ✓ newsDetail has a default store (4ms)
+    ✓ newsDetail can handle 'NEWS_DETAIL' (2ms)
+
+Test Suites: 1 passed, 1 total
+Tests:       2 passed, 2 total
+Snapshots:   0 total
+Time:        1.149s
+```
+
+### Q & A
+
+* 为什么是安装 `babel-preset-env`
+* 答：现如今不同的浏览器和平台 Chrome, Opera, Edge, Firefox, Safari, IE, iOS, Android, Node, Electron。不同的模块 "amd" ， "umd" ， "systemjs", "commonjs" 这些 ES 运行环境对 ES6, ES7, ES8 支持不一，有的支持好，有的支持差。为了充分发挥新版 ES 的特性，我们需要在特定的平台上执行特定的转码规则，说白了就像是按需转码的意思。 摘自[babel-preset-env 使用介绍](https://www.cnblogs.com/ye-hcj/p/7070084.html)
+
+* 如何放把单元测试文件放在 `__tests__` 外的其它路径？
+* 答：如果你取名叫 `otherFolder`, 那就在 package.json 根节点里添加如下代码：
+
+```
+"jest": {
+    "testMatch": [
+      "**/otherFolder/**/?(*.)(spec|test).js?(x)"
+    ],
+}
+```
+
+更多配置，请参考:
+
+* https://facebook.github.io/jest/docs/zh-Hans/configuration.html
+* https://facebook.github.io/jest/docs/en/configuration.html

components/login-with-wechat.md

@@ -25,7 +25,7 @@ React Native 集成微信 for Android
 React Native 采用的是 gradle 打包, 所以就以 gradle 命令为例:
 
 * Windows
-  <pre><code>cd android
+    <pre><code>cd android
   gradlew assembleRelease</code></pre>
 * Mac
   <pre><code>cd android && ./gradlew assembleRelease</code></pre>
@@ -35,7 +35,7 @@ React Native 采用的是 gradle 打包, 所以就以 gradle 命令为例:
 1.  把已签名的 apk 拷到手机某个目录, 然后手机进入该目录, 点击安装。
 2.  如果方法 1 提示无法安装, 就执行下面命令
     <pre><code>adb push /User/kenny/xxx.apk "/data/local/tmp/com.company.xxx"
-adb shell pm install -r "/data/local/tmp/com.company.xxx"</code></pre>
+    adb shell pm install -r "/data/local/tmp/com.company.xxx"</code></pre>
     _ adb push 就是把电脑里的 apk 文件拷到 Android 手机的 `/data/local/tmp/com.company.xxx` 目录下
     _ adb shell pm install 就是安装该 apk 文件。
 

environment/config-environment-on-windows.md

@@ -28,7 +28,7 @@
 
 * 从官网下载[Node.js 4.4.x](https://nodejs.org/dist/v4.4.2/node-v4.4.2-x64.msi)的官方 4.x 版本，或者[Node.js 5.x](https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi)版本 ，安装时确保`Add to PATH`已选中状态。
 * 建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
-  <pre><code>npm config set registry https://registry.npm.taobao.org
+    <pre><code>npm config set registry https://registry.npm.taobao.org
   npm config set disturl https://npm.taobao.org/dist</code></pre>
 
 ### 安装 Gradle