jest

csxiaoyaojianxian · csxiaoyaojianxian · commit 16dc6019bf7c · 2019-10-20T10:06:21.000+08:00
diff --git a/13-自动化测试&mock数据/README.md b/13-自动化测试&mock数据/README.md
diff --git a/13-自动化测试&mock数据/jest-test/.babelrc b/13-自动化测试&mock数据/jest-test/.babelrc
@@ -0,0 +1,9 @@
+{
+    "presets": [
+        ["@babel/preset-env", {
+            "targets": {
+                "node": "current"
+            }
+        }]
+    ]
+}
diff --git a/13-自动化测试&mock数据/jest-test/01-init.js b/13-自动化测试&mock数据/jest-test/01-init.js
@@ -0,0 +1,56 @@
+
+/*
+# 安装
+1. 初始化 package.json 并安装 jest
+    $ npm init
+    $ npm install jest -D
+
+2. 初始化 jest 并根据需要修改生成的配置文件 jest.config.js
+    $ npx jest --init
+
+3. 修改 scripts，添加执行指令
+    # (1) 普通执行测试
+    $ npx jest
+    {
+        "test": "jest"
+    }
+
+    # (2) 生成覆盖率报告
+    $ npx jest --coverage
+    {
+        "coverage": "jest --coverage"
+    }
+
+    # (3) 持续监听变化，默认 o 模式
+    {
+        "test": "jest --watch"
+    }
+
+    # (4) 持续监听所有文件变化
+    {
+        "test": "jest --watchAll"
+    }
+
+4. 编写对应测试用例文件 init.test.js 
+
+5. 执行测试
+   $ npm run test
+   $ npm run coverage
+*/
+function add (a, b) {
+    return a + b;
+}
+
+function minus (a, b) {
+    return a - b;
+}
+
+function multi (a, b) {
+    return a * b;
+}
+
+module.exports = {
+    add,
+    minus,
+    multi
+}
diff --git a/13-自动化测试&mock数据/jest-test/01-init.test.js b/13-自动化测试&mock数据/jest-test/01-init.test.js
@@ -0,0 +1,15 @@
+
+const math = require('./01-init.js');
+const {add, minus, multi} = math;
+
+test('测试加法 3 + 7', () => {
+    expect(add(3, 7)).toBe(10);
+})
+
+test('测试减法 3 - 3', () => {
+    expect(minus(3, 3)).toBe(0);
+})
+
+test('测试乘法 3 * 3', () => {
+    expect(multi(3, 3)).toBe(9);
+})
diff --git a/13-自动化测试&mock数据/jest-test/02-es6.js b/13-自动化测试&mock数据/jest-test/02-es6.js
@@ -0,0 +1,36 @@
+/*
+jest 默认不支持 es6，需要使用 babel 来支持 es6
+
+1. 安装babel
+$ npm install @babel/core @babel/preset-env -D
+
+2. 配置babel，修改 .babelrc 文件
+{
+    "presets": [
+        ["@babel/preset-env", {
+            "targets": {
+                "node": "current"
+            }
+        }]
+    ]
+}
+
+*/
+
+function add (a, b) {
+    return a + b;
+}
+
+function minus (a, b) {
+    return a - b;
+}
+
+function multi (a, b) {
+    return a * b;
+}
+
+module.exports = {
+    add,
+    minus,
+    multi
+}
diff --git a/13-自动化测试&mock数据/jest-test/02-es6.test.js b/13-自动化测试&mock数据/jest-test/02-es6.test.js
@@ -0,0 +1,13 @@
+import {add, minus, multi} from './02-es6.js';
+
+test('测试加法 3 + 7', () => {
+    expect(add(3, 7)).toBe(10);
+})
+
+test('测试减法 3 - 3', () => {
+    expect(minus(3, 3)).toBe(0);
+})
+
+test('测试乘法 3 * 3', () => {
+    expect(multi(3, 3)).toBe(9);
+})
diff --git a/13-自动化测试&mock数据/jest-test/03-matchers.js b/13-自动化测试&mock数据/jest-test/03-matchers.js
@@ -0,0 +1,21 @@
+/**
+ * jest 匹配器
+ * 见 test 文件
+ */
+function add (a, b) {
+    return a + b;
+}
+
+function minus (a, b) {
+    return a - b;
+}
+
+function multi (a, b) {
+    return a * b;
+}
+
+module.exports = {
+    add,
+    minus,
+    multi
+}
diff --git a/13-自动化测试&mock数据/jest-test/03-matchers.test.js b/13-自动化测试&mock数据/jest-test/03-matchers.test.js
@@ -0,0 +1,43 @@
+
+test('jest匹配器', () => {
+    const a = { one: 1 };
+    const b = null;
+    const c = 0.1;
+    const d = 0.2;
+    const e = 'www.csxiaoyao.com';
+    const f = ['www', 'csxiaoyao', 'com'];
+    const g = new Set(f);
+    const h = () => {
+        throw new Error('this is a new error');
+    };
+    // 【 toBe 】 匹配器
+    // expect(a).toBe({ one: 1 }); // false 地址不同
+    // 【 toEqual 】 匹配器
+    expect(a).toEqual({ one: 1 });
+
+    // 【 toBeNull 】【 toBeUndefined 】【 toBeDefined 】【 toBeTruthy 】【 toBeFalsy 】
+    expect(b).toBeNull();
+
+    // 【 not 】
+    expect(c).not.toBeFalsy();
+
+    // Number【 toBeCloseTo 】【 toBeGreaterThan 】【 toBeLessThan 】【 toBeGreaterThanOrEqual 】【 toBeLessThanOrEqual 】
+    expect(10).toBeGreaterThan(9);
+    expect(10).toBeGreaterThanOrEqual(10);
+    expect(c + d).toBeCloseTo(0.3);
+
+    // String【 toMatch 】
+    expect(e).toMatch('csxiaoyao');
+
+    // Array/Set 【 toContain 】
+    expect(f).toContain('csxiaoyao');
+    expect(g).toContain('csxiaoyao');
+    
+    // 异常 【 toThrow 】
+    expect(h).toThrow();
+    expect(h).toThrow('this is a new error');
+    expect(h).toThrow(/this is a new error/);
+    // expect(h).not.toThrow();
+
+    // ...
+})
diff --git a/13-自动化测试&mock数据/jest-test/04-mode.js b/13-自动化测试&mock数据/jest-test/04-mode.js
@@ -0,0 +1,12 @@
+/*
+jest --watchAll 时对应的命令行模式
+
+› Press f to run only failed tests.
+› Press o to only run tests related to changed files.
+› Press p to filter by a filename regex pattern.
+› Press t to filter by a test name regex pattern.
+› Press q to quit watch mode.
+
+其中 o 模式要配合 git 监听文件修改变化
+
+*/
diff --git a/13-自动化测试&mock数据/jest-test/05-async.js b/13-自动化测试&mock数据/jest-test/05-async.js
@@ -0,0 +1,25 @@
+/**
+ * 异步处理
+ * 
+ * 1. 安装 axios
+ * $ npm install axios --save
+ * 
+ * 2. 测试用例分别处理 callback 和 promise
+ * 见 test 文件
+ * 
+ */
+import axios from 'axios';
+
+// 传入 callback 函数
+export const fetchData = (fn) => {
+    axios.get('http://www.csxiaoyao.com/api/temp/data.json').then((response) => {
+        fn(response.data);
+    })
+}
+
+// 返回 promise
+export const fetchData2 = () => {
+    return axios.get('http://www.csxiaoyao.com/api/temp/data.json')
+}
+
+// export {fetchData, fetchData2}
diff --git a/13-自动化测试&mock数据/jest-test/05-async.test.js b/13-自动化测试&mock数据/jest-test/05-async.test.js
@@ -0,0 +1,88 @@
+import {fetchData, fetchData2} from './05-async';
+
+/*
+// 【1】callback 中处理，需要手动结束 done，否则可能走不到 callback
+test('fetchData 返回结果为 { success: true }', (done) => {
+    fetchData((data) => {
+        expect(data).toEqual({
+            success: true
+        });
+        // 不写，当接口404会导致用例不执行
+        done();
+    })
+})
+
+// 【2】得到 promise，处理成功，需要指定返回expect数量，否则可能直接走失败跳过
+test('fetchData2 返回结果为 { success: true }', () => {
+    // 指定执行返回的 expect 数量
+    expect.assertions(1);
+    return fetchData2().then((response) => {
+        expect(response.data).toEqual({
+            success: true
+        });
+    })
+})
+*/
+
+// 【3】得到 promise，处理失败，需要指定返回expect数量，否则可能直接走成功跳过
+test('fetchData2 返回结果为 404', () => {
+    // 当接口不为404，则不会走catch
+    // 指定执行返回的 expect 数量
+    expect.assertions(1);
+    return fetchData2().catch((e) => {
+        // console.log(e.toString());
+        expect(e.toString().indexOf('404') > -1).toBe(true);
+    })
+})
+
+/**
+ * promise 处理
+ * resolves / rejects / async|await
+ */
+/*
+// 【4】promise-resolves 处理方式
+test('fetchData2 返回结果为 { success: true }', () => {
+    return expect(fetchData2()).resolves.toMatchObject({
+        data: {
+            success: true
+        }
+    });
+})
+*/
+// 【4】promise-rejects 处理方式
+test('fetchData2 返回结果为 404', () => {
+    return expect(fetchData2()).rejects.toThrow();
+})
+
+/*
+// 【5】promise-async|await 成功处理方式1
+test('fetchData2 返回结果为 { success: true }', async () => {
+    await expect(fetchData2()).resolves.toMatchObject({
+        data: {
+            success: true
+        }
+    });
+})
+// 【6】promise-async|await 成功处理方式2
+test('fetchData2 返回结果为 { success: true }', async () => {
+    const response = await fetchData2();
+    expect(response.data).toEqual({
+        success: true
+    });
+})
+*/
+// 【7】promise-async|await 失败处理方式1
+test('fetchData2 返回结果为 404', async () => {
+    await expect(fetchData2()).rejects.toThrow();
+})
+
+// 【8】promise-async|await 失败处理方式2
+test('fetchData2 返回结果为 404', async () => {
+    expect.assertions(1);
+    try {
+        await fetchData2();
+    } catch (e) {
+        // console.log(e.toString())
+        expect(e.toString().indexOf('404') > -1).toBe(true);
+    }
+})
diff --git a/13-自动化测试&mock数据/jest-test/README.md b/13-自动化测试&mock数据/jest-test/README.md
@@ -0,0 +1,4 @@
+# jest
+
+Jest是 Facebook 的一套开源的 JavaScript 测试框架
+它自动集成了断言、JsDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架
diff --git a/13-自动化测试&mock数据/jest-test/jest.config.js b/13-自动化测试&mock数据/jest-test/jest.config.js
diff --git a/13-自动化测试&mock数据/jest-test/package.json b/13-自动化测试&mock数据/jest-test/package.json
diff --git a/README.md b/README.md
