Aurelia Jest 与 aurelia-ui-virtualization 插件单元测试错误

Question

我们使用 aurelia-ui-virtualization 在组件中实现了一个功能，并且一切正常。 问题是它几乎破坏了我们所有的单元测试。 它现在抛出一个错误。

类型错误：无法读取未定义的属性“attrToRemove”

我相信这是因为virtual-repeat.for属性。

我为此示例创建了一个简单的测试：

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);
            }
        });
    });
});

所以我假设 aurelia 需要加载aurelia-ui-virtualization插件。 所以我改变了这段代码：

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

我得到这个错误：

无法从“aurelia-loader-nodejs.js”中找到模块“/Users/dustin/dev/bindable/aurelia-ui-virtualization”

我不确定为什么它不在我的node_modules目录中查找。 我认为这可能是因为我的 jest-pretest.ts 文件的这一部分：

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

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

但我确实有一个 jest.config.js 文件，其中包含我的 node_modules 目录：

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

如果我将插件路径更改为node_modules/aurelia-ui-virtualization然后我得到这个错误：

    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

几天来我一直在努力解决这个问题。 如果有人能指出正确的方向来修复我的单元测试，我将不胜感激！

Answer 1

我找到了解决办法。 我了解到 jsdom 没有实现reqeustAnimationFrame 。 我添加了一个 pollyfill 并在我的 jest-pretest.ts 文件中将其设置为全局：

// 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;