Andmapco - dev team

https://github.com/stripe/react-stripe-js/blob/master/src/components/Elements.tsx export const mockElement = () => ({ mount : jest . fn (), destroy : jest . fn (), on : jest . fn (), update : jest . fn (), }) export const mockElements = () => { const elements = {} return { create : jest . fn ( type => { return mockElement () }), getElement : jest . fn ( type => { return mockElement }), } } export const mockStripe = () => ({ elements : jest . fn (() => mockElements ()), createToken : jest . fn (), createSource : jest . fn (), createPaymentMethod : jest . fn (), confirmCardPayment : jest . fn (() => { return { paymentIntent : { id : 'test' , status : 'succeeded' } } }), confirmCardSetup : jest . fn (), paymentRequest : jest . fn (), _registerWrapper : jest . fn (), }) import * as stripeMocks from './stripe-mocks' const renderComponen...

Many integration tests. No snapshot tests. Few unit tests. Few e to e tests. Integration tests should mock as little as possible Mount/render is typically used for integration testing and shallow is used for unit testing. shallow rendering only renders the single component we are testing. It does not render child components. This allows us to test our component in isolation. unit vs integration vs end to end unit testing : testing an isolated part of your app, usually done in combination with shallow rendering. example: a component renders with the default props. integration testing:  testing if different parts work or integrate with each other. Usually done with mounting or rendering a component. example: test if a child component can update context state in a parent. e to e testing : Stands for end to end. Usually a multi step test combining multiple unit and integration tests into one big test. Usually very little is mocked or stubbed. Tests are done in a simulated browser, ther...

react: https://testing-library.com/docs/react-testing-library/setup ======= with apollo: Note:  As of React Apollo 3, all testing utilities can now be found in their own  @apollo/react-testing  package. npm install @apollo/react-testing https://www.apollographql.com/docs/react/api/react-testing/ ======== Watch "Fix the "not wrapped in act(...)" warning" on egghead.io https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

Languages which support closure (such as JavaScript, Swift, and Ruby) will allow you to keep a reference to a scope (including its parent scopes), even after the block in which those variables were declared has finished executing, provided you keep a reference to that block or function somewhere. outer = function () { var a = 1 ; var inner = function () { console . log ( a ); } return inner ; // this returns a function } var fnc = outer (); // execute outer to get inner fnc (); As you might be able to guess, when I call  fnc()  it prints the value of  a , which is "1". =========================== function add (a) { return function (b) { return a + b; } } var add3 = add(3); add3(4); // returns 7 ======================== var  add = ( function  () {    var  counter =  0 ;    return   function  () {counter +=  1 ;  return  counter} })(); add(); add(); add(); // the coun...

padestal.io https://clojure.org/index Atoms, Reducers, Agents/Actions Immutable Data and React https://www.youtube.com/watch?v=I7IdS-PbEgI&feature=youtu.be persistent data structure

https://graphql-code-generator.com/docs/plugins/typescript-react-apollo TypeScript React Apollo In order to use this package, please make sure that you have GraphQL operations set as  documents: ...  in your  codegen.yml . Without loading your GraphQL operations (query, mutation, subscription and fragment), you won't see any change in the generated output. # Installation Copy $ yarn add @graphql-codegen/typescript-react-apollo

https://reactjs.org/docs/testing-recipes.html Setup/Teardown act() Rendering Data Fetching Mocking Modules Events Timers Snapshot Testing Multiple Renderers Something Missing?

https://www.npmjs.com/package/use-reducer-with-side-effects https://github.com/conorhastings/use-reducer-with-side-effects/blob/master/src/index.js import  useReducerWithSideEffects ,   {  UpdateWithSideEffect ,  Update  }   from   ' use-reducer-with-side-effects ' ;   function   Avatar ( {  userName  } )   {    const   [ {   fetchingAvatar ,   avatar   } ,   dispatch ]   =   useReducerWithSideEffects (      ( state ,  action )   =>   {        switch   ( action . type )   {          case   FETCH_AVATAR :   {            return   UpdateWithSideEffect ( {   ... state ,  fetchingAvatar :   true   } ,   ( state ,  dispatch )   =>   {   //  the second...

https://wanago.io/2019/11/11/javascript-design-patterns-1-singleton-and-the-module/ https://wanago.io/2019/02/11/node-js-typescript-modules-file-system/ class Singleton {    static instance ;    constructor ( ) {      // your logic here    }    static getInstance ( ) {      if ( Singleton . instance ) {        return Singleton . instance ;      }      Singleton . instance = new Singleton ( ) ;      return Singleton . instance ;    } }