Как исправить ошибку jest window.alert или null в vuejs тестовых утилитах? - PullRequest
Новая
       7

Как исправить ошибку jest window.alert или null в vuejs тестовых утилитах?

0 голосов
/ 10 февраля 2020

Я хочу протестировать свои vue компоненты, но я столкнулся с некоторыми чертовски сумасшедшими ошибками, которые я сделал, что нравится людям, использующим jsdom, не исправил это и продолжает показывать эти ошибки: 

  console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Not implemented: window.alert

или 

 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of null"

У меня есть компонент Header, который смонтирован следующим образом: 

    methods: {
.
.
.
      addEventHandler(...args: any) {
        addEventHandler(...args);
      }
    },
mounted() {
  this.addEventHandler('.dej_search', 'enter', '.dej_suggestion .active-item', this.enterSection);
  //@ts-ignore
  this.addEventHandler('', 'ctrl+f||f3', 'GeneralSearch', id => document.getElementById(id).focus());
}

, а код обработчика событий приведен ниже: 

//addEventHandler.js:
import Vue from "vue"
import {keyboardCodes} from "@/utils/keyboardCodes";


const {enter, f, f3} = keyboardCodes;
export const addEventHandler = (domSelector = '',
                                event = '',
                                data = '',
                                eventHandler = (item) => {
                                }
) => {
  let dom = domSelector !== '' ? document.querySelector(domSelector) : window;
  switch (event) {
    case "enter":
      dom.addEventListener("keypress", (e) => {
        let key = e.which || e.keyCode || 0;
        if (key === enter) {
          eventHandler(data);
          e.preventDefault();
        }
      });
      break;
    case "ctrl+f||f3":
      dom.addEventListener("keydown", (e) => {
        let key = e.which || e.keyCode || 0;
        if (key === f3 || (e.ctrlKey && key === f)) {
          eventHandler(data);
          e.preventDefault();
        }
      });
      break;
    default:
      console.log("event ....");
      break;
  }
};

Как вы можно видеть, что я также использовал jsdom, но я не решил проблему, и я действительно смущен тем, как я должен решить эти проблемы и провести некоторый модульный тест без боли в рамках jest. 

//header.test.js

import {mount, shallowMount} from "@vue/test-utils";
import Header from "../../../src/views/pages/Panel/Header";
import {JSDOM}  from "jsdom";

const dom = new JSDOM()
document = dom.window.document;
window = dom.window;
window.alert = jest.fn();

describe("mount",()=>{
  const wrapper = shallowMount(Header);
  console.log(wrapper.vm);
  console.log(wrapper.element);
});

Как мы должны избавиться от этих ошибок?

.....

update

Я мог бы исправить ошибку window.alert. из-за шутки, которая не поддерживает или по-другому, невозможно проверить пользовательский интерфейс в клиенте, поэтому некоторые функции, такие как оповещение, не могут быть проверены, или это трудно проверить, что указано в https://jestjs.io/docs/en/tutorial-jquery. поэтому, чтобы исправить проблему window.alert, мы можем добавить равную или пустую реализацию, чтобы предотвратить сбой теста: 

window.alert = () => {};  // provide an empty implementation for window.alert
// or 
window.alert = (text) => {console.log(text)};  // provide an non-empty implementation for window.alert

, но я действительно не знаю, как смоделировать document.getElementById, который я используется в addEventHandler. js, чтобы предотвратить такую ​​ошибку для 'addEventListener' из null ". Есть ли хорошее решение для этого?

1 Ответ

1 голос
/ 10 февраля 2020

window.alert и некоторые другие специфичные для браузера c побочные эффекты необходимо заглушить вручную. Желательно, чтобы это было сделано с помощью Jest, чтобы шпион мог отследить и очистить: 

jest.spyOn(window, 'alert').mockReturnValue();

Тогда могут быть подтверждены вызовы на window.alert.

Если JSDOM поставил его в тупик, это принесет больше вреда, чем пользы. Это редко является проблемой, потому что alert является недружественным для пользовательского интерфейса / UX и редко встречается в рабочем коде.

TypeError: Невозможно прочитать свойство addEventListener со значением null

означает что элемент не существует. Вероятно, это связано с тем, что компонент был смонтирован неглубоко и не был полностью отрисован, что, как правило, является предпочтительной стратегией для модульного тестирования.

Либо метод addEventListener, либо модуль с addEventListener можно смоделировать запретить доступ к DOM: 

jest.mock('.../addEventListener', () => ({ addEventListener: jest.fn() }));

Также могут быть подтверждены вызовы на addEventListener.

...