Javascript Jest：设置URL并检查变量_Javascript_Html_Node.js_Dom_Jestjs

Javascript Jest：设置URL并检查变量

javascript html node.js dom jestjs

Javascript Jest：设置URL并检查变量,javascript,html,node.js,dom,jestjs,Javascript,Html,Node.js,Dom,Jestjs,所以，这是我第一天玩Jest，这是我的普通“foo.html”文件，没有React，没有Vue： <html> <head><title>Hello Jest!</title></head> <body> <script type="text/javascript"> var hasFoo = false; if (window.location.href.indexOf(&q

所以，这是我第一天玩Jest，这是我的普通“foo.html”文件，没有React，没有Vue：

<html>
<head><title>Hello Jest!</title></head>
<body>
  <script type="text/javascript">
   var hasFoo = false;
   if (window.location.href.indexOf("foo") != -1) {
     hasFoo = true;
   }
   console.log(" hasFoo > ", hasFoo);
  </script>
</body>
</html>

但我被困住了，我的问题是：

如何设置URL以在其中放置“foo”子字符串

如何在Jest测试中访问和检查“hasFoo”变量

您需要使用与进行交互

对问题1的答复：

您应该为JSDOM设置URL

url

：设置window.location、document.url和document.documentURI返回的值，并影响文档中相对url的解析以及获取子资源时使用的同源限制和引用。默认为“关于：空白”

对问题2的答复：

全局变量

hasFoo

附加到

窗口

对象。您可以从

窗口

对象获取它

此外：

为了执行脚本，您需要使用

runScripts:“危险地”

选项

添加快照测试以测试DOM的结构

为了测试是否调用

console.log

，您需要使用

jest.spyOn（console，'log'）

语句来创建spy on

console.log

方法并使用

完整示例：

foo.html

：


你好，开玩笑！
var hasFoo=假；
if（window.location.href.indexOf（'foo'）！=-1）{
hasFoo=真；
}
log（'hasFoo>'，hasFoo）；

foo.test.js

：

constjsdom=require（'jsdom'）；
const path=require（'path'）；
常数fs=要求（'fs'）；
const{JSDOM}=JSDOM；
描述（'64975712'，（）=>{
它（'should pass'，async（）=>{
consthtml=fs.readFileSync（path.resolve（uu dirname，'./foo.html'），'utf8'）；
constlogspy=jest.spyOn（控制台，'log'）；
const virtualConsole=new jsdom.virtualConsole（）；
virtualConsole.sendTo（控制台）；
const dom=新的JSDOM（html{
网址：'http://foo.exmaple.org',
虚拟解决方案，
运行脚本：“危险的”，
});
expect（dom.window）.toHaveProperty（'hasFoo'）；
expect（dom.window.hasFoo.toBeTruthy（）；
expect（logSpy）.toBeCalledWith（'hasFoo>'，true）；
预期为（dom.serialize（））.toMatchInlineSnapshot(`
"
你好，开玩笑！
var hasFoo=假；
if（window.location.href.indexOf（'foo'）！=-1）{
hasFoo=真；
}
log（'hasFoo>'，hasFoo）；
"
`);
logSpy.mockRestore（）；
});
});

测试结果：

 PASS  src/stackoverflow/64975712/foo.test.js
  64975712
    ✓ should pass (36ms)

  console.log node_modules/jest-environment-jsdom/node_modules/jest-mock/build/index.js:866
     hasFoo >  true

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        5.067s

 PASS  src/stackoverflow/64975712/foo.test.js
  64975712
    ✓ should pass (36ms)

  console.log node_modules/jest-environment-jsdom/node_modules/jest-mock/build/index.js:866
     hasFoo >  true

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        5.067s