Test Driven Development with React
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
