Tweet
Tweet

Slide 1

Slide 1 text

TDD in React using Enzyme

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Vlad “Reign” Zelinschi UI Tech Lead @ 3PillarGlobal @r31gN_ on Twitter

Slide 4

Slide 4 text

Let’s start with the “Oh, sh*t!” moments...

Slide 5

Slide 5 text

The “Oh, sh*t” summer collection 2016 ● Fixing a bug that caused numerous issues in other parts of the programme ● Not knowing that your code broke stuff ● Fear of changing code ● Fear of removing obsolete/unused code ● Realising you have designed a bad API/interface for others to consume ● Realising you have a pile of hard to read spaghetti code

Slide 6

Slide 6 text

But there’s a way out...

Slide 7

Slide 7 text

TDD!

Slide 8

Slide 8 text

TDD is not about testing. It’s a way of thinking and coding.

Slide 9

Slide 9 text

TDD ● Write new code only if you have an automated failing test ● Eliminate duplication

Slide 10

Slide 10 text

RED Write a test that doesn’t work GREEN Make the test pass (sins allowed) REFACTOR Eliminate all duplication

Slide 11

Slide 11 text

TDD ● It’s about the mindset of continuous improvement ● Tests are a means of achieving that, of accommodating your brain with this flow

Slide 12

Slide 12 text

Why Enzyme?

Slide 13

Slide 13 text

Enzyme ● It’s a JS testing utility for React ● Easy to work with, jQuery like traversal ● Easy to integrate with test runners, assertion libraries and build process (Karma, Mocha, Chai, Browserify, Webpack, etc.) ● Popularity, good maintainance & support, good docs, community, backed by AirBnB

Slide 14

Slide 14 text

The stack

Slide 15

Slide 15 text

The stack ● Babel (React preset and all…) ● React latest ● Mocha, Sinon, Chai ● Test utils ● Jsdom (needed for mounting components) ● Enzyme ● https://github.com/r31gN/tdd-react-enzyme

Slide 16

Slide 16 text

Enzyme - rendering types ● Shallow rendering ● Full rendering (mounting) ● Static rendering

Slide 17

Slide 17 text

Shallow rendering ● It considers your component as a unit ● It does not render children components (renders “one level deep”) ● It does not require a DOM (no mounting, no lifecycle components, etc.) ● Fast ● Use it for making markup related asserts

Slide 18

Slide 18 text

Full rendering (mounting) ● It renders child components as well ● Requires a DOM API to be present (use jsdom for that) ● Slow ● Ideal for use cases when you have components that interact with the DOM API, use lifecycle hooks (eg: componentDidMount), etc.

Slide 19

Slide 19 text

Static rendering ● It renders React components to static HTML for analysis ● Uses Cheerio under the hood ● Work with the resulting HTML - find(), text(), etc.

Slide 20

Slide 20 text

Examples time :)

Slide 21

Slide 21 text

Shallow rendering

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Full rendering

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

TDD with Enzyme ● Remember the TDD cycle - Red/Green/Refactor ● Set this as a mindset ● Mix static with full rendering (they serve different purposes) ● Enzyme is very friendly (very nice API, well documented) ● You will have to pair it with other technologies: either go for a granular stack (Mocha + Chai + Sinon) or opt for something like Jasmine (comprehensive, lots of functionality under one roof)

Slide 38

Slide 38 text

http://thereignn.ghost.io/a-step-by-step-tdd- approach-on-testing-react-components-usin g-enzyme/

Slide 39

Slide 39 text

Keep on smiling, because you are the most beautiful people when you do. Reign

Slide 40

Slide 40 text

Thank you! @r31gN_