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 Customization and Limitations

  1. https://test-utils.vuejs.org/guide/advanced/vuex
  2. https://github.com/posva/vuex-mock-store?tab=readme-ov-file#providing-custom-spies
  3. https://stackoverflow.com/questions/41150475/how-to-fake-being-offline-in-jasmine
  4. https://github.com/facebook/jest/issues/6798
  5. https://github.com/facebook/jest/issues/6798
  6. 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

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

Enzyme

ReactDOM

Example Jest Test

// Foo.vue
<template>
  <div>
    <Bar />
  </div>
</template>

<script>
import Bar from './Bar.vue';

export default {
  components: {
    Bar
  }
};
</script>

// Bar.vue
<template>
  <span>Content</span>
</template>

<script>
export default {
  name: 'Bar'
};
</script>

// Foo.spec.js
import { shallowMount } from '@vue/test-utils';
import Foo from '@/components/Foo.vue';
import Bar from '@/components/Bar.vue';

describe('Foo.vue', () => {
  it('renders a div with a nested span', () => {
    const wrapper = shallowMount(Foo, {
      stubs: {
        Bar
      }
    });
    expect(wrapper.find('div').exists()).toBe(true);
    expect(wrapper.find('div span').exists()).toBe(true);
  });
});

Declarative YAML Test

test:
  description: "renders a div with a nested span"
  setup:
    component: "Foo"
    stubs:
      - "Bar"
  assertions:
    - find: "div"
      exists: true
    - find: "div span"
      exists: true
⚠️ **GitHub.com Fallback** ⚠️