// index.js
function ZcyZooTeam(str) {
  return 'Zcy' + str;
}

// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
  throw Error(`ZcyZooTeam 結(jié)果應(yīng)為${value}, 但實(shí)際結(jié)果為${result}`);
}

// no-jest.js
function expect(result) {
  return {
    // 用于判斷是否為期望值
    toBe(value) {
      if(result !== value) {
        throw Error(`結(jié)果應(yīng)為${value}, 但實(shí)際結(jié)果為${result}`);
      }
      console.log('測(cè)試通過(guò)！');
    }
  }
}

// 執(zhí)行測(cè)試
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');

// no-jest.js
// 再封裝如下方法
function test(msg, fn) {
  try {
    fn();
    console.log(msg + '測(cè)試通過(guò)！');
  } catch (error) {
    console.log(msg + '測(cè)試未通過(guò)！' + error);
  }
}

test('測(cè)試ZcyZooTeam', () => {
  expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})

npm i jest --save-D

// 初始化 jest 的配置文件
npx jest --init

// 你將在那個(gè)環(huán)境進(jìn)行測(cè)試，回車(chē)即可選擇
// 第一個(gè)是 node 環(huán)境、第二個(gè)是瀏覽器環(huán)境
? Choose the test environment that will be used for testing ? - Use arrow-keys. Return to submit.
    node
?   jsdom (browser-like)

// 是否需要 jest 生成測(cè)試覆蓋率報(bào)告
? Do you want Jest to add coverage reports? ? (y/N)

// 是否需要在測(cè)試結(jié)束后清除模擬調(diào)用
? Automatically clear mock calls and instances between every test? ? (y/N)

// 創(chuàng)建 jest.config.js 文件
??  Configuration file created at /Users/zcy1/Desktop/demo/auto-test-jest-demo/jest.config.js

// .babelrc
// 如果想用 es6 的形式導(dǎo)出，需要使用 babel 插件進(jìn)行轉(zhuǎn)換
// @babel/core  @babel/preset-env

