Jest импорт простого JavaScript приводит к неожиданному токену

Question

Во-первых: насколько я могу судить, это не дубликат.Все остальные вопросы с похожими проблемами немного отличаются, например, используйте преобразование типа babel или проблемы с транзитивным импортом.В моем случае у меня нет преобразования, у меня есть один тестовый файл и один импортированный файл, который будет проверен.Я только начал использовать jest и использовал настройку по умолчанию, поэтому нет файла конфигурации для публикации.

Когда я пытаюсь запустить свои тесты, я получаю сообщение об ошибке:

Набор тестовне удалось запустить

Jest обнаружил неожиданный токен

Обычно это означает, что вы пытаетесь импортировать файл, который Jest не может проанализировать, например, это не обычный JavaScript.

Тестируемый файл:

export function showTooltip(x, y, content) {
    const infoElement = document.getElementById('info');
    infoElement.style.left = `${x}px`;
    infoElement.style.top = `${y}px`;
    infoElement.style.display = 'block';
    infoElement.innerText = createTooltipText(content);
}

function createTooltipText(object) {
    return Object.keys(object)
        .filter(key => key != 'id')
        .map(key => `${key} : ${object[key]}`)
        .join('\n');
}

export function hideTooltip() {
    const infoElement = document.getElementById('info');
    infoElement.style.display = 'none';
}

Тест:

import {showTooltip, hideTooltip} from '../../../src/public/javascripts/tooltip.js';

const TOOLTIP_DUMMY = {
    style: {
        left: 0,
        top: 0,
        display: '',
        innerText: ''
    }
};

test('showTooltip accesses the element with the id \'info\'', () => {
    const getElementByIdMock = jest.fn(() => TOOLTIP_DUMMY);
    document.getElementById = getElementByIdMock;
    showTooltip(0, 0, {});

    expect(getElementByIdMock).toHaveBeenCalledWith('info');
});

test('hideTooltip accesses the element with the id \'info\'', () => {
    const getElementByIdMock = jest.fn(() => TOOLTIP_DUMMY);
    document.getElementById = getElementByIdMock;
    hideTooltip();

    expect(getElementByIdMock).toHaveBeenCalledWith('info');
});

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

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

РЕДАКТИРОВАТЬ : Почему это не дубликатна этот вопрос : Это вроде как, но я чувствую, что этот вопрос и принятый ответ не очень помогли мне, и, надеюсь, кто-то от этого выиграет.

Answer 1

Я нашел решение для моей проблемы:

Как указано в в этом ответе , вам нужно использовать Babel.Это можно сделать, как предложено здесь , но я использовал @babel/env-preset, как это предлагается на веб-сайте Babel.Это оставило меня с проблемой, заключающейся в том, что шут внутренне использует babel-core@6.26.3, но по крайней мере вавилонский 7 был необходим.Эта проблема описана здесь .Я использовал временное исправление ручного копирования и перезаписи babel-core из моего каталога узлов-модулей в каталоги узлов-модулей jest-config и jest-runtime.Это грязное исправление также описано в предыдущей ссылке.

Мне еще предстоит найти чистое решение, но по крайней мере это работает.

Answer 2

Использование global.document.getElementById = getElementByIdMock; В некоторых конфигурациях Jest не имеет прямого доступа к объекту документа.