Aurelia Jest with aurelia-ui-virtualization plugin unit testing errors

Question

We implemented a feature in a component using aurelia-ui-virtualization and all works well. The problem is that it broke almost all our of unit tests. It throws an error now.

TypeError: Cannot read property 'attrToRemove' of undefined

I believe this is because of the virtual-repeat.for attribute.

I've created a simple test for this example:

import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

describe('c-form-select component', () => {
    let component;

    describe('Integration', () => {
        // Test if search is enabled
        it('testing search', async done => {
            component = StageComponent.withResources()
                .inView('<c-form-select search.bind="customsearch"></c-form-select>')
                .boundTo({
                    customSearch: 1,
                });

            try {
                component.bootstrap(au => au.use.standardConfiguration().feature('src'));
                await component.create(bootstrap);
                expect(component.viewModel.search).toBe(false);
                component.dispose();
                done();
            } catch (e) {
                done.fail(e);
            }
        });
    });
});

So I assume aurelia needs to load the aurelia-ui-virtualization plugin. So I change this code:

                component.bootstrap(au =>
                    au.use
                        .standardConfiguration()
                        .plugin('aurelia-ui-virtualization')
                        .feature('src'),
                );

And I get this error:

Cannot find module '/Users/dustin/dev/bindable/aurelia-ui-virtualization' from 'aurelia-loader-nodejs.js'

I'm not sure why it is not looking in my node_modules directory. I assume it might be because of this part of my jest-pretest.ts file:

import {Options} from 'aurelia-loader-nodejs';

Options.relativeToDir = path.join(__dirname, '../');

But I do have a jest.config.js file that has my node_modules directory included:

    modulePaths: [
        '<rootDir>/src',
        '<rootDir>/node_modules'
    ],

If I change the plugin path to node_modules/aurelia-ui-virtualization then I get this error:

    TypeError: Cannot read property 'bind' of undefined

      at Object.<anonymous> (node_modules/aurelia-ui-virtualization/dist/commonjs/aurelia-ui-virtualization.js:70:34)
      at advancedRequire (node_modules/aurelia-loader-nodejs/dist/commonjs/aurelia-loader-nodejs.js:78:28)
      at NodeJsLoader.<anonymous> (node_modules/aurelia-loader-nodejs/dist/commonjs/aurelia-loader-nodejs.js:196:46)
      at step (node_modules/aurelia-loader-nodejs/dist/commonjs/aurelia-loader-nodejs.js:42:23)
      at Object.next (node_modules/aurelia-loader-nodejs/dist/commonjs/aurelia-loader-nodejs.js:23:53)
      at node_modules/aurelia-loader-nodejs/dist/commonjs/aurelia-loader-nodejs.js:17:71

I've been spinning my wheels on this for a couple of days. If anyone can point me in the right direction to fix my unit tests I'd really be grateful!

Answer 1

I found a solution. I learned jsdom does not implement reqeustAnimationFrame. I added a pollyfill and made it global in my jest-pretest.ts file:

// Add requestAnimationFrame pollyfill to fix aurelia-ui-virtualiztion issues
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function(window, rAF, cAF) {
    var lastTime = 0,
        vendors = ['ms', 'moz', 'webkit', 'o'],
        x;

    for (x = 0; x < vendors.length && !window[rAF]; ++x) {
        window[rAF] = window[vendors[x] + 'RequestAnimationFrame'];
        window[cAF] = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window[rAF]) {
        window[rAF] = function(callback) {
            var currTime = new Date().getTime(),
                timeToCall = Math.max(0, 16 - (currTime - lastTime)),
                id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                }, timeToCall);

            lastTime = currTime + timeToCall;

            return id;
        };
    }

    if (!window[cAF]) {
        window[cAF] = function(id) {
            window.clearTimeout(id);
        };
    }
})(global.window, 'requestAnimationFrame', 'cancelAnimationFrame');

global.requestAnimationFrame = global.window.requestAnimationFrame;