// 創(chuàng)建 .babelrc 文件
// 為了在 node 環(huán)境下使用 es6 的導(dǎo)出，需要使用 babel 進(jìn)行轉(zhuǎn)換
{
  // 設(shè)置插件集合
  "presets": [
    // 使用當(dāng)前插件，可以進(jìn)行轉(zhuǎn)換
    // 數(shù)組的第二項(xiàng)為插件的配置項(xiàng)
    [
      "@babel/preset-env", {
        // 根據(jù) node 的版本號(hào)來(lái)結(jié)合插件對(duì)代碼進(jìn)行轉(zhuǎn)換
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

npx jest --coverage

// jest.test.js
test("測(cè)試", () => {
  expect(1).toBe(1);  // 通過(guò)
  const a = { name: 'Zero' };
  // 因?yàn)?a 的引用地址，和 toBe 中對(duì)象的引用地址不一致，會(huì)導(dǎo)致測(cè)試不通過(guò)，需要使用其他的匹配器
  expect(a).toBe({ name: 'Zero' });  // 失敗
});

// jest.test.js
test('測(cè)試對(duì)象相等', () => {
  const a = { name: 'Zero' };
  expect(a).toEqual({ name: 'Zero' });  // 斷言
})

// jest.test.js
test('測(cè)試是否為null', () => {
  const a = null;
  expect(a).toBeNull();
})

// jest.test.js
test('測(cè)試是否為undefined', () => {
  const a = undefined;
  expect(a).toBeUndefined();
})

// jest.test.js
test('測(cè)試變量是否定義過(guò)', () => {
  const a = '';
  expect(a).toBeDefined();
})

// jest.test.js
test('測(cè)試變量真值', () => {
  const a = '123';
  expect(a).toBeTruthy();
})

// jest.test.js
test('測(cè)試變量假值', () => {
  const a = '';
  expect(a).toBeFalsy();
})

// jest.test.js
test('測(cè)試變量不是假值', () => {
  const a = '1';
  expect(a).not.toBeFalsy();
})

// jest.test.js
test('是否大于 a 的數(shù)字', () => {
  const a = 123;
  expect(a).toBeGreaterThan(1);
})

// jest.test.js
test('是否小于 a 的數(shù)字', () => {
  const a = 0;
  expect(a).toBeLessThan(1);
})

// jest.test.js
test('是否大于等于 a 的數(shù)字', () => {
  // toBeLessOrEqual 匹配器，與之相反
  const a = 123;
  expect(a).toBeGreaterThanOrEqual(1);
})

// jest.test.js
test('是否大于等于 a 的數(shù)字', () => {
  const a1 = 0.1;
  const a2 = 0.2;
  expect(a1 + a2).toBeCloseTo(0.3);
})

// jest.test.js
test('是否包含 day ', () => {
  const a = 'happy every day';
  expect(a).toMatch('day');
})

// jest.test.js
test('數(shù)組中是否包含 zoo 這個(gè)元素', () => {
  const a = ['zoo', 'ZooTeam', 'Zero'];
  expect(a).toContain('zoo');
})

// jest.test.js
const error = () => {
  throw new Error('error');
}
test('是否存在異常', () => {
  expect(error).toThrow();
})

// getData.js
export const getData = (fn) => {
  axios.get('/getData').then((res) => {
    fn(res.data);
  })
}

// jest.test.js
// 異步調(diào)用回調(diào)函數(shù)需要添加 done 參數(shù)，是一個(gè)函數(shù)
test('getData 返回結(jié)果為 { success: true }', (done) => {
  // 此處代碼無(wú)效，因?yàn)闇y(cè)試用例不會(huì)等待請(qǐng)求結(jié)束后的回調(diào)，測(cè)試用例執(zhí)行完就直接結(jié)束了
  // getData1((data) => {
  //   expect(data).toEqual({
  //     success: true
  //   })
  // })
  
  getData1((data) => {
    expect(data).toEqual({
      success: true
    })
    // 需要在結(jié)束前調(diào)用 done 函數(shù)， Jest 會(huì)知道到 done 才會(huì)結(jié)束，才可以正確測(cè)試異步函數(shù)
    done();
  })
})

// getData.js
export const getData2 = () => {
  return axios.get('http://www.dell-lee.com/react/api/demo.json')
}

// jest.test.js
test('getData 返回結(jié)果為 { success: true }', () => {
  // 使用 promise 時(shí)需要 return，在 then 中使用 done 也可以
  return getData2().then(res => {
    expect(res.data).toEqual({
      success: true
    })
  })
})

// 測(cè)試請(qǐng)求是否 404
test('getData 返回結(jié)果為 404', () => {
  // 由于不觸發(fā) catch 就不會(huì)走測(cè)試校驗(yàn)，所以會(huì)成功，我們需要做一下限制
  // 這行代碼限制下面的代碼中必須要執(zhí)行一次 expect 方法，如果非 404 就不會(huì)走下面的 expect，則測(cè)試不會(huì)通過(guò)
  expect.assertions(1);
  // 使用 promise 時(shí)需要 return
  // 如果只想測(cè)試 404 這樣寫(xiě)是有問(wèn)題的，需要配合 assertions 使用
  return getData2().catch(err => {
    expect(err.toString().indexOf('404') > -1).toBe(true)
  })
})

// 另一種寫(xiě)法
test('getData 返回結(jié)果為 { success: true }', () => {
  // 會(huì)返回很多數(shù)據(jù)，其中包含 data 對(duì)象
  // getData2().then((res) => console.log(res))
  // {
  //   status: 200,
  //   statusText: 'OK',
  //   headers: {},
  //   ......
  //   data: { success: true }
  // }
  // resolves 方法會(huì)將接口返回的字段全部獲取，再使用 toMatchObject 方法進(jìn)行匹配大對(duì)象中是否存在 data 對(duì)象
  return expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})

// 還可以使用 async/await
test('getData 返回結(jié)果為 { success: true }', async () => {
  await expect(getData2()).resolves.toMatchObject({
    data: {
      success: true
    }
  })
})

// Counter.js
class Counter {
  constructor() {
    this.number = 0;
  }

  add() {
    this.number += 1;
  }

  minus() {
    this.number -= 1;
  }
}

export default Counter;

// jest.test.js
const count = new Counter();
// 使用下方兩種測(cè)試方法會(huì)互相影響，先加一后減一，結(jié)果永遠(yuǎn)是 0
test('測(cè)試加法', () => {
  count.add();
  expect(count.number).toBe(1);
})

test('測(cè)試減法', () => {
  count.minus();
  expect(count.number).toBe(-1);
})

// jest.test.js
let count = null;
// 類(lèi)似于生命周期
// 會(huì)在測(cè)試用例執(zhí)行前運(yùn)行
beforeAll(() => {
  console.log('beforeAll')
});

// 會(huì)在每個(gè)測(cè)試用例執(zhí)行前執(zhí)行一次，這樣就會(huì)解決上面互相影響的問(wèn)題
beforeEach(() => {
  console.log('beforeEach')
  count = new Counter();
});

// 會(huì)在每個(gè)測(cè)試用例執(zhí)行后執(zhí)行一次
afterEach(() => {
  console.log('afterEach')
});

// 會(huì)在所有測(cè)試用例結(jié)束后運(yùn)行
afterAll(() => {
  console.log('afterAll');
});

test('測(cè)試加法', () => {
  console.log('add')
  count.add();
  expect(count.number).toBe(1);
})

test('測(cè)試減法', () => {
  console.log('minus')
  count.minus();
  expect(count.number).toBe(-1);
})

// jest.test.js
let count = null;
// describe 方法，可以將測(cè)試用例進(jìn)行分組，更加好維護(hù)同類(lèi)型功能的測(cè)試用例
describe('count 測(cè)試', () => {
  beforeAll(() => {
    console.log('beforeAll')
  });
  beforeEach(() => {
    console.log('beforeEach')
    count = new Counter();
  });
  afterEach(() => {
    console.log('afterEach')
  });
  afterAll(() => {
    console.log('afterAll');
  });
  
  // 將 add 類(lèi)型進(jìn)行分組
  describe('測(cè)試 add 類(lèi)型用例', () => {
    // 在 describe 方法中，鉤子函數(shù)會(huì)按照層級(jí)嵌套進(jìn)行執(zhí)行，先執(zhí)行外部，再執(zhí)行內(nèi)部，不同的 describe 互不干擾
    beforeEach(() => {
      console.log('beforeEach add');
    });
    test('測(cè)試加法', () => {
      console.log('add')
      count.add();
      expect(count.number).toBe(1);
    })
  })

  // 將 minus 類(lèi)型進(jìn)行分組
  describe('測(cè)試 minus 類(lèi)型用例', () => {
    test('測(cè)試減法', () => {
      console.log('minus')
      count.minus();
      expect(count.number).toBe(-1);
    })
  })
})

// mock.js
export const runFn = (fn) => {
  fn(123);
}

// mock.test.js
test('測(cè)試 runFn', () => {
  // 通過(guò) jest 的 fn 方法創(chuàng)建一個(gè)模擬函數(shù)，如果不傳參數(shù)會(huì)默認(rèn)生成一個(gè)函數(shù)
  // 1. 通過(guò) func.mock 獲取想要的值
  // 2. 可以自定義返回值
  // 3. 改變內(nèi)部函數(shù)的實(shí)現(xiàn)，模擬接口請(qǐng)求，不請(qǐng)求代碼中的接口
  const func = jest.fn( () => 456 );

  // 還可以使用 mockReturnValueOnce 方法進(jìn)行控制輸出，兩種方法都使用時(shí)會(huì)覆蓋 fn 方法中的返回值，支持鏈?zhǔn)秸{(diào)用
  // 將 Once 去掉與 fn 方法一樣，多次會(huì)返回相同的值
  func.mockReturnValueOnce('zoo')

  // 返回 this 方法 mockReturnThis
  func.mockReturnThis();

  // 還可以使用 mockImplementation 方法書(shū)寫(xiě)函數(shù)內(nèi)部，可以在函數(shù)內(nèi)部寫(xiě)邏輯，與 jest.fn 方法的參數(shù)一樣，還可以填加 Once
  func.mockImplementation(() => {
    return '123';
  })

  // 執(zhí)行被測(cè)函數(shù)
  runFn(func);
  runFn(func);
  
  // console.log(func.mock)
  // 因?yàn)楸徽{(diào)用了兩次，所以長(zhǎng)度都是 2
  // {
  //   calls: [ [123], [123] ],  // 每次的調(diào)用情況，傳遞的參數(shù)是什么
  //   instances: [ undefined, undefined ],  // 每次調(diào)用的 this 指向，被調(diào)用了幾次
  //   invocationCallOrder: [ 1, 2 ],  // 執(zhí)行順序，可能會(huì)傳入同一個(gè)或多個(gè)方法中，需要記錄一下順序
  //   results: [  // mock 函數(shù)每次執(zhí)行后的返回值
  //     { type: 'return', value: 456 },
  //     { type: 'return', value: 456 }
  //   ]
  // }

  // 通過(guò) toBeCalled 判斷函數(shù)是否被調(diào)用
  expect(func).toBeCalled();

  // 判斷當(dāng)前函數(shù)調(diào)用了幾次 被調(diào)用了兩次
  expect(func.mock.calls.length).toBe(2);

  // 判斷參數(shù)是什么
  expect(func.mock.calls[0]).toEqual([123]);

  // 判斷每次調(diào)用的時(shí)候參數(shù)是什么
  expect(func).toBeCalledWith(123);

  // 判斷返回值
  expect(func.mock.results[0].value).toBe('zoo');
})

// mocker.test.js
// 使用 mock 方法引用 __mocks__ 下創(chuàng)建的 mock.js
jest.mock("./mock");
// 執(zhí)行完上面的方法，會(huì)直接尋找 __mocks__ 下的getData，而不是正常的請(qǐng)求文件
// 由于 mock 中沒(méi)有 getCode 方法，最好只 mock 異步函數(shù)，同步函數(shù)直接測(cè)試即可
// 可以不必須創(chuàng)建 __mocks__ 文件夾
import {
  getData,
} from "./mock";

// 需要使用下面的 requireActual 方法來(lái)引用非 mock 文件夾下的 getCode
const { getData } = jest.requireActual("./mock");

// 高階mock
// 此處直接使用 __mocks__ 目錄下的 mock 文件中的函數(shù)
test("測(cè)試 getData", () => {
  return getData().then((data) => {
    expect(eval(data)).toEqual("123");
  });
});

// mock.js
export const timer = (fn) => {
  setTimeout(() => {
    fn();
    setTimeout(() => {
      fn();
    }, 3000)
  }, 3000)
}

// mock-timers.test.js
import { timer } from './mock';

// 使用 useFakeTimers 方法告知 Jest 在下面的測(cè)試用例，如果用到了定時(shí)器異步函數(shù)的時(shí)候，都是用假的 timers 進(jìn)行模擬
jest.useFakeTimers();

test('測(cè)試 timer', () => {
  const fn = jest.fn();
  timer(fn);

  // 使用 runAllTimers 方法，讓定時(shí)器立即執(zhí)行，和 useFakeTimers 配合使用
  jest.runAllTimers();

  // 如果代碼中有多個(gè)定時(shí)器嵌套，只想測(cè)試最外層的定時(shí)器，則需要使用 runOnlyPendingTimers 方法
  // 這個(gè)方法會(huì)只執(zhí)行當(dāng)前在隊(duì)列中的函數(shù)，可以多次調(diào)用
  jest.runOnlyPendingTimers();
  jest.runOnlyPendingTimers();

  // advanceTimersByTime 方法，可以快進(jìn)時(shí)間
  // 因?yàn)?timer 中，三秒后只執(zhí)行了第一層，如果是六秒，則會(huì)執(zhí)行兩次 fn
  jest.advanceTimersByTime(3000);
})

// snapshot.js
export const config1 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date()
  }
}

export const config2 = () => {
  return {
    method: 'GET',
    url: '/api',
    time: new Date().getTime()
  }
}

// snapshot.test.js
import { config1, config2 } from "./snapshot";

test('測(cè)試 config1 返回值', () => {
  // 但如果每次函數(shù)修改的時(shí)候，當(dāng)前測(cè)試用例也要不斷地修改
  // expect(config()).toEqual({
  //   method: 'GET',
  //   url: '/api'
  // });

  // 需要使用快照匹配 toMatchSnapshot 方法
  // 此方法會(huì)生成一個(gè) __snapshots__ 目錄，下面的文件中，第一次執(zhí)行中 config 生成的結(jié)果會(huì)存到快照文件中
  // 快照會(huì)根據(jù) test 方法中的描述生成一個(gè)映射關(guān)系
  // 修改后的 config 的執(zhí)行結(jié)果與快照中的結(jié)果不同時(shí)會(huì)報(bào)錯(cuò)，需要更新快照
  // 如果 config 中有的值是每次運(yùn)行都會(huì)變化的，那么每次快照都不會(huì)與當(dāng)前執(zhí)行相同，除非執(zhí)行后再更新快照
  // 需要將在 toMatchSnapshot 方法中傳遞一個(gè)參數(shù)，設(shè)置一下 time 為任意格式的 Date 類(lèi)型
  expect(config1()).toMatchSnapshot({
    time: expect.any(Date)
  });
})

test('測(cè)試 config2 返回值', () => {
  expect(config2()).toMatchSnapshot({
    time: expect.any(Number)
  });
})

// snapshot.test.js
// 需要安裝 prettier
test("測(cè)試 config2 返回值", () => {
  // toMatchInlineSnapshot 方法，將執(zhí)行快照放到行內(nèi)中，會(huì)放到 toMatchInlineSnapshot 方法中
  expect(config2()).toMatchInlineSnapshot(
    {
      time: expect.any(Number)
    },
    `
    Object {
      "method": "GET",
      "time": Any<Number>,
      "url": "/api",
    }
  `
  );
});

// dom.js
import $ from 'jquery';
const addDiv = () => {
  // jQuery
  $('body').append('<div/>');
}

export default addDiv;

// dom.test.js
import addDiv from './dom';
import $ from 'jquery';

test('測(cè)試 addDiv', () => {
  addDiv();
  addDiv();
  console.log($('body').find('div').length);

  // 測(cè)試dom
  expect($('body').find('div').length).toBe(2);
  expect(document.getElementsByTagName('div').length).toBe(2);
})

module.exports = {
  // 檢測(cè)從哪個(gè)目錄開(kāi)始，rootDir 代表根目錄
  roots: ["<rootDir>/src"],

  // 代碼測(cè)試覆蓋率通過(guò)分析那些文件生成的，!代表不要分析
  collectCoverageFrom: [
    // src 下所有 js jsx ts tsx 后綴的文件
    "src/**/*.{js,jsx,ts,tsx}",

    // src 下所有 .d.ts 后綴的文件
    "!src/**/*.d.ts"
  ],

  // 運(yùn)行測(cè)試之前，我們額外需要準(zhǔn)備什么
  setupFiles: ["react-app-polyfill/jsdom"],

  // 當(dāng)測(cè)試環(huán)境建立好后，需要做其他事情時(shí)可以引入對(duì)應(yīng)的文件
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],

  // 哪些文件會(huì)被認(rèn)為測(cè)試文件
  testMatch: [
    // src 下的所有 __tests__ 文件夾中的所有的 js jsx ts tsx 后綴的文件都會(huì)被認(rèn)為是測(cè)試文件
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",

    // scr 下的所有一 .test/spec.js/jsx/ts/tsx 后綴的文件都會(huì)被認(rèn)為是測(cè)試文件
    "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
  ],

  // 測(cè)試運(yùn)行的環(huán)境，會(huì)模擬 dom
  testEnvironment: "jsdom",

  // 測(cè)試文件中引用一下后綴結(jié)尾的文件會(huì)使用對(duì)應(yīng)的處理方式
  transform: {
    // 如果引用的是 js jsx mjs cjs ts tsx 后綴的文件會(huì)使用 /config/jest/babelTransform.js 文件進(jìn)行處理
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",

    // 如果引用的是 css 后綴的文件，會(huì)使用 /config/jest/cssTransform.js 文件處理
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

    // 不是以 js jsx mjs cjs ts tsx css json 這些為后綴的文件會(huì)使用 /config/jest/fileTransform.js 文件進(jìn)行處理
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
      "<rootDir>/config/jest/fileTransform.js",
  },

  // 忽略 transform 配置轉(zhuǎn)化的文件
  transformIgnorePatterns: [
    // node_modules 目錄下的 js jsx mjs cjs ts tsx 后綴的文件都不需要轉(zhuǎn)化
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",

    // .module.css/sass/scss 后綴的文件都不需要轉(zhuǎn)化
    "^.+\\.module\\.(css|sass|scss)$",
  ],

  // 自動(dòng)化測(cè)試時(shí)，應(yīng)用的模塊應(yīng)該從哪里尋找，默認(rèn)是在 node_modules
  modulePaths: [],

  // 模塊名字使用哪種工具進(jìn)行映射
  moduleNameMapper: {
    // 針對(duì)于 native 移動(dòng)端
    // "^react-native$": "react-native-web",

    // 將 .module.css/sass/scss 模塊使用 identity-obj-proxy 工具進(jìn)行轉(zhuǎn)化
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  },

  // 引入模塊時(shí)，進(jìn)行自動(dòng)查找模塊類(lèi)型，逐個(gè)匹配
  moduleFileExtensions: [
    "web.js",
    "js",
    "web.ts",
    "ts",
    "web.tsx",
    "tsx",
    "json",
    "web.jsx",
    "jsx",
    "node",
  ],

  // 監(jiān)聽(tīng)插件
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],

  // 重置 mock
  resetMocks: true,
};