P5.js unit testing with Jest

p5.js Coding Questions
1

Hello,
I’m trying to get Jest setup with p5.js. I’ve managed to get it all working with npm and able to run some basic unit tests however I’m having an issue when Jest hits a piece of p5 code.
I have a sketch.js file which has this piece of code in it:

export const config = {
    'lanes': null,
    'tileColours': {
        'red': color(255, 0, 0),
        'green': color(0, 255, 0),
        'blue': color(0, 0, 255),
        'yellow': color(255, 255, 0),
        'purple': color(255, 0, 255)
    }
};

I then have a belt.js file which is the file I’m wanting to unit test. It includes this code:
import config from ‘./sketch’;

/* exported Belt */

export class Belt {
    constructor() {
        this.belt = this.make2DArray(config.lanes, config.lanes);
    }
...
};

In my unit test when I import the Belt class with import {Belt} from '../belt';

I get an error from Jest:

 FAIL  test/belt.test.js
  ● Test suite failed to run

    ReferenceError: color is not defined

       8 |     'tileColours': {
    >  9 |         'red': color(255, 0, 0),
         |                ^
      10 |         'green': color(0, 255, 0),
      11 |         'blue': color(0, 0, 255),
      12 |         'yellow': color(255, 255, 0),

      at Object.color (sketch.js:9:16)
      at Object.<anonymous> (belt.js:2:1)
      at Object.<anonymous> (test/belt.test.js:1:1)

In other languages when something like this occurs I’d normally override the color variable in my test. I’ve tried different ways of doing this in JS but nothing seems to be working.

Any help you can give would be appreciated.

Thanks,
Tim

2

What about using color web format instead of color()? No experience with TDD but it is a just a lead… I hope it helps.

Kf

3

Thanks for the suggestion. Unfortunately that would mean I’d need to do that for any p5 functions that I use - negating the need for me to use p5 at all.

4

Have a look at these two links:

color() not working in on-demand global mode outside setup()/draw() · Issue #1983 · processing/p5.js · GitHub
learn | p5.js

The first one could provide some insight which I think it applies here.
The second one is using mocha/chaj. Not sure if this would apply to jest but they do work with colors there. I think their approach is based on mocks.

Kf

5

Thanks :slight_smile: I’d seen the P5 TDD article and had a read through it. I’m not a TDD expert but I think mocks are more for when you want to create a fake version of the function being called so that you can see how many times it has been called by the function you are unit testing for example.
If not I’ll see if using mocha/chaj might work easier with p5. It should be possible to use any testing framework but we’ll see!
I’l have a read through tomorrow and see if I can work it out.

6

Yes, I thought so… I should have mentioned in my prev post that there was a potential that you could have already seen the link… oh well… at least other forum goers will find it useful. I did try to setup mocha and chai asserts a while ago but I failed… more bc I didn’t know what I was doing. I hope it works for you.

Kf

7

I used global.color = require('color'); to get rid of some of the errors.
image

If you have found any other solution for this problem, also let me know. I am able to get rid of these errors for color but createDiv is giving me errors.