React + Jest + Enzyme: how to cook in 5 mins – Vladislav Dekhanov – Medium

React + Jest + Enzyme: how to cook in 5 mins  #jest #javascript #react #enzyme #reactjs

  • This testing tool has a lot powerful features from the box (snapshots, coverage tool, matchers and async testing) which pretty useful and necessary in medium and small projects on the start.
  • Nowadays, this could be a important point for frontend development cause project based on React has about a dozen dependencies from transpilers (if you use ES6) and Redux.JestTo install Jest and some dependencies you just need to run simple command:npm install –save-dev jest babel-jest identity-obj-proxyand add the following config in the package.jsonPackage babel-jest is optional.
  • We would use it to support ES6 in the tests.Let’s pay a little bit attention on each section:In transform you would use or your custom transform script or (as we did in this article) already implemented script for support ES6 syntax.moduleNameMapper would be useful if you use CSS Modules in your project to encapsulate your styles for each component.collectCoverageFrom and coverageReports configure our coverage settings.
  • If you will run jest –coverage you will be able to see results of this settings after runs of all tests.EnzymeJust runnpm install –save-dev enzymeand we able to implement our test with enzyme!Let’s see on the example below:I use mount method in this example just to imitate full dom rendering, but you would use render or shallow depends on your purposes.In this test we gonna use jest snapshots which i described above.
  • With this feature we would easy to find out what actually in the DOM of the component is changed and fix the problem or run jest –updateSnapshots to update snapshots as you guess.ConclusionTwo statements in command prompt, one config in package.json and… that’s all.

In this article we gonna take a look at awesome testing tool Jest and how to use it with React and Enzyme. First of all we need to figure out why we have to decide to use Jest. This testing tool has…

@ReactDOM: React + Jest + Enzyme: how to cook in 5 mins #jest #javascript #react #enzyme #reactjs

In this article we gonna take a look at awesome testing tool Jest and how to use it with React and Enzyme.

First of all we need to figure out why we have to decide to use Jest. This testing tool has a lot powerful features from the box (snapshots, coverage tool, matchers and async testing) which pretty useful and necessary in medium and small projects on the start. Big variety of features helps us to keep our project free from extra dependencies. Nowadays, this could be a important point for frontend development cause project based on React has about a dozen dependencies from transpilers (if you use ES6) and Redux.

and some dependencies you just need to run simple command:

in the tests.

Let’s pay a little bit attention on each section:

Just run

Let’s see on the example below:

depends on your purposes.

to update snapshots as you guess.

React + Jest + Enzyme: how to cook in 5 mins – Vladislav Dekhanov – Medium