Как заставить Jest распознавать JQuery в моем проекте Rails? - PullRequest
Новая
       44

Как заставить Jest распознавать JQuery в моем проекте Rails?

0 голосов
/ 21 октября 2019

Я работаю над приложением Rails-4, которое теперь обновлено до 5.1.6.2.

Мы изначально полагались на Sprockets для нашего JS, но теперь в основном перешли на Webpacker, и для этого я хочу начать вводить тесты Jest.

У нас все еще есть остаточные звездочки в application.js: 

//= 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"]
  }
}

И, наконец, в настройкахФайл 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

1 Ответ

1 голос
/ 21 октября 2019

Хорошо, ответом был комментарий Кэннона Мойера плюс один шаг:

Из терминала мне нужно было запустить 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';

...