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，所以我不知道该怎么做。错误消息提供了有关Babel的进一步提示，但这并不适用于我的案例。

旁注：我的测试可能存在缺陷。我目前正在试图弄清楚如何使用模拟来避免与文档的交互，我不确定这是不是这样。然而，这不是这个问题的重点，因为它不应该影响测试运行的能力，但我非常乐于接受建议。

编辑：为什么这不是this question的重复：它有点，但我觉得这个问题和接受的答案对我没有帮助，希望有人会从这个中获益。

Answer 1

使用global.document.getElementById = getElementByIdMock;在某些配置中，Jest无法直接访问文档对象。

Answer 2

我找到了解决问题的方法：

正如this answer所建议的那样，你需要使用Babel。这可以按照建议的here完成，但我使用了在Babel网站上建议的@babel/env-preset。这让我觉得jest内部使用[email protected]的问题，但至少需要babel 7。 here描述了这个问题。我使用临时修复手动复制和覆盖babel-core从我的node-modules目录到jest-config和jest-runtime的node-modules目录。在上一个链接中也描述了这种脏修复。

我还没有找到一个干净的解决方案，但至少这是有效的。