Javascript 如何从Puppeter客户端环境运行节点包以进行测试

我使用它来测试react环境中的客户机函数-该函数本身不使用react，而是要导入es6 react模块并在最终用户DOM环境中运行。我需要Puppeter，因为该函数依赖于jsdom中不可用的属性，如

innerText

这个函数将DOM元素作为参数，但是我在为它编写测试文件时遇到了麻烦。以下是我的代码示例：

从“路径”导入路径；
从“木偶演员”中导入木偶演员；
从“/selection”导入{getSelectionRange，setSelectionRange}；
描述(
“getSelection应与setSelection匹配”，
() => {
让浏览器；
让页面；
之前（异步完成=>{
试一试{
browser=wait puppeter.launch（）；
page=wait browser.newPage（）；
等待page.goto(
`文件：//${path.join（process.env.ROOT、，
'testFiles/selection\u range\u test.html'）}`
);
等待page.exposeFunction(
“设置选择范围”，
（el，开始，结束）=>setSelectionRange（el，开始，结束）
);
等待page.exposeFunction(
“getSelectionRange”，
el=>getSelectionRange（el）
);
}捕获（错误）{
控制台错误（error）；
}
完成（）；
});
毕竟（异步完成=>{
等待浏览器关闭（）；
完成（）；
});
它（'应该在只有一个文本节点子节点的节点上匹配'，异步（）=>{
const{selection，element，argEl}=wait page.evaluate（异步（）=>{
const stn=document.getElementById（'single-text-node'）；
//由于console.log将在Puppeter浏览器中输出，而不是在节点控制台中输出，
//我在selectionRange函数中添加了一行以返回它接收的元素
//作为论据。
常量=等待窗口。设置选择范围（stn，1，10）；
const selectionRange=等待窗口。getSelectionRange（stn）；
返回{selection:selectionRange，元素：stn，argEl}；
});
//输出。。。
//（内容很长，因此我跳过了它，但它在此处显示了正确的值）
console.log（element.outerHTML）；
//输出{}
控制台日志（argEl）；
});
}
);

---

如注释中所述，直接从

page.evaluate（）

返回的元素是正确的，但当作为参数传递时，函数接收到一个空对象。我怀疑存在范围问题，但我在这里完全找不到解决方案。

遗憾的是，我找不到任何不调用文件传输的解决方案，但希望我能使它正常工作

关键点是创建第二个transfile配置，该配置将使用UMD格式生成可由web浏览器直接使用的代码。由于我使用了rollup，下面是我的rollup，config.js文件：

从“汇总插件巴别塔”导入巴别塔；
从“汇总插件commonjs”导入commonjs；
从“汇总插件节点解析”导入解析；
从“/package.json”导入pkg；
//实际导出以在React或节点应用程序中使用的内容。
常量libConfig=[
{
inlineDynamicImports：正确，
输入：'./src/index.js'，
输出：[
{
文件：'./lib/index.js'，
格式：“cjs”
},
],
外部：[…Object.keys（pkg.dependencies |{}）]，
插件：[
commonjs（），
resolve（），
babel（{exclude:'node_modules/**'}）
]
}
];
//用于生成可在浏览器环境中直接执行的捆绑包，用于E2E测试。
常量testConfig=[
{
inlineDynamicImports：正确，
输入：'./src/index.js'，
输出：[
{
文件：'./dist/index.js'，
格式：“umd”，
名称：“超光速子”
},
],
外部：[…Object.keys（pkg.dependencies |{}）]，
插件：[
commonjs（），
resolve（），
babel（{runtimeHelpers:true}）
]
}
];
const config=process.env.NODE_env=='test'？testConfig:libConfig；
导出默认配置；

然后我重写了一些脚本，以便在每次测试运行时生成测试包

package.json

{
“脚本”：{
“构建：测试”：“NODE_ENV=测试汇总-c&&NODE_ENV=”，
“构建”：“汇总-c”，
“测试”：“纱线制造：测试和玩笑”
},
}

最后，我将传输的脚本添加到我的selection_test.html文件中：

选择范围测试
...

这让我可以像这样编写测试文件：

从“路径”导入路径；
从“木偶演员”中导入木偶演员；
从'@jest/globals'导入{description，beforeAll，aftereall，it}；
描述(
“getSelection应与setSelection匹配”，
() => {
让浏览器；
让页面；
之前（异步完成=>{
试一试{
browser=wait puppeter.launch({
无头：是的，
参数：['--disable web security'，'--disable features=SameSiteByDefaultCookies，Cookies Without-SameSite mustbesecure']，
});
page=wait browser.newPage（）；
wait page.goto（`file://${path.join（process.env.ROOT，'tests/selection_test.html'）}`，{waitill:'networkidle0'}）；
等待第页。setBypassCSP（真）；
}捕获（错误）{
控制台错误（error）；
}
完成（）；
});
毕竟（异步完成=>{
等待浏览器关闭（）；
完成（）；
});
它（'应该在只有一个文本节点子节点的节点上匹配'，异步（）=>{
常量数据=等待页面。评估（（）=>{
//修复eslint警告。
window.tachyon=window.tachyon | | null；
if（window.tachyon==null）{
返回新错误（`not find tachy