testing of react js app

React JS application testing

with: mocha, enzyme, webdriver.iogoo.gl/9zC48K

Oleksandr ZinevychSoftware engineer at Datamart inc.

6+ years of experience

Preferred technologies: Javascript, .NET

goo.gl/9zC48K

Agenda

What is software testing

Why we don’t like to write tests

Why it might be very helpful for us

Example of successful tests implementation

goo.gl/9zC48K

Software testing is smth about ...

Do you like to cover your code with tests?

But why?

It’s boring

We do not have enough time for writing tests

We do not have a budget for writing testing

QA should do that

We don't use TDD, so that's why there are no unit tests

… and much more!goo.gl/9zC48K

Usually we start writing tests when:

It was a specific task

There is no interesting features to do :)

Project is almost done

There was a huge fuck-up recently

goo.gl/9zC48K

Development Unit Tests

Costs

TimeQA Testing Production

We should write tests because

It will increase stability of the app

Extending the app will be less risky

Architecture will be better

Code will be more understandable

It will make your customers and users happier

goo.gl/9zC48K

Demo application architecture

Rest API Proxy API ReactJS part

goo.gl/9zC48K

Common ways of testing ReactJS Components

ReactTestUtils

Jest (Facebook)

Enzyme (Airbnb)

What is Enzyme?

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

goo.gl/9zC48K

Shallow render Full DOM render Static render

Enzyme

Renders your component as a single unit, without impacting of childs

When you need to test interaction with DOM API, or component lifecycle

Renders React Component to static HTML

Render process

shallow(<YourComponent />)

mount(<YourComponent />)

render(<YourComponent />)

ReactWrapper:

.find(selector)

.contains(selector)

.children()

.parents()

etc...

Props mocking

The simplest test

Another one

Card component

Initial test

Header test

State processing

MountWithTheme

Enzyme known issues

SFC(Stateless Functional Component) with mount

Use Redux connect just in root component

Works only with React

Part 2

Functional and Integration testing

Integration testing - combines unit tests, and checks the this combination works as expected

Functional (Acceptance) testing - tests which are written to see whether the application's functionality satisfies the specification

A little bit of history

Selenium 1.0

Webdriver

WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behaviour of web browsers.

Selenium 1.0 + Webdriver = Selenium 2.0

InternetExplorerDriver FirefoxDriver ChromeDriver SafariDriver

Webdriver.io - Selenium 2.0 binding for node.js

How it works?

Remote or Local Selenium

Server

Browser-specificWebdriver

Why webdriver.io?

Synchronous implementation of asynchronous browser

commandsSimpler syntax

Better documentation

Flexibility and customization

Config file

Page object example

webdriver.io simple test example

Form testing example

Page Object helper functions

Conclusion

Frontend tests are really important and useful

The cost is not really big, profit is much bigger

It’s easy to write them with modern approaches

Thank you!

Demo project: https://github.com/zinevych/hot-complaints-universal

Email: aleksanderzinewicz@gmail.com

Facebook: https://www.facebook.com/aleks.zinevych

Questions?