javascript - 开玩笑的模拟 documentElement lang 属性
问题描述
我正在尝试为我的测试操作 documentElement lang 属性。并且无法弄清楚我怎么能做到这一点。我已经尝试在 Jest 配置中定义 setupFiles - 这让我有可能定义它并且没有选项可以为不同的测试更改它 - 如此处所述:Mocking `document` in jest
部分测试代码如下所示:
const lang: string = document.documentElement.lang ?
document.documentElement.lang : Constraints.DEFAULT_LANGUAGE;
测试如下所示:
test('should pass `en` language when document hasn`t any specified', () => {
const spy = jest.spyOn(window.document, 'documentElement', 'get');
expect(spy).toHaveBeenCalled();
});
并使用setupFiles:
Object.defineProperty(document, 'documentElement', {
writable: true,
configurable: true,
value: document.createElement('document')
});
当我有 setupFiles 我得到错误:
Property documentElement does not have access type get
但是,当我尝试在未setupfile.js
配置的情况下对其进行监视时,永远不会调用 spy。
编辑
更清楚的例子是我想要实现的:
const lang: string = document.documentElement.lang ?
document.documentElement.lang : Constraints.DEFAULT_LANGUAGE;
component.src = `/${lang}/mysite`;
test('should pass `de` language when document has one specified', () => {
const spy = jest.spyOn(window.document, 'documentElement', 'get');
const mockElement = document.createElement('document');
mockElement.lang = 'de';
spy.mockReturnValue(mockElement);
expect(component.src).toContain('/de/');
});
在测试中我得到:
expect(received).toContain(expected) // indexOf
Expected substring: "/de/"
Received string: "http://localhost/en/mysite"
解决方案
好吧,您快到了,但是当您访问document.documentElement.lang
属性时,已触发 get 访问器。所以你应该像下面那样定义那个对象;
Object.defineProperty(document, 'documentElement', {
configurable: true,
get () {
return document.createElement('document');
},
});
在你的测试中;
在期望行之前,您应该添加此行以触发 getter 并使 spy 被调用。
window.document.documentElement.lang;
编辑
忘了上面。
只需删除您的设置代码块,我认为您不需要间谍或其他东西。
创建一种将语言设置为常量的方法。然后测试该方法而不是测试get
documentElement 的操作。
在调用您的方法之前,请使用以下代码设置 lang 属性。(想象一下你有语言方法)
test('should return `de` language when document has one specified', () => {
Object.defineProperty(document.documentElement, 'lang', { value: 'de', configurable: true });
expect(component.language()).toBe('de');
});
推荐阅读
- electron - 打包后电子vue-vite不工作?
- vlang - 结构必须有一个 `next()` 方法才能成为迭代器
- c# - 在 webbrowser 中查找元素并分别在 csharp 中添加到列表框
- sql - ORA-02292: 违反完整性约束 - 找到子记录 - PLSQL
- react-hooks - 倒数计时器变为负数
- c# - 用逻辑运算符确定差异
- stored-procedures - 动态 SQL 日期标头
- java - 如何获取 log4j2 中的 trace id 和 span id,格式为 [traceId, spanId ]?
- html - 使用 flex 对齐 5 个盒子会导致间距问题
- python - 为什么在 dynamoDB 中插入项目时,仅在 1 种情况下使用相同的变量会出现 RecursionError