MobX, Axios, PropTypes, Jest, and Enzyme - sgml/signature GitHub Wiki

PropTypes are for validation, Enzyme is for emulation, Jest is for assertions

Update the key on a component method to force a re-render.

Errors and Warnings

1. https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json
2. https://reactjs.org/docs/error-decoder.html/?invariant=####
3. https://github.com/facebook/react/blob/master/packages/react-dom/src/tests/ReactDOMComponent-test.js
4. http://lefkowitz.me/2018/08/22/handle-react-native-crashes-with-componentdidcatch/
5. https://dev.to/sarah_chima/error-boundaries-in-react-3eib
6. https://github.com/mobxjs/mobx-react/issues/410
7. https://github.com/mobxjs/mobx/issues/1316
8. https://github.com/moroshko/react-autosuggest/issues/362

Spy Limitations

1. https://stackoverflow.com/questions/41150475/how-to-fake-being-offline-in-jasmine
2. https://github.com/facebook/jest/issues/6798
3. https://github.com/facebook/jest/issues/6798
4. https://github.com/jasmine/jasmine/issues/299

Tooling

1. https://www.npmjs.com/package/react-is
2. https://www.npmjs.com/package/react-visual-diff
3. https://www.npmjs.com/package/react-source-render
4. https://www.npmjs.com/package/react-angular-component
5. https://raw.githubusercontent.com/facebook/react/master/packages/react-is/src/tests/ReactIs-test.js

Docs

1. https://airbnb.io/enzyme/docs/api/ReactWrapper/exists.html
2. https://github.com/mobxjs/mobx/wiki/Migrating-from-mobx-3-to-mobx-4
3. https://github.com/mobxjs/mobx/blob/master/CHANGELOG.md
4. https://github.com/facebook/jest/blob/master/CHANGELOG.md
5. https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md
6. https://github.com/facebook/prop-types/blob/master/CHANGELOG.md

Cheatsheets

1. https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448
2. https://hackernoon.com/introduction-to-redux-and-mobx-e6fa98b6479
3. https://github.com/sapegin/jest-cheat-sheet
4. https://reactjs.org/blog/2018/10/23/react-v-16-6.html
5. https://reactjs.org/docs/hooks-faq.html
6. https://hackernoon.com/the-react-state-museum-a278c726315
7. https://github.com/mobxjs/mobx-react-lite
8. https://medium.com/@paulanthonysalvatore/jest-my-summer-approaching-various-problems-with-jest-enzyme-fc1ad992aece
9. https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/
10. https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
11. https://stackoverflow.com/questions/25472665/watch-and-rerun-jest-js-tests
12. https://stackoverflow.com/questions/49576635/how-to-wait-in-enzyme-for-a-promise-from-a-private-function
13. https://github.com/airbnb/enzyme/issues/1213
14. https://github.com/WebReflection/redefine
15. https://medium.com/@juanlizarazo/how-to-spy-on-a-property-getter-or-setter-with-jasmine-ad06c00ba612
16. https://github.com/facebook/jest/issues/2227
17. https://stackoverflow.com/questions/14047809/js-defineproperty-and-prototype
18. https://dmitripavlutin.com/catch-the-xmlhttp-request-in-plain-javascript/
19. https://medium.com/@gilfink/quick-tip-creating-an-xmlhttprequest-interceptor-1da23cf90b76
20. https://medium.com/@matthew.holman/testing-url-hash-query-with-jest-8165f26ab94e
21. https://github.com/kentcdodds/react-testing-library/issues/93
22. https://stackoverflow.com/questions/43697455/how-to-mock-replace-getter-function-of-object-with-jest
23. https://github.com/airbnb/enzyme/issues/1468
24. https://stackoverflow.com/questions/46169824/intercept-navigation-change-with-jest-js-or-how-to-override-and-restore-locatio

Codepen/JSFiddle

• https://codepen.io/evgen/pen/NgpVMw
• https://jsfiddle.net/mweststrate/wv3yopo0/

Sample Projects

