Lessons learned testing React & Redux apps with Jest and Enzyme

Lessons learned #testing #reactjs  & #Redux #apps with #Jest and #Enzyme  #javascript

  • It makes things much easier, and you can pattern match (hit p then type part of your file/folder name) to make sure you’re not running a ton of things every save.Make sure you don’t close off your test() statements early.Parentheses man… 😢Is perfectly valid Javascript, but your test (while it…
  • I only noticed that I had this copy and pasted for one section of my unit tests when I made an error and realized the test didn’t fail.Which leads me to…Make sure your tests failIf you’re awesome and use TDD, then props to you you’re already doing this 🎉For the rest…
  • Time to move on.”However this leads to errors like the aforementioned one, and it’s surprisingly easy to grab and test the wrong element or mocked function — especially if you’re copy pasting from a similar test.It’s not hard to just comment out an essential section of a test and make sure it…
  • It’s also easy to copy to another component with a similar need for testing.In fact all of the little conventions I’m following here (beforeEach mounting a wrapper, what I name things, spreading a props object) are great to have defined somewhere so people can easily understand and copy test functionality…
  • It also makes testing quite simple and separates rendering vs data concernsI try to extract any complex data manipulation to pure functions and test thoseI use end to end (Selenium) and integration tests to check on sections of my app to make sure it all fits together.It’s not perfect, I’m…

If you don’t work at a primarily tech company, it can be a bit difficult to convince managers of the importance of things like unit testing. After being a enthusiastic supporter for quite a while, I…
Continue reading “Lessons learned testing React & Redux apps with Jest and Enzyme”

So you want to learn React.js? – EdgeCoders

So you want to learn React.js?


#javascript #ReactJS

  • This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.However, identify whether what you’re currently learning is React or not, mainly so that you don’t get confused about your effort to learn React itself.
  • This is not counting the tools and other libraries that complete React like for example, Redux or Relay.There is an important question about the order with which you need to learn things.
  • I like to be specific about this here, so if you don’t know how to map or reduce an array, or if you don’t understand the concept of closures and callbacks, or if seeing “this” in JavaScript code confuses you, you’re not ready for React and you still have a…
  • Imports and exports of modules (most important of all)You don’t have to start with ES2015, but you do need to eventually learn it (and not because you’re learning React).
  • Don’t start here until you’re very comfortable with React itself.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

Bauble Toggle @CodePen @greensock @reactjs #svg #interactive #ChristmasIsComing

Bauble Toggle @CodePen  @greensock @reactjs #svg #interactive #ChristmasIsComing

  • You can apply CSS to your Pen from any stylesheet on the web.
  • Just put a URL to it here and we’ll apply it, in the order you have them, before the CSS in the Pen itself.
  • If the stylesheet you link to has the file extension of a preprocessor, we’ll attempt to process it before applying.
  • You can also link to another Pen here, and we’ll pull the CSS from that Pen and include it.
  • If it’s using a matching preprocessor, we’ll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Choose your colour! A bauble toggle made with SVG in ReactJS with GreenSock….
Continue reading “Bauble Toggle @CodePen @greensock @reactjs #svg #interactive #ChristmasIsComing”

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”

Improving the usability of your modules – kentcdodds

Improving the usability of your modules  #reactjs

  • All you have to do is use it:import getContentForFile from ‘react-i18n’const i18n = App() { return ( div h1{i18n(‘header.title’)}/h1 /div )}So that’s how it works (again, I’m sure some of you are thinking of other libs that could do this better, but please spare me the “well actually.” I’m aware…
  • const content = JSON.parse( … more stuffexport {getContentForFile as default, init}This presents a few challenges for users of the module.
  • Turns out that react-i18n actually exposed another module react-i18n/bootstrap to customize this behavior which is great, but that doesn’t resolve the problem of stuff happening if someone were to import react-i18n first.So what I did was a wrapped all side-effects in a function I exported called init(which was similar to…
  • But it’s ok now because that’s clear const messages = JSON.parse( ) // … other other stuff}// … more stuffexport {getContentForFile as default, init}So this means that anyone using the module now must call the init function, but they’re doing that on their own terms and whenever they want it…
  • However, we’re in the process of “inner sourcing” this module (and perhaps open sourcing it eventually), so folks are going to use it who use different tools and have different use cases.So, if it’s not too much work and doesn’t add too much complexity, then try to make the solution…

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 This last week I worked on my…
Continue reading “Improving the usability of your modules – kentcdodds”

Relax with React – Natasha Gitlin – Medium

Relax with React  #props #react #components #state #lifecycle #reactjs

  • With JSX, you pass a function as the event handler rather than a string.ComponentsReact is made up of container and presentational components or as Dan Abramov coined it, smart and dumb.
  • Presentational components are concerned with [how things look], receive data and callbacks with exclusively props and rarely have their own state.
  • Container components concerned with [how things work], provide application data and fetch data.
  • It is just another way of building an MVC framework where the presentational components are the views and container the controllers.LifecycleThe lifecycle of a component are customizable and goes through different phases when the components are in a state of change.
  • A prop supports or keeps something in position whereas a state is a condition that is susceptible to change.Before I dive right into my final project, I need to figure out the proper structure of my application.

I have made it to the final level. I’ve acquired the XP and skillset needed to ascend to the top and attain the apex of web development. Mind you, this is just the first hurdle in my programming…
Continue reading “Relax with React – Natasha Gitlin – Medium”

Monday & #ReactNative 💙 #iOS #Android #mobile #apps #DevOps #software

Monday & #ReactNative 💙 

#iOS #Android #mobile #apps #DevOps #software

  • That’s why, today I’d like to share a number of things that boost my productivity while creating mobile app in React Native.
  • Storybook allows you to create stories in which you prepare pre filled UI elements with data that could possibly show up there during normal app lifetime.
  • Later within a few seconds you can easily go through all stories that you’ve described and see how they look on your device / emulator without the need of going through all of these states in normal app flow which takes much longer time.
  • This is a tiny example of a single story, however if you develop a normal app, you will surely have much more of them which may cover all of possible UI states for your components.
  • If your app grows, it’s easy to guess that tests will not run in a matter of milliseconds, but it’s still normal to have a result of them within 1-3 seconds from the time that you saved your file.

A developer needs tools that support her/his workflow to be fully productive. Well, I guess that this statement fits to any profession that you can think of. It is really important for me to feel that the environment that I’m working in really supports my flow and works well with my approach to software development.
Continue reading “Monday & #ReactNative 💙

#iOS #Android #mobile #apps #DevOps #software”