如何让 Jest 在我的 Rails 项目中识别 JQuery？答案

【问题标题】：How do I get Jest to recognise JQuery in my Rails project?如何让 Jest 在我的 Rails 项目中识别 JQuery？
【发布时间】：2020-02-17 17:46:02
【问题描述】：

我正在开发一个最初的 Rails-4-now-upgraded-to-5.1.6.2 应用程序。

我们的 JS 最初依赖 Sprockets，但现在主要迁移到 Webpacker，我想为此开始引入 Jest 测试。

application.js 中仍有剩余的 Sprockets 存在：

//= require jquery
//= require jquery_ujs
//= require select2
//= require icheck.min
//= require jquery.Jcrop.min

在我们的 Gemfile 中，我们需要 gem "jquery-rails", "~> 4.3.3"

最近开始将一些 Vue 组件集成到项目中，我希望最终能够测试 Vue 组件，但由于我觉得自己不像我想要的那样理解它们，所以我开始尝试测试以下是 JQuery dom 操作的“简单”位：

// PledgeFormUpdates.js

export default function() {
  window.addEventListener("load", function() {
    if ( $('#pledge-form').length == 0 ) {
      return;
    }

    // Determine whether to show GDPR checkbox on country change
    $("#pledge_pledgor_home_country").change(function() {
      let gdpr_form_group = $("#js-gdpr-input");
      let checkbox = $('#pledge_receive_comms')
      const eu_countries = [
        "Austria",
        "Belgium",
        "Bulgaria",
        "Croatia",
        "Cyprus",
        "Czech Republic",
        "Denmark",
        "Estonia",
        "Finland",
        "France",
        "Germany",
        "Greece",
        "Hungary",
        "Ireland",
        "Italy",
        "Latvia",
        "Lithuania",
        "Luxembourg",
        "Malta",
        "Netherlands",
        "Poland",
        "Portugal",
        "Romania",
        "Slovakia",
        "Slovenia",
        "Spain",
        "Sweden",
        "United Kingdom of Great Britain and Northern Ireland"
      ]

      if ( eu_countries.includes(this.value) ) {
        checkbox.prop('disabled', false);
        gdpr_form_group.show();
      } else {
        checkbox.prop('disabled', true);
        gdpr_form_group.hide();
      };
    });
  });
}

测试文件目前有这个内容：

'use strict';

import pledge_form_updates from '../../app/javascript/components/PledgeFormUpdates.js'

test('Displays GDPR checkbox on EU country selection', () => {
  // Set up our document body
  document.body.innerHTML =
    '<select id="pledge_pledgor_home_country">' +
    '  <option value="Brazil" selected>Brazil</option>'
    '  <option value="Germany">Germany</option>' +
    '  <button id="button" />' +
    '</select>';
});

我们的 package.json 包含以下配置：

{
  // ...
  "devDependencies": {
    "jest": "^24.9.0",
    "webpack-dev-server": "^3.4.1",
    "jquery": "^3.4.1"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "roots": [
      "spec/javascript"
    ],
    "setupFiles": ["./spec/javascript/setup-jest.js"]
  }
}

最后在 setup-jest.js 文件中，我们只是尝试导入 JQuery，基于我在 this 之类的帖子中看到的建议：

import $ from 'jquery/src/jquery';

// Other failed attempts:
// import $ from 'jquery';
// import $ from 'jquery/jquery';
global.$ = global.jQuery = $;

但是所有的变体都失败了，错误Cannot find module 'jquery/jquery' from 'setup-jest.js'的一些变体

那么如何才能成功导入 JQuery 以用于此类测试？

ETA：根据下面的评论，如果相关的话，这里还有 environment.js 文件的（现在修改的）内容：

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }))
module.exports = environment

【问题讨论】：

将此代码放入您的 environment.js 文件 environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })) 并将 import $ from 'jquery/src/jquery'; 更改为 import $ from 'jquery';。
我复制粘贴了这个，但错误还是一样：Cannot find module 'jquery' from 'setup-jest.js'

标签： jquery ruby-on-rails jestjs sprockets webpacker

【解决方案1】：

好的，答案是 Cannon Moyer 的评论加一步：

从终端，我需要运行yarn add jquery

然后在 environment.js 中，我需要添加他的代码：

environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }))

...在 setup-jest.js 中，将 import $ from 'jquery/src/jquery'; 更改为 import $ from 'jquery';

【讨论】：