如何开玩笑 mock/spyOn 属性 或 class
How to Jest mock/spyOn a property of a class
我是 Jest 的新手，所以如果我的问题没有正确阅读，我深表歉意，我正在单元测试一个普通 JS class 上的方法，该方法引用了 class 属性 'this.original_params'。通过阅读文档和许多其他 Whosebug 帖子，我仍然对我必须模拟哪些部分以及这样做的语法感到困惑。我目前正在尝试测试输入值是否为空以及来自 this.original_params.
的目标值
// autocomplete.js
export default class Autocomplete {
constructor(site_config, page_name) {
this.site_config = site_config;
this.page_name = page_name;
this.lat = null;
this.lng = null;
this.original_params = '';
}
init() {
this.original_params = new URLSearchParams(document.querySelector('meta[name="originalParams"]').content);
}
getDestination(inputSelector) {
if (document.querySelector(inputSelector).getAttribute('value') !== '') {
return document.querySelector(inputSelector).value;
}
console.log(this.original_params.has('destination'));
if (this.original_params.has('destination')) {
return this.original_params.get('destination');
}
}
}
我尝试了多种编写测试的方法，但我不明白从哪里开始。这是测试的当前迭代：
// autocomplete.test.js
it('Sets destination if it exists in Original Params', () => {
document.body.innerHTML = `<meta name="original_params" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;
const original_params = new URLSearchParams(
'<meta name="original_params" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"></meta>'
);
expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
我得到的错误：
● getDestination › Sets destination if it exists in Original Params
TypeError: this.original_params.has is not a function
80 | return document.querySelector(inputSelector).value;
81 | }
> 82 | console.log(this.original_params.has('destination'));
| ^
83 | if (this.original_params.has('destination')) {
84 | return this.original_params.get('destination');
85 | }
非常感谢任何帮助。
几件事：
- 您忘记在自动完成实例上调用
init()
- 在
init querySelector 中查找 meta[name="originalParams"] 但在测试中你有 <meta name="original_params"
将您的测试更改为此应使其通过：
it('Sets destination if it exists in Original Params', () => {
document.body.innerHTML = `<meta name="originalParams" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;
let autocomplete = new Autocomplete();
autocomplete.init();
expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
此外，URLSearchParams 仅接收 URL 的查询字符串部分。所以 new URLSearchParams('<meta ...>') 不起作用。您必须使用以下内容，尽管它根本没有在您的测试中使用过：
new URLSearchParams('siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA');
我是 Jest 的新手，所以如果我的问题没有正确阅读，我深表歉意，我正在单元测试一个普通 JS class 上的方法，该方法引用了 class 属性 'this.original_params'。通过阅读文档和许多其他 Whosebug 帖子，我仍然对我必须模拟哪些部分以及这样做的语法感到困惑。我目前正在尝试测试输入值是否为空以及来自 this.original_params.
的目标值// autocomplete.js
export default class Autocomplete {
constructor(site_config, page_name) {
this.site_config = site_config;
this.page_name = page_name;
this.lat = null;
this.lng = null;
this.original_params = '';
}
init() {
this.original_params = new URLSearchParams(document.querySelector('meta[name="originalParams"]').content);
}
getDestination(inputSelector) {
if (document.querySelector(inputSelector).getAttribute('value') !== '') {
return document.querySelector(inputSelector).value;
}
console.log(this.original_params.has('destination'));
if (this.original_params.has('destination')) {
return this.original_params.get('destination');
}
}
}
我尝试了多种编写测试的方法，但我不明白从哪里开始。这是测试的当前迭代：
// autocomplete.test.js
it('Sets destination if it exists in Original Params', () => {
document.body.innerHTML = `<meta name="original_params" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;
const original_params = new URLSearchParams(
'<meta name="original_params" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"></meta>'
);
expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
我得到的错误：
● getDestination › Sets destination if it exists in Original Params
TypeError: this.original_params.has is not a function
80 | return document.querySelector(inputSelector).value;
81 | }
> 82 | console.log(this.original_params.has('destination'));
| ^
83 | if (this.original_params.has('destination')) {
84 | return this.original_params.get('destination');
85 | }
非常感谢任何帮助。
几件事：
- 您忘记在自动完成实例上调用
init() - 在
initquerySelector中查找meta[name="originalParams"]但在测试中你有<meta name="original_params"
将您的测试更改为此应使其通过：
it('Sets destination if it exists in Original Params', () => {
document.body.innerHTML = `<meta name="originalParams" content="siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;
let autocomplete = new Autocomplete();
autocomplete.init();
expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
此外，URLSearchParams 仅接收 URL 的查询字符串部分。所以 new URLSearchParams('<meta ...>') 不起作用。您必须使用以下内容，尽管它根本没有在您的测试中使用过：
new URLSearchParams('siteid=62309&currency=USD&cid=ROCK&useMiles=&checkin=11/12/21&pageSize=15&mapSize=13&groupid=43285&radius=5&nights=3&latitude=26.10879170000000&map=&longitude=-80.10643370000000&destination=Austin, TX, USA');