What is Jest?

[zhouzhongyuan]

• Jest ~笑话

• snapshot文件应当提交到git

• 一个JavaScript测试框架

• test runner: 大约是“测试框架”的意思。例如mocha

• assertion library: 断言库。例如chai

• Testing React components with Jest and Enzyme(极好的入门文章)

Try Jest online

相关工具

• Your Repositories | Coveralls - Test Coverage History & Statistics

  测试文章

• 代码测试覆盖率分析 | HYPERS 前端团队博客

[zhouzhongyuan]

.

[zhouzhongyuan]

基本概念

1. Matchers 匹配器

• 举例：

Matcher	作用	举例

Common .toBe(4) | 基本数据类型是否相等. use Object.is | expect(2 + 2).toBe(4); toEqual | 引用数据类型是否相等.
recursively checks every field of an object or array. | const data = {one: 1};
data['two'] = 2; expect(data).toEqual({one: 1, two: 2}); Truthiness toBeNull | only null| const n = null;
expect(n).toBeNull(); toBeUndefined | matches only undefined | const n = null;
expect(n).toBeUndefined(); toBeDefined | the opposite of toBeUndefined toBeTruthy | matches anything that an if statement treats as true toBeFalsy | matches anything that an if statement treats as false Number toBeGreaterThan toBeGreaterThanOrEqual toBeLessThan toBeLessThanOrEqual Number(floating point number) toBeCloseTo String toMatch | 正则匹配 | test('there is no I in team', () => {
expect('team').not.toMatch(/I/);
});
Array toContain Exception toThrow | exact error message OR regexp | .toThrow();
.toThrow(Error)
.toThrow('wrong')
.toThrow(/wrong/')

complete list of matchers

[zhouzhongyuan]

Why choose Jest?

[zhouzhongyuan]

What is relationship with mocha, enzyme?

测试框架

• Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
• Jest -Delightful JavaScript Testing

Testing utility( for react & react-native ONLY)

• Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
• ReactTestUtils makes it easy to test React components in the testing framework of your choice.

[zhouzhongyuan]

What does Jest do?

[zhouzhongyuan]

What is Shallow Rendering comparison?

Shallow rendering comes from react-addons-test-utils or Enzyme

[zhouzhongyuan]

Jest测试分两类

1. Snapshot Testing

2. DOM Testing

Enzyme and React's TestUtils 具有同样功能

[zhouzhongyuan]

What does test framework do?

What if there is no test framework?

[zhouzhongyuan]

.

[zhouzhongyuan]

Error 1

 PASS  src/js/lib/yes-native/components/DatePicker/__tests__/index-test.js
  ● Console

    console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:71
      Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
    console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:71
      Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.

Fix If you are using React 0.14 or React <15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

npm i --save-dev react-addons-test-utils react-dom

If you are using React >=15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

npm i --save-dev react-test-renderer react-dom

from SO

Error 2

Test suite failed to run 测试套件无法运行

[zhouzhongyuan]

mock

• creating a mock function to use in test code
• writing a manual mock to override a module dependency

[zhouzhongyuan]

Coverage

测试覆盖率的结果

(文字结果) ``` tree reducer ✓ should return the initial state (8ms) ✓ should handle treeloading (2ms) ✓ should handle expandtree (4ms) ✓ should handle expandtree: already exist (1ms) ✓ should handle collapsetree:empty (1ms) ✓ should handle collapsetree (2ms) ✓ should handle treeloaded (4ms) ✓ should handle @@router/LOCATION_CHANGE: no match (2ms) ✓ should handle @@router/LOCATION_CHANGE (2ms) ✓ should handle @@router/LOCATION_CHANGE: include expandedNodes (1ms) dataobject reducer ✕ should return the initial state (2ms) ● dataobject reducer › should return the initial state TypeError: (0 , _tree2.default) is not a function at Object. (src/store/reducers/__tests__/subreducers/dataobject.js:16:35) at process._tickCallback (internal/process/next_tick.js:109:7) Test Suites: 1 failed, 1 of 2 total Tests: 1 failed, 10 passed, 11 total Snapshots: 0 total Time: 1.198s Ran all test suites. ----------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | ----------|----------|----------|----------|----------|----------------| All files | 100 | 100 | 100 | 100 | | tree.js | 100 | 100 | 100 | 100 | | ----------|----------|----------|----------|----------|----------------| ``` (截图结果) 

结果解析

• Function coverage Has each function (or subroutine) in the program been called?
• Statement coverage Has each statement in the program been executed?
• Branch coverage Has each branch (also called DD-path) of each control structure (such as in if and case statements) been executed? For example, given an if statement, have both the true and false branches been executed? Another way of saying this is, has every edge in the program been executed?(分支语句)
• Line coverage Has each executable line in the source file been executed?

Statement coverage and Line coverage 是有区别的，目的用途也是不一样的。 反例： one line contains two statments