next.js testing frameworks

I figured the next step was to learn how to approach writing react components using TDD.

I found this guide that recommends some libraries for assertions, spies, and also a testing framework and DOM simulator. Also a test runner… Ahhh so many to learn!

Why so many libraries?!?

This is one of the reasons I’ve previously been so detracted from starting to learn a front-end development framework, as the learning curve appears very steep. Spoiler alert, I don’t end up using most of these, so just read on.

Let’s try and understand what each library is for and where it fits in. I’ve been a C# developer for a long time, so I’ll draw a parallel between the two ecosystems.

Sinonjs

Sinonjs is a spies, stubs and mocks framework. To draw a parallel; it’s pretty much how I’ve used AutoMocker on C# projects. Par examplĂ©:

  it('needsLogin returns false when the user has been authenticated', () => {
    spy = spyOn(service, 'isAuthenticated').and.returnValue(true);
    expect(component.needsLogin()).toBeFalsy();
    expect(service.isAuthenticated).toHaveBeenCalled();
  });

Chaijs

Chaijs is essentially an assertion framework, and my best parallel here is FluentAssertions.

Chai allows for 3 different syntaxes, but this is the one I like:

foo.should.be.a('string');
foo.should.equal('bar');

Enzyme

Enzyme allows for easier testing of React components. I presume it is essentially a testing framework. I’ll just paste the product blurb:

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Jsdom

Jsdom appears to allow you to mock user interactions with a headless browser. This sounds like it’d be useful for testing whether given inputs enact given actions in your business logic. I haven’t used something like this before and it sounds out of scope for TDD anyway, so I’m not going to bother with this right now.

Mocha

As for mocha; this one is easy. It’s a test runner! For C# developers we get a test runner included in Visual Studio, or additionally as part of resharper.

It seems easy enough to run the tests with npm test, and the test output looks nice and clean.

Setting up

Install all the libraries we’re going to need. For these steps I’m combining this, this, and this.

I’ve separated the dependencies here, so that it’ll be easier to swap out a given framework later.

Enzyme

yarn add enzyme enzyme-adapter-react-16 --dev
yarn add react react-dom

Worth noting that enzyme-adapter-react-16 is for react version 16. This will need to change for subsequent versions.

There were a bunch of extra dependencies unique to each post I read. I’ll pop them here just so I don’t lose track of them, but I’m not going to install them up-front:

yarn add react-addons-test-utils --dev
yarn add babel-preset-es2015 --dev
yarn add babel-preset-react --dev

Mocha

yarn global add mocha
yarn add @types/mocha @babel/core --dev

It’s worth noting that babel-core is an older version, and @babel/core is new.

Chai & sinon

yarn add chai sinon --dev

And then?

So… I’ve gotten as far as writing a test to see if mocha was wired up. Pop this into ./tests/foo.spec.js:

expect = require("chai").expect;
describe("the environment", () => {
  it("works, hopefully", () => {
    expect(true).to.be.true;
  });
});

And run it with:

yarn -- mocha ./tests/foo.spec.js

Nice! That works! Though I’ve only touched mocha and chai here. I’ll take a look at what’s involved with sinon and enzyme another time.

Popular posts from this blog

Taking a memory dump of a w3wp process

sp_blitzIndex

GitLab Badges