在测试期间无法访问组件中的DOM元素(在浏览器中工作) [英] Unable to access DOM elements in component during tests (works in the browser)
本文介绍了在测试期间无法访问组件中的DOM元素(在浏览器中工作)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景
我有一个组件，我在其中访问一个元素的子元素(使用ref)。目标是截取输入字段中的粘贴事件，并将粘贴的内容拆分并分布在几个不受控制的表单输入元素上。在浏览器(使用Storybook)中呈现组件时，这一切都工作得很好。
问题
但是，在测试中，我无法以任何我尝试的方式访问子对象。
问题
- 我如何使用
fireEvent或如何设置测试是否有问题？ - 我是新手，我是否应该以其他方式访问DOM元素？
- 或者我应该干脆不使用测试库来测试此行为？
任何帮助都将不胜感激，因为我现在不知道还能尝试什么！
示例
我已经制作了一个显示问题的组件的最小示例。
组件
import React, { useRef } from "react";
import { prettyDOM } from "@testing-library/dom";
function Dummy({}) {
const inputContainer = useRef(null);
const handleClick = (e) => {
// The elements exist!
console.log('document', prettyDOM(document))
console.log('div', prettyDOM(inputContainer.current))
console.log('e.target', prettyDOM(e.target))
// All attempts to get the inputs return empty collections.
console.log('div.children', inputContainer.current.children)
console.log('div.childNodes', inputContainer.current.childNodes)
console.log('div.querySelectorAll("*")', inputContainer.current.querySelectorAll("*"))
console.log('e.target.parentNode.querySelectorAll("input")', e.target.parentNode.querySelectorAll("input"))
// Going via the document doesn't work either...
console.log('document.querySelectorAll("#outer input").children', document.querySelectorAll('#outer input'))
// For some reason, firstChild works (but I need all children, not just one).
console.log('div.firstChild', inputContainer.current.firstChild.value)
};
return (
<fieldset id="outer">
<div ref={inputContainer}>
<input type="text" onClick={handleClick} defaultValue="bar"/>
<input type="text" />
</div>
</fieldset>
);
}
export default Dummy;
测试
import React from "react";
import { render, screen } from "@testing-library/react";
import { fireEvent } from '@testing-library/dom'
import Dummy from "./Dummy";
describe("Dummy", () => {
it("should do something", () => {
render(<Dummy />);
fireEvent.click(screen.getByDisplayValue("bar"));
expect(false).toBe(true);
});
});
Jest输出
FAIL src/components/Dummy.test.js
Dummy
✕ should do something (96 ms)
● Dummy › should do something
expect(received).toBe(expected) // Object.is equality
Expected: true
Received: false
11 | fireEvent.click(screen.getByDisplayValue("bar"));
12 |
> 13 | expect(false).toBe(true);
| ^
14 | });
15 | });
16 |
at Object.<anonymous> (src/components/Dummy.test.js:13:19)
console.log
document <html>
<head />
<body>
<div>
<fieldset
id="outer"
>
<div>
<input
type="text"
value="bar"
/>
<input
type="text"
/>
</div>
</fieldset>
</div>
</body>
</html>
at handleClick (src/components/Dummy.js:11:13)
console.log
div <div>
<input
type="text"
value="bar"
/>
<input
type="text"
/>
</div>
at handleClick (src/components/Dummy.js:12:13)
console.log
e.target <input
type="text"
value="bar"
/>
at handleClick (src/components/Dummy.js:13:13)
console.log
div.children HTMLCollection {}
at handleClick (src/components/Dummy.js:16:13)
console.log
div.childNodes NodeList {}
at handleClick (src/components/Dummy.js:17:13)
console.log
div.querySelectorAll("*") NodeList {}
at handleClick (src/components/Dummy.js:18:13)
console.log
e.target.parentNode.querySelectorAll("input") NodeList {}
at handleClick (src/components/Dummy.js:19:13)
console.log
document.querySelectorAll("#outer input").children NodeList {}
at handleClick (src/components/Dummy.js:22:13)
console.log
div.firstChild bar
at handleClick (src/components/Dummy.js:25:13)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 3.995 s
Ran all test suites matching /dum/i.
Watch Usage: Press w to show more.
推荐答案
🙈🙈🙈
这些
HTMLCollection {}NodeList {}
不是空列表！它们是以这种方式打印的，无论其内容如何！包含1或1,000个元素的列表将打印为{}(我假设是通过jsdom？)。
我真诚地希望这会帮助别人节省一些时间，因为它确实花费了我太多的…😆
这篇关于在测试期间无法访问组件中的DOM元素(在浏览器中工作)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
