Question

使用jest如何在我的jQuery应用程序中测试发出ajax请求的函数并模拟其响应？我的应用程序不是在nodejs中编译的，而是直接在浏览器中运行。 jest网站https://github.com/facebook/jest/tree/master/examples/jquery上的示例假设ajax函数是一个单独的模块，整个应用程序使用类似webpack的编译。这是我的应用程序：

MyApp

Answer 1

使用jest.fn（）模拟$ .ajax。

let browser: puppeteer.Browser;
let page: puppeteer.Page;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false
  });
  page = await browser.newPage();
});

//Do My Test

Answer 2

在项目根目录中创建__mocks__/jquery.js以模拟jquery node_module。您可以在模拟jquery中调用函数。这是一个简单的代码片段：

const $ = {
  ajax(xhr) { return this },
  done(fn) {
    if (fn) fn();
    return this;
  },
  fail(fn) {
    if (fn) fn();
    return this;
  }
};
export default $;

在expect中添加一些fn来测试您的真实逻辑。

Answer 3

我发现不使用模块和Webpack即可测试文件的最简单设置是手动创建脚本并将其添加到window.document。您可以使用fs和path模块直接在测试文件中引用相对路径。完成所有工作后，您可以按照ycavatars回答以模拟ajax调用。
这是测试jQuery基本功能的简单代码段，然后您可以添加新脚本来测试自己文件中的功能：

const fs = require('fs');
const path = require('path');

const jQueryFile = fs.readFileSync(path.resolve(__dirname, '../relative/path/to/jquery.js'), { encoding: 'utf-8' });
const srcFile = fs.readFileSync(path.resolve(__dirname, '../relative/path/to/yourScript.js'), { encoding: 'utf-8' });

describe('yourScript.js', () => {
    beforeAll(() => {
        // load the scripts
        const scriptEl = window.document.createElement('script');
        scriptEl.textContent = jQueryFile; // add jQuery file
        window.document.body.appendChild(scriptEl);

        const scriptEl2 = window.document.createElement('script');
        scriptEl2.textContent = srcFile; // add your src file
        window.document.body.appendChild(scriptEl2);
    });

    describe('jQuery behaviour', () => {
        test('creates and find elements', () => {
            const $form = $('<form><input type="text" name="query" class="ff_search_input col-xs-11" autocomplete="off" placeholder="Che cosa stai cercando?"></form>');
            const $input = $form.find('input');
            expect($input.length).toBeGreaterThanOrEqual(1);
        });
    });
});

用jest嘲笑jquery $ .ajax

3 个答案: