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

tv6aics1 于 12个月前发布在 Jest

关注(0)|答案(1)|浏览(161)

我正在尝试将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测试期间。
我想我们的导入工作不正常。但是，我们还没有找到解决办法。有谁能指出我们如何正确地测试函数的正确方向吗？

jestjs

来源：https://stackoverflow.com/questions/76850279/testing-an-ajax-request-with-jest-causes-undefined-error

1条答案

按热度按时间

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

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答