Unit testing with Jest: Redux + async actions + fetch

  • Unit testing with Jest: Redux + async actions + fetchUsing Jest v20LAST UPDATE: June 24, 2017.
  • Ok, now, let’s test it step by step based on the WritingTests from the Redux docs.A big change here since I first wrote this article in 2016 is that Jest now does not mock your dependencies automatically like it used to.
  • /api’;import configureMockStore from ‘redux-mock-store’import thunk from ‘redux-thunk’const middlewares = [ thunk ];const mockStore = I am also going to write a helper method to mock the fetch response (we don’t need nock as suggested in the Redux Writing Test example):const mockResponse = (status, statusText, response) = { return new window.Response(response,…
  • Do you remember the import at the beginning of our example action code?import ‘whatwg-fetch’If you or your team forget to use the polyfill version of fetch, Chrome or FF will still work and you won’t notice it!
  • Thanks to the Redux docs for the great explanation of how we can test those async actions and for the mocha example (2017 note: They changed the example to use Jest!)

I have been using Jest since its beginnings. I won’t lie, the path has been painful: Things like updating from version 0.x.0 to version 0.y.0 (specially to version 0.4.0) was particularly terrible…
Continue reading “Unit testing with Jest: Redux + async actions + fetch”

How extensively/deeply do you validate props in React?

Do you validate props in your #ReactJS components? 🕵 How deeply?  #JavaScript #WebDev

  • Also setting isRequired on a component’s props is a valuable way of declaring mandatory props.
  • I then later realised the value in doing so because if you are a fresh pair of eyes on somebody else’s code, and looking at the props on a component that you are changing, at a glance you will see the required data types and structure for that component, even if that component is 3/4 layers deep.
  • To reduce the repetitive validation checks, when same props are being passed down around to multiple components, I create modules for prop interfaces and import that in individual components.
  • /IFormTheme’ class SomeFormControl extends Components { static propTypes = { theme: IFormTheme } …
  • At my company we do it the whole way down, I initially started doing this when my company’s EsLint config required it (you will get errors when linting etc.).

Do you even validate the internal structure of your props, or do you just validate at the top level?. Tagged with React Native,ReactJS.
Continue reading “How extensively/deeply do you validate props in React?”

Movio July Tech Digest

Movio July Tech Digest focuses on @reactjs and #Redux - stories via @dan_abramov

  • We don’t take the time to bring these concepts into focus, and this means that we treat the knowledge that we get about these – the recommendations – as received knowledge and we just follow those recommendations because someone smarter than us told us to.
  • But not all recommendations work the same in different situations so I want to bring these concepts around performance into focus so you have a better understanding of the why behind each recommendation”
  • Each month a Movio Crew squad takes control of the blog and pick a few of their recent favorite technology articles, which we share in the form of a brief extract and a link to the original content.
  • “What I’d like to do is sort of talk about the ways in which we are already using functional ideas in mainstream JavaScript, and how we can pay better attention to those and get better value out of them.”
  • Contributing author: Raghu Kasturi The theme of this tech digest is React and Redux, two technologies on the front-end that we’ve adopted across a few squads.

Read the full article, click here.


@MovioHQ: “Movio July Tech Digest focuses on @reactjs and #Redux – stories via @dan_abramov”


Welcome to the Movio Monthly Tech Digest. Each month a Movio Crew squad will take control of the blog and pick a few of their recent favorite technology articles, which we share here in the form of a brief extract and a link to the original content.


Movio July Tech Digest