1. https://blog.npmjs.org/post/127671403050/testing-and-deploying-with-ordered-npm-run-scripts
2. https://appendto.com/2018/09/25-public-react-repos-apps-to-inspire-your-next-project-part-2/
3. https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183?gi=a12af8fa545f
4. https://elijahmanor.com/react-devtools-profiler/
5. https://maksimivanov.com/posts/react-native-mobx-tutorial/
6. https://philhosoft.github.io/Programming/AngularJS-1-and-MobX-2/
7. https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc
8. https://appendto.com/2018/09/geocoding-with-google-sheets-importjson/
9. http://www.deadcoderising.com/react-16-render-a-child-component-into-another-dom-node-using-portals/
10. https://hackernoon.com/building-a-blockchain-dapp-using-truffle-react-next-js-and-mobx-part-2-847193b497e4
11. https://medium.com/react-native-training/ditching-setstate-for-mobx-766c165e4578
12. https://auth0.com/blog/managing-the-state-of-react-apps-with-mobx/
13. https://github.com/taming-the-state-in-react/taming-the-state-in-react/blob/master/manuscript/06-mobx/00-mobx.md
14. http://engineering.pivotal.io/post/tdd-mobx/
15. https://github.com/gothinkster/react-mobx-realworld-example-app

Migration

1. https://tech.small-improvements.com/how-to-migrate-an-angularjs-1-app-to-react/
2. https://medium.com/hoopeez/the-deep-dive-migration-from-angular-to-react-ea5a807e95eb
3. https://levelup.gitconnected.com/how-to-manage-state-in-ionic-2-apps-with-mobx-df659de6a8aa
4. https://medium.com/hacking-talent/setstate-vs-mobx-1e81688b746
5. https://www.codementor.io/petarvukasinovic/redux-vs-vuex-for-state-management-in-vue-js-n10yd7g2f
6. https://medium.com/supercharges-mobile-product-guide/angular-redux-the-lesson-weve-learned-for-you-93bc94391958
7. https://itnext.io/build-a-view-framework-free-data-layer-based-on-mobx-integration-with-vue-1-8b524b86c7b8
8. https://codeburst.io/migrating-from-redux-to-mobx-state-tree-straight-to-the-steps-735ae20d6cd5
9. https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
10. https://www.robinwieruch.de/conditional-rendering-react/
11. https://www.robinwieruch.de/mobx-react/
12. https://appendto.com/2017/08/journey-vue-mobx/
13. https://medium.com/@aravishack/react-js-hooks-suspense-lazy-memo-context-api-hoc-refs-2c0266761f59
14. https://stackoverflow.com/questions/45947741/how-to-test-a-mobx-store-function-asynchronously-with-jest
15. https://stackoverflow.com/questions/49623682/jest-framework-throwing-error-as-unexpected-identifier-for-jquery-import
16. https://stackoverflow.com/questions/51261252/jest-unexpected-identifier-react
17. https://stackoverflow.com/questions/53884561/jest-unit-test-function-returns-syntaxerror-unexpected-identifier-at-function
18. https://stackoverflow.com/questions/28725955/how-do-i-test-a-single-file-using-jest

Mock Functions

1. https://jestjs.io/docs/en/mock-function-api
2. https://medium.com/@deanslamajr/jest-fn-all-the-things-d26f3b929986
3. https://stackoverflow.com/questions/51990121/how-to-test-in-jest-the-mediaquerlist-addlistener/52001808
4. http://nicolerauch.de/posts/2016-05-16-shallow-rendering.html
5. https://mateuszroth.pl/komp/article-react-jest-enzyme.php

References

