Test Driven Development in React with Jest and Enzyme

Exploring snapshots, mock functions simulation testing and more

Introduction: How do you Develop?

This talk covers a range of testing tools that Enzyme and Jest offer for React, ranging from snapshot testing, mock functions, simulating events, and how to test component functions, props and state. We will also explore other aspects of testing including abstract-ability and logic isolation within your React projects, and finally wrap up with a testing checklist to adhere to when designing your own tests.

Enzyme and Jest are critical tools that can ensure a high level of stability to your code from your first deployment, and can be used whether you are adopting a Test Driven Development or Behaviour Driven Development strategy. Before jumping into the tools let’s review the differences between these two development approaches in an abstract way.

Behavioural Driven Development

How much time do you spend testing your apps? Is it done after a milestone or at intervals as you are developing components? The former approach gives precedence to the behaviour of the app, prioritising business logic completion over component stability. Your testing suites will be coded once the behavioural implementation is complete, the results of such tests determining the best route to refactoring your code or fixing any holes along the way.

What this approach is doing in essence is integration testing your components before writing your unit tests — or any formal tests at all using a sophisticated framework like Jest. This indeed yields a faster turnaround, and is quite widely adopted. Why is this the case? It could be because business meetings rarely discuss apps from a test driven angle — the focus is always on the end result or the intended behaviour set out to be achieved. It is arguably natural to lean towards BDD given these factors; meeting notes will be totally behavioural-based, with a tight schedule to get the job done.

Now, this may be great for rapid prototyping or creating a proof of concept — but for apps with a sizeable codebase, complex integrations with a range of services, or simply a large team…