使用Jest测试 AJAX 请求会导致$ undefined错误

tv6aics1  于 2023-09-28  发布在  Jest
关注(0)|答案(1)|浏览(171)

我正在尝试将Jest测试添加到我们现有的项目中。但是,我们遇到了一些问题。我们尝试测试以下功能:

// Send picture
function sendESGPIC(results) {
    $.ajax({
        url: "PATH",
        contentType: "application/json",
        data: JSON.stringify(results),
        type: 'POST',
        success: function () {
            // success code
        },
        error: function (data) {
            // error code
        }
    })
}

因此,我们使用我做的以下测试。

describe("Ajax sendQuestion", () => {
    beforeEach(() => {
        jest.restoreAllMocks();
    });
    
    var $ = require("jquery");
    var sendQuestion = require(PATH);

    test('sendPicture', async () => {
        const ajaxSpy = jest.spyOn(sendQuestion.sendESGPIC(), 'ajax')

        sendQuestion.sendESGPIC()
    
        expect(ajaxSpy).toBeCalledWith({
            type: "POST",
            url: PATH,
            success: expect.any(Function),
            error: expect.any(Function),
        });
    });
})

不幸的是,我们收到以下错误:类型错误:$. AJAX 不是一个函数这个错误是由我们在函数中的ajax请求引起的。我们使用以下脚本标记将JQuery导入到我们的项目中。

<%- include('../partials/footer') %>
  <script src="/js/basics/ESG_pic.js"></script>
  <script src="/js/questionnaire/esg/sendQuestion.js"></script>

以下导入包含在“../partials/footer”中:

<script src="/js/basics/jquery.min.js"></script>
  <script src="/js/basics/popper.min.js"></script>
  <script src="/js/basics/xlsx.js"></script>
  <script src="/js/basics/bootstrap.bundle.min.js"></script>
  <script src="/js/basics/mto_basics.js"></script>
  <script src="/js/basics/sidebar.js"></script>

需要明确的是,jQuery代码在页面上运行得很好。我们遇到的唯一问题是在Jest测试期间。
我想我们的导入工作不正常。但是,我们还没有找到解决办法。有谁能指出我们如何正确地测试函数的正确方向吗?

7tofc5zh

7tofc5zh1#

测试的问题是$.ajax函数在测试环境中不可用,因为您没有在Jest测试环境中加载jQuery。Jest运行在Node.js环境中,默认情况下,它不能访问DOM或浏览器中加载的jQuery库。
jest.spyOn(sendQuestion.sendESGPIC(), 'ajax')在这种情况下不起作用,因为sendESGPIC()实际上没有属性ajax
您可以尝试在Jest测试中模拟$.ajax函数。比如:

jest.mock('jquery');

... 

describe("Ajax sendQuestion", () => {

  beforeEach(() => {
        jest.restoreAllMocks();
    });

  var $ = require("jquery");
  var sendQuestion = require(PATH);

  test('sendPicture success', async () => {
    $.ajax.mockResolvedValue({});

    await sendQuestion.sendESGPIC();

    expect($.ajax).toBeCalledWith({
      type: "POST",
      url: PATH,
      success: expect.any(Function),
      error: expect.any(Function),
    });
  });
});

相关问题