Why TDD

Quick Feedback Loop

It enables you to take small steps while writing software.

Peace

How TDD

Enzyme

• Work in node env instead of browser env

• Use JSDOM

• It works with React, Angular, Vue and any other javascript framework

Writing Tests

Describe block

It block

describe() declares a test suite. A test suite can contain multiple tests. It accepts two parameters, first is the name of the suite and second is the function containing multiple tests.

it() declares a test. It accepts two parameters, first is the name of the test and second is the function containing code for actual test.

Enzyme

Shallow Renderer

Mount Renderer

Enzyme allows you to render a single component in isolation, a technique known as “shallow rendering,” and see how changes in the component’s props and state cause the render tree to change.

With shallow rendering, other components in the component’s render tree are treated as black boxes: You can see what props they receive, but not their output.

Enzyme Adaptor

 It let us plug in to the version of React we are using.

npm i --save-dev enzyme enzyme-adapter-react-16

Some Basic rules of TDD

It's all about the journey from Red to Green
 

Write the tests first! 

Keep the units small