jest

[dlrandy]

测试文件中有依赖模块的时候，可以使用的jest.mock方法来mock。主要是不想真正的引入某些模块，而只是mock一些 参数或者对象，以至于测试的文件不报错。这些都是要在beforeEach中执行的。

[dlrandy]

jest的一些测试问题和依赖包 的版本相关。

mock是你的一些方法，会在测试正式文件的时候替换调用，返回你想要的结果给正式的函数。
async的测试两种组合：
1、return promise + expect.assertions(num)
2、it 或者test的回调传一个done函数，在最终结束测试的时候，挑用done();

[dlrandy]

WHY USE JEST
１、易于搭建
２、可以并行运行测试
３、快照测试
４、Ｊａｓｍｉｎｅ 验证
5、代码覆盖报告
6、内置手动Mock

mock时候的路径，名字一定是要引用包的，路径一定是相对于当前的测试文件的

测试环境一般需要：
jest (UT framework);
babel-jest (support es6/7);
enzyme(test utils for component);
react-addons-test-utils(Enzyme的依赖， 也可以用来测试)；
react-test-renderer(抓取组件的DOM tree快照的)；
redux-mock-store(用来mock redux store的)。

命名约定就是__test__ \ component.spec/test.js。__mocks__应该是模块挨着的直接子目录，当然也可以放在函数内部。

写组件的时候，最好是有多个单粒度的导出 （）

测试的组件不要使用decorator

https://medium.com/netscape/testing-a-react-redux-app-using-jest-and-enzyme-b349324803a9

[dlrandy]

测试Connected 组件（container）的方法：
1、直接传递store，shallow render
2、把connected 组件包装在Provider里，全部渲染mount
3、上面的方法既可以使用伪store或者真正的store（多用于集成 测试，但是它可以捕获到state的变化）

npm test -- -u 或者 jest -- -u来更新snapshot jest -u
快照可以减少测试dumb组件的时间，一旦有变化，snapshot 验证就会报错。snapshot不处理事件和props等。这些是应该在组件里测试的。

所以说使用了snapshot测试组件，我们要测试的就是事件和属性 state等。

yarn test -- --coverage OR npm test -- --coverage

[dlrandy]

jest 的requestAnimationFrame的问题
jestjs/jest#4545
jestjs/jest#4545 (comment)
facebook/create-react-app#3199

[dlrandy]

Snapshot多用于叶子组件 也可以用于connected组件，一个组件只能有一个snapshot文件，但是可以有多个snapshots。

create-react-app他的测试目录最好放在组件的目录里。单独放到根目录下是不好使得

[dlrandy]

测试组件 的click等事件的时候 可以使用shallowWrapper或者ReactElement的props.event()来进行测试，然后判断调用次数 参数结果等

[dlrandy]

beforeEach 的变量是对应的 it/test 里的，而不是describe里的

beforeEach里的mock也是缓存的哦

[dlrandy]

Describe里一个it里的函数执行了，那么这个执行的 代码 在接下来的 it里也是算数的。

[dlrandy]

写可测试的组件的时候，一般要注意多导出 小的组件，react里的chheckbox的checked赋值的时候一定要用！！强转移一下，否侧测试的时候又警告，同理radio等类似的元素。
要注意require和es6 模块的引入差别

import renderer from 'react-test-renderer';
jest的Snapshot智能用于renderer的方法

[dlrandy]

reduxjs/redux#1534

reduxjs/react-redux#325

https://blog.carbonfive.com/2016/02/02/sharing-and-testing-code-in-react-with-higher-order-components/

facebook/react#6779

https://facebook.github.io/immutable-js/docs/#/Record/toJS

https://tonyhb.gitbooks.io/redux-without-profanity/using_immutablejs_records.html

http://nicolerauch.de/posts/2016-05-16-shallow-rendering.html

https://github.com/reactjs/react-redux/blob/master/test/components/Provider.spec.js

https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6

https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec

https://www.packtpub.com/mapt/book/web_development/9781786462398/8/08lvl1sec44/using-jest

https://www.learnhowtoprogram.com/react/react-and-redux/building-an-environment-testing-with-jest

https://thebrainfiles.wearebrain.com/use-jest-for-react-app-testing-95006dc8c4de

https://www.sitepoint.com/test-react-components-jest/

https://www.codesai.com/2017/06/testing-hacks-react-redux

https://www.codementor.io/mz026/unit-testing-a-redux-app-9wzb5uwlq

https://jonbellah.com/articles/intro-react-testing/

https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8

https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918

https://ericnish.io/blog/how-to-unit-test-react-redux-components/

http://frontend.turing.io/lessons/module-3/testing-redux.html

https://stackoverflow.com/questions/40134756/enzyme-check-checkbox-status/40186176

https://medium.com/netscape/testing-a-react-redux-app-using-jest-and-enzyme-b349324803a9

enzymejs/enzyme#1002

https://www.fullstackreact.com/30-days-of-react/day-25/

https://www.ximedes.com/test-redux-action-creators-with-jest/

https://redux.js.org/docs/recipes/WritingTests.html

https://stackoverflow.com/questions/46206618/when-to-use-atob-encodeuricomponent-and-btoa-decodeuricomponent

https://stackoverflow.com/questions/33854103/why-were-javascript-atob-and-btoa-named-like-that

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa

[dlrandy]

jest 的mock如果需要引用其它的模块的话，需要直接在mock方法里直接require，不能再函数里引用外面的模块变量

jestjs/jest#2567

[dlrandy]

jest 里修改window.location.hostname的时候，可以提供jest一个testURL的,这个方法不是很灵活，所以真要测试的灵活一些 可以找一些库