如何测试一个被循环的内部函数？
示例：
index.js
const innerFunc = (type) => document.querySelector(`input[name="${type}"]`).value;
const anotherInnerFunc = (type) => document.querySelector(`input[name="${type}"]`).value = '';
const mainFunc = () => {
const resultArray = [];
// the document.querySelector('input[type="1 of those arrayTypes"]') on those inside functions
const arrayTypes = ['name', 'email', 'card']
for (const type of arrayTypes) {
// innerFunc
resultArray.push(innerFunc(type))
// clearing the input fields
anotherInnerFunc(type)
}
return resultArray;
}
module.exports = {
mainFunc,
innerFunc,
anotherInnerFunc
}
对于index.test.js
/**
* @jest-environment jsdom
*/
const indexFile = require('./index');
const { JSDOM } = require('jsdom');
const html = require('./duphtml.js');
let dom, window, document, inputName, inputEmail, inputCard;
describe('Testing the HTML FORM from index.html using JSDOM', () => {
beforeAll(() => {
dom = new JSDOM(html);
window = dom.window;
document= window.document;
inputName = document.querySelector(`input[name="name"]`);
inputName.value = 'FakeCC';
inputEmail = document.querySelector(`input[name="email"]`);
inputEmail.value = 'test@email.com';
inputCard = document.querySelector(`input[name="card"]`);
inputCard.value = '5457623898234113';
// console.log(document.querySelector(`input[name="name"]`).value)
});
it('how do I test those inner functions?', () => {
// Im a bit lost here searched around cant find anything to help me find the solution and I am out of ideas
const inputArray = [inputName, inputEmail, inputCard];
// how can I reach this end goal so those inside functions do working
expect(indexFile.mainFunc()).toEqual(inputArray)
})
})
我怎样才能达到最后的期望？我该如何将我在beforeAll块中定义的三个输入值传递给函数内部的输入值？
由于内部函数返回null：
TypeError: Cannot read property 'value' of null
110 | // Tested WORKS! check index.test.js
111 | /* ----------------------------------- FORM SUBMISSION -------------------------------------- */
> 112 | const newValue = (type) => document.querySelector(`input[name="${type}"]`).value;
此行：
dom = new JSDOM(html);
html来自另一个文件，我将index.html作为字符串粘贴到其中，以便在测试文件中访问它
duphtml.js
const html = `
<!doctype html>
<main class="flex">
<h1>Form</h1>
<section class="modal-dialog">
<form method="POST" onsubmit="mainFunc().bind(this); return false" class="flow" action="">
<div class="flex">
<label for="name">Name:</label>
<!-- First and Surname (should have been specified on the user stories) -->
<input type="text" name="name" id="name" placeholder="Enter Your Name"/>
<!-- <p>Enter a correct name</p> -->
</div>
<div class="flex">
<label for="email">Email:</label>
<input pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+.[a-zA-Z]{2,4}" type="email" name="email" id="email" placeholder="Enter Your Email"/>
</div>
<div class="flex">
<label for="card">Card:</label>
<input type="text" name="card" onkeyup="luhnAlgorithm(this)" id="card" placeholder="Enter a Proxy Credit Card Number"/>
<img hidden src="./assets/other.png" id="imgCard" style="padding:5px;" />
</div>
<div>
<input id="submit" type="submit" value="Submit" />
</div>
</form>
</section>
</main>
`
module.exports = html;
解决方案
我已经解决了这个问题，如果有人有任何类似的事情，看看这个答案
在beforeAll((中从JSDOM生成文档和窗口变量后，我必须将它们设置为全局变量，如
global.window = window;
global.document = document;
此外，我不得不删除这个配置jsdocs
/**
* @jest-environment jsdom
*/
因为它使我的代码无法工作。
我把beforeAll((改成了beforeEach((，但没那么严重。
所以这修复了它