1. https://github.com/theodesp/todo-app-mobx
2. https://github.com/airbnb/enzyme/blob/master/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
3. https://airbnb.io/enzyme/docs/api/ShallowWrapper/contains.html
4. https://airbnb.io/enzyme/docs/api/shallow.html
5. https://devhints.io/enzyme
6. https://devhints.io/enzyme@2
7. https://devhints.io/jest
8. https://jestjs.io/docs/en/expect
9. https://jestjs.io/docs/en/troubleshooting#tests-are-failing-and-you-don-t-know-why
10. https://github.com/mobxjs/mobx-react/blob/master/test/propTypes.test.js
11. https://www.ian-thomas.net/custom-proptype-validation-with-react/
12. https://jaketrent.com/post/react-oneof-vs-oneoftype/
13. https://www.javascriptstuff.com/validate-nested-proptypes/
14. https://stackoverflow.com/questions/43073338/enzyme-method-text-is-only-meant-to-be-run-on-a-single-node-0-found-instead?rq=1
15. https://github.com/jason0x43/intern-examples/blob/intern-4/react-enzyme-example/tests/unit/components/Header.js
16. https://github.com/adriantoine/enzyme-to-json/issues/19
17. https://github.com/facebook/jest/issues/2291
18. https://github.com/airbnb/enzyme/issues/1683
19. https://www.nearform.com/blog/avoiding-common-hurdles-in-unit-testing/
20. https://github.com/mobxjs/mobx-react/blob/master/test/propTypes.test.js
21. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
22. https://reactjs.org/docs/cross-origin-errors.html
23. https://reactjs.org/docs/shallow-renderer.html
24. https://discuss.reactjs.org/t/historic-reasons-behind-setstate-not-being-immediately-visible/8487
25. https://discuss.reactjs.org/t/should-we-drop-immutable-records-for-flow/12122
26. https://discuss.reactjs.org/t/constructor-props-and-super-props-vs-constructor-and-super/9036
27. http://slides.com/johnlynch/reactjs#/28
28. http://www.rigelgroupllc.com/blog/2014/01/04/reactjs-roundup/
29. https://stackoverflow.com/questions/39067004/monkey-patching-react-components
30. https://reactjs.org/blog/2018/05/23/react-v-16-4.html
31. https://github.com/facebook/react/blob/master/CHANGELOG.md
32. https://kruschecompany.com/blog/post/whats-new-in-react-16.3
33. https://cmichel.io/react-just-got-ugly-with-16-4-update/
34. https://dev.to/andrewusher17/react-164-experimental-profiler-what-is-it-4nfe
35. https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
36. https://css-tricks.com/render-children-in-react-using-fragment-or-array-components/

Mobx

1. https://philhosoft.github.io/Programming/AngularJS-1-and-MobX-2/
2. https://stackoverflow.com/questions/39036605/mobx-async-reaction
3. https://www.leighhalliday.com/mobx-async-actions
4. https://mobx.js.org/best/actions.html
5. https://github.com/mobxjs/mobx/blob/master/src/api/when.ts
6. https://github.com/mobxjs/mobx/blob/master/test/base/intercept.js
7. https://github.com/mobxjs/mobx/blob/master/test/base/map.js
8. https://medium.com/@mweststrate/mobx-2-2-explicit-actions-controlled-mutations-and-improved-dx-45cdc73c7c8d
9. https://www.sitepoint.com/manage-javascript-application-state-mobx/
10. https://medium.com/@trekinbami/observe-changes-in-dynamically-keyed-objects-with-mobx-and-react-24b4f857bae9
11. https://alexhisen.gitbooks.io/mobx-recipes/content/use-observables-instead-of-state-in-react-components.html
12. https://blog.risingstack.com/handling-react-forms-with-mobx-observables/
13. https://itnext.io/react-with-out-mobx-part-1-of-2-b540a7e631a9
14. https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc?gi=264ae55aa498
15. https://mobx.js.org/refguide/api.html#enforceactions

Axios

1. https://codereviewvideos.com/blog/7-things-i-learned-adding-jest-existing-project/
2. https://www.leighhalliday.com/testing-asynchronous-components-mocks-jest
3. https://github.com/axios/axios/blob/master/test/specs/options.spec.js
4. https://github.com/nuxt-community/axios-module/blob/master/docs/extend.md
5. https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index
6. https://medium.com/swlh/handling-access-and-refresh-tokens-using-axios-interceptors-3970b601a5da
7. https://www.sitepoint.com/axios-beginner-guide/
8. https://axios.nuxtjs.org/options.html#headers
9. https://axios.nuxtjs.org/extend.html

Enzyme

• https://github.com/facebook/jest/blob/master/docs/SnapshotTesting.md
• https://btholt.github.io/complete-intro-to-react-v2/2016/01/11/react-testing.html
• https://medium.com/@luisvieira_gmr/snapshot-testing-react-components-with-jest-best-practices-dd1585b2b93d
• https://www.jstwister.com/post/jest-snapshot-testing-with-enzyme/

ReactDOM

• https://www.slideshare.net/ronalfy/introduction-to-react-for-jquery-developers-75536302
• https://dev.to/vonheikemen/creating-react-components-using-only-es5-features-52a1
• http://www.jstips.co/en/react/
• https://blog.jfo.click/how-react-do/
• https://blog.scalac.io/2015/04/02/clojurescript-reactjs-reagent.html
• https://www.slideshare.net/ronalfy/introduction-to-react-for-jquery-developers-75536302