An Overview of JavaScript Testing in 2017

Vitali Zaidman
Apr 19, 2017 · 17 min read
Image for post
Image for post

***** Important update: ****

A new version of this guide was released.

Image for post
Image for post
Image for post
Image for post

Test Types

Test Tools Types

describe('calculator', function() {  // describes a module with nested "describe" functions
describe('add', function() {
// specify the expected behavior
it('should add 2 numbers', function() {
//Use assertion functions to test the expected behavior
})
})})
// Chai expect
expect(foo).to.be.a('string')
expect(foo).to.equal('bar')
// Jasmine expect
expect(foo).toBeString()
expect(foo).toEqual('bar')
// Chai assert
assert.typeOf(foo, 'string')
assert.equal(foo, 'bar')
// Unexpected expect
expect(foo, 'to be a', 'string')
expect(foo, 'to be', 'bar')
it('should call method once with the argument 3', () => {
const spy = sinon.spy(object, 'method')
spy.withArgs(3) object.method(3) assert(spy.withArgs(3).calledOnce)
})
sinon.stub(user, 'isValid').returns(true) // SinonspyOn(user, 'isValid').andReturns(true) // Jasmine
it('resolves with the right name', done => {  const stub = sinon.stub(User.prototype, 'fetch')
.resolves({ name: 'David' })

User.fetch()
.then(user => {
expect(user.name).toBe('David')
done()
})
})
it('returns an object containing all users', done => {  const server = sinon.fakeServer.create()  server.respondWith('GET', '/users', [
200,
{ 'Content-Type': 'application/json' },
'[{ "id": 1, "name": "Gwen" }, { "id": 2, "name": "John" }]'
])
Users.all()
.done(collection => {
const expectedCollection = [
{ id: 1, name: 'Gwen' },
{ id: 2, name: 'John' }
]
expect(collection.toJSON()).to.eql(expectedCollection) done()
})

server.respond()
server.restore()
});
it('renders correctly', () => {
const linkInstance = (
<Link page="http://www.facebook.com">Facebook</Link>
)
const tree = renderer.create(linkInstance).toJSON() expect(tree).toMatchSnapshot()
})
Image for post
Image for post

Putting it All Together

***** Important update: ****

A new version of this guide for was released.

List of General Prominent Testing Tools

Image for post
Image for post

Choose Your Framework

// "describe" is in the global scope already
// so no these require lines are not required:
//
// const jasmine = require('jasmine')
// const describe = jasmine.describe
describe('calculator', function() {
...
})

Unit Tests

Integration Tests

Functional Tests

describe('login form', () => {  before(() => {
return driver.navigate().to('http://path.to.test.app/')
})
it('autocompletes the name field', () => { driver.findElement(By.css('.autocomplete'))
.sendKeys('John')
driver.wait(until.elementLocated(By.css('.suggestion'))) driver.findElement(By.css('.suggestion')).click() return driver.findElement(By.css('.autocomplete'))
.getAttribute('value')
.then(inputValue => {
expect(inputValue).to.equal('John Doe')
})
})

after(() => {
return driver.quit()
})
})
Feature: A reader can share an article to social networks
As a reader
I want to share articles
So that I can notify my friends about an article I liked
Scenario: An article was opened
Given I'm inside an article
When I share the article
Then the article should change to a "shared" state
module.exports = function() {
this.Given(/^I'm inside an article$/, function(callback) {
// functional testing tool code
})
this.When(/^I share the article$/, function(callback) {
// functional testing tool code
})

this.Then(/^the article should change to a "shared" state$/, function(callback) {
// functional testing tool code
})
}

Contribute

Conclusion

Image for post
Image for post

Suggested Articles

General

testdouble, Sinon

Unexpected.js

Testing Frameworks Comparison

Jest

Ava

Tape

Selenium

TestCafe

powtoon-engineering

on animation, video, design, software and what's between…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store