[英]Jest import of plain javascript results in unexpected token
Firstly: as far as I can tell, this is not a duplicate. 首先:据我所知,这不是重复的。 The other questions with similar problems are all slightly different, eg use a transformation like babel or have problems with transitive imports.
其他具有类似问题的问题都稍有不同,例如,使用像babel这样的转换,或者在传递导入方面有问题。 In my case I have no transformation, I have one test file and one file imported file that will be tested.
就我而言,我没有任何转换,我有一个测试文件和一个要导入的文件导入文件。 I just started using jest and use the default setting, so there is no configuration file to post.
我刚刚开始使用玩笑,并使用默认设置,因此没有要发布的配置文件。
When I try to run my tests I get the error message: 当我尝试运行测试时,出现错误消息:
Test suite failed to run
测试套件无法运行
Jest encountered an unexpected token
开玩笑遇到了意外的令牌
This usually means that you are trying to import a file which Jest cannot parse, eg it's not plain JavaScript.
这通常意味着您正在尝试导入Jest无法解析的文件,例如,它不是纯JavaScript。
The tested file: 测试文件:
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';
}
The test: 考试:
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');
});
As you can see I am using plain javascript so I am not sure what to do here. 如您所见,我使用的是纯JavaScript,所以我不确定在这里做什么。 The error message gives further hints about Babel which does not really apply to my case.
错误消息进一步提示了有关Babel的信息,但这实际上不适用于我的情况。
Sidenote: My test might be flawed. 旁注:我的测试可能有缺陷。 I am currently trying to figure out how to use mocks to avoid interaction with the document and I am not sure if that is the way.
我目前正在尝试弄清如何使用模拟来避免与文档的交互,而且我不确定是否是这种方式。 However this is not the point of this question as it should not affect the ability of the tests to run, but I am very open for suggestions.
但这不是这个问题的重点,因为它不应该影响测试的运行能力,但是我很愿意提出建议。
EDIT : Why this is not a duplicate to this question : It kind of is, but I feel that question and the accepted answer were not really helpful for me and hopefully someone will profit from this one. 编辑 :为什么这不是这个问题的重复:有点,但是我觉得这个问题和公认的答案对我没有真正的帮助,希望有人会从中受益。
Use global.document.getElementById = getElementByIdMock;
使用
global.document.getElementById = getElementByIdMock;
In some configurations Jest doesn't have access to document object directly. 在某些配置中,Jest无法直接访问文档对象。
I have found the solution to my problem: 我找到了解决我问题的方法:
As suggested in this answer , you need to use Babel. 根据此答案的建议,您需要使用Babel。 This can be done as suggested here , but I used
@babel/env-preset
as it is suggested on the Babel website. 可以按照此处的建议进行操作,但是我使用了
@babel/env-preset
正如Babel网站上建议的那样。 This left me with the problem that jest internally uses babel-core@6.26.3
, but at least babel 7 was required. 这给我带来了一个问题,即玩笑在内部使用
babel-core@6.26.3
,但至少需要babel 7。 This problem is described here . 这个问题在这里描述。 I used the temporary fix of manually copying and overwriting
babel-core
from my node-modules directory to the node-modules directories of jest-config
and jest-runtime
. 我使用了临时修复程序,从我的node-modules目录手动复制和覆盖
babel-core
到jest-config
和jest-runtime
的node-modules目录。 This dirty fix is also described in the previous link. 上一个链接中也描述了此肮脏的修复程序。
I have yet to find a clean solution, but at least this works. 我还没有找到一个干净的解决方案,但至少可以奏效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.