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

-
Taking a memory dump of a w3wp process Taking a memory dump of an IIS worker process in a live system can be problematic, as IIS will kill the process if it has been suspended for more than 60 seconds. Only use these steps if your application is on a high availability cluster, else you’ll take your app down! copy sysinternals procdump.exe and pssuspend.exe to target machine create powershell file with: $iispid = Get-Process svchost | ? { $_ . modules . ModuleName -eq "iisw3adm.dll" } | Select - First 1 - ExpandProperty Id $workerpid = Get-Process w3wp | Sort ws - Descending | Select - First 1 - ExpandProperty Id & ".\pssuspend.exe" $iispid Write-Output "Creating memory dump for w3wp PID $workerpid " & ".\procdump.exe" - ma $workerpid & ".\pssuspend.exe" $iispid - r (taken from stackoverflow ) 3) check the w3wp process has reached the high level of RAM usage that you’re intending to...
Read more

GitLab Badges

-
Image
GitLab has built in functionality to allow you to add badges, to provide an at-a-glance status of your app's quality.  In order to set project badges up, you need to be a maintainer of the project so that you can access the settings. Pipeline Status This shows whether your master branch pipeline has passed or failed.  The badge is super easy to set up.  In GitLab go to Settings > General > Badges > Add Badge, and enter this: Name:  Pipeline Link:  https://gitlab.com/%{project_path}/commits/%{default_branch} Badge: https://gitlab.com/%{project_path}/badges/%{default_branch}/pipeline.svg These links should be right for any project, as they're using variables. Coverage % Code coverage is a little more involved, as it relies on you having already configured code coverage in your app.  For the app I've been working on, which is a dotnet application, I opted to use the opensource MiniCover .  This is configured to writes a code c...
Read more

sp_blitzIndex

-
Some more notes after watching Brent’s How I Use the First Responder Kit: sp BlitzIndex . This sproc will analyse every index across all databases in your sql server and return a prioritised list of potential issues. EXEC sp_blitzIndex @GetAllDatabases = 1 The MoreInfo column is interesting. If you copy the SQL out and run it, it will give you more information on the indexing issue in question. E.g: EXEC dbo . sp_BlitzIndex @DatabaseName = 'YourDatabase' , @SchemaName = 'dbo' , @TableName = 'tFoo' ; If you run this, the top result set it a list of indexes that are on the target table. It shows how many seeks and scans each index has had, the size of the index, etc. Note the URL column for more information on each issue category. Missing indexes are shown in the 2nd result set. The 3rd result set shows the table definition, which is nice to have without having to mess with the SSMS UI.
Read more