尝试使用Chai＆Mocha测试旧版jQuery插件时未定义jQuery

Question

I'm trying to write a unit test for old jQuery plugin. I am kind of new in modern Javascript environment. I have tried creating unit test for React that uses browserify for deploying in production.

The legacy jQuery plugin file is like below

(function($) {
    $.fn.myLegacyPlugin = function() {
        alert('Hello World!');
    };
})(jQuery);

This file will be uploaded to S3 and accessed via CDN. The jQuery will be included in normal browser head tag.

The test file is like below.

let expect = require('chai').expect;
let path = require('path');
let $ = require('jquery');

require('../src/plugin.js');

describe('plugin', () => {
    it('should return okay', () => {
        expect(true).to.be.true; //TODO
    });
});

The problem is that when I tried executing the test, the runner displays jQuery is not defined . Without modifying the legacy jQuery plugin, how do I test the plugin?

The code is here https://github.com/petrabarus/js-test-jquery-legacy

Answer 1

After trying few possibilities, instead of using module import, I can just use read file and evaluate the script content.

Only change

require('../src/plugin.js');

to this

eval(fs.readFileSync(path.join(__dirname, '../src') + '/plugin.js', 'utf8'));

This way I don't have to modify the legacy file.

Answer 2

It might be that you are requiring jquery as "$" and passing it to plugin as "jQuery". Although jquery should be defined with both names, regardless. Could you try requiring jquery like so:

let jQuery= require('jquery');

Answer 2: actually, if your code (plugin) depends on jquery, your plugin.js should require jquery before loading..

so change plugin.js to

let $ = require('jquery');
// rest of plugin code...