标签: jsdom

我正在计划内部使用的webservice,它接受一个参数,一个URL,并返回表示该URL中已解析 DOM的html .通过解决,我的意思是webservice将首先获取该URL的页面,然后使用PhantomJS"渲染"页面,然后在执行所有DHTML,AJAX调用等之后返回结果源.但是发动对每个请求的基础(这是我现在做)幽灵的方式过于缓慢.我宁愿拥有一个PhantomJS实例池,其中一个实例可用于为我的webservice提供最新的调用.

以前有没有做过这方面的工作？我宁愿将这个web服务基于其他人的工作,而不是从头开始为我自己编写一个池管理器/ http代理服务器.

更多上下文:我列出了迄今为止我见过的两个类似的项目,以及为什么我避免了每个项目,这导致了关于管理PhantomJS实例池的问题.

jsdom - 从我所看到它在页面上执行脚本具有很强的功能,但它不会尝试复制浏览器行为,因此如果我将它用作通用的"DOM解析器",那么它最终会成为很多额外的编码来处理各种边缘情况,事件调用等.我看到的第一个例子是必须为我使用node设置的测试应用程序手动调用body标签的onload()函数.这似乎是一个深深的兔子洞的开始.

Selenium - 它只有很多移动部件,因此设置一个池来管理长期存在的浏览器实例将比使用PhantomJS更复杂.我不需要它的任何宏录制/脚本功能.我只想要一个能够获得网页并解析它的DOM的web服务,就好像我用浏览器浏览到那个URL一样(如果我可以让它忽略图像等,甚至更快)

TextEncoder当测试使用 或的函数时，TextDecoder我得到：

ReferenceError: TextEncoder is not defined
ReferenceError: TextDecoder is not defined

我正在使用jsdom，为什么这不起作用？

我尝试将现有项目转换为使用Typescript,我在测试设置时遇到了问题.

我有一个用于我的测试的安装文件,用于设置jsdom,以便我的所有DOM交互代码在我的测试期间工作.使用Typescript(ts-node with mocha)我总是得到这样的错误:

Property 'window' does not exist on type 'Global'.

为了防止这种情况,我尝试修补NodeJS.Global接口,如下所示:

declare namespace NodeJS{
  interface Global {
    document: Document;
    window: Window;
    navigator: Navigator;
  }
}

但这并没有改变任何事情.

如何在NodeJS全局变量上启用这些浏览器属性？

附加功能:

这是我的摩卡setup.ts:

import { jsdom, changeURL } from 'jsdom';

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = global.document.defaultView;
Object.keys(global.document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = global.document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js',
};

changeURL(global.window, 'http://example.com/');

看完这篇微模板后就死了.我变得很好奇:

1. 是否在服务器上使用DOM会产生更清晰,更易于维护的代码,然后进行模板化.
2. 使用jsdom而不是模板引擎是否更有效率.
3. 如何将jsdom纳入标准MVC设置的视图中.

通常在什么情况下使用服务器端DOM抽象更好,比如jsdom而不是模板引擎,比如EJS或jade.

这个问题特定于node.js和其他SSJS

我正在尝试以开玩笑的方式为我的Web组件项目编写测试.我已经使用了带有es2015预设的babel.我在加载js文件时遇到问题.我已经跟踪了一段代码,其中document对象有一个currentScript对象.但在测试环境中它是null.所以我在想同样的嘲笑.但是jest.fn()并没有真正的帮助.我该如何处理这个问题？

一段代码,其中开玩笑失败.

var currentScriptElement = document._currentScript || document.currentScript;
var importDoc = currentScriptElement.ownerDocument;

我写的测试用例. component.test.js

import * as Component from './sample-component.js';

describe('component test', function() {
  it('check instance', function() {
    console.log(Component);
    expect(Component).toBeDefined();
  });
});

以下是jest抛出的错误

Test suite failed to run

    TypeError: Cannot read property 'ownerDocument' of null

      at src/components/sample-component/sample-component.js:4:39

更新: 根据AndreasKöberle的建议,我添加了一些全球变量,并试图嘲笑如下

__DEV__.document.currentScript = document._currentScript = {
  ownerDocument: ''
};
__DEV__.window = {
  document: __DEV__.document
}
__DEV__.document.registerElement = jest.fn();

import * as Component from './arc-sample-component.js'; …

我想在服务器端执行以下操作:

1)刮取网页
2)模拟该页面上的点击,然后导航到新页面.
3)刮掉新页面
4)模拟新页面上的一些按钮点击
5)通过json或其他东西将数据发送回客户端

我正在考虑将它与Node.js一起使用.

但我很困惑我应该使用哪个模块
a)Zombie
b)Node.io
c)Phantomjs
d)JSDOM
e)其他

我已经安装了node,io但是无法通过命令提示符运行它.

PS:我在Windows 2008服务器上工作

我正在使用create-react-app构建一个React应用程序.

运行ESLint时出现以下错误:
8:3 error 'document' is not defined no-undef.

我的应用程序运行没有错误,但我在2个文件中得到此ESLint错误.请参阅其中一个.jsx文件和我的ESLint配置.

index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

eslintrc.js:

module.exports = {
  "extends": "airbnb",
  "plugins": [
      "react",
      "jsx-a11y",
      "import"
  ],
  "env": {
    "jest": true
  }
};

我怎样才能解决这个问题 ？目前我只会忽略这两个文件......但我宁愿找到一个长期的解决方案.

我正在尝试将我的项目升级到 React 18，一切都可以在浏览器中的开发和生产模式下运行。但是升级到最新版本后，@testing-library/react我的一些单元测试失败了，其中很多都记录了以下警告：

  console.error
    Warning: The current testing environment is not configured to support act(...)

      at printWarning (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at isConcurrentActEnvironment (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25057:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:27351:12)
      at scheduleUpdateOnFiber (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:25292:5)
      at setLoading (node_modules/.pnpm/react-dom@18.0.0_react@18.0.0/node_modules/react-dom/cjs/react-dom.development.js:17342:16)
      at _callee2$ (node_modules/.pnpm/@cubejs-client+react@0.29.51_react@18.0.0/node_modules/@cubejs-client/react/src/hooks/cube-query.js:56:7)

我做的第一件事是检查我的版本，清除节点模块并锁定文件以防万一：

• react18.0.0
• react-dom18.0.0
• @testing-library/react版本：“13.1.1”，
• 测试框架和版本：“jest”：“27.5.1”，
• DOM环境：jsdom 16.7.0

但一切看起来都不错吗？

我检查了 React 18 的迁移文档：https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html 其中说最新版本@testing-library/react不需要globalThis.IS_REACT_ACT_ENVIRONMENT = true设置。

但无论如何，我在测试运行之前尝试手动设置。但这也没有解决它，（我尝试了几个版本）

// @ts-ignore
global.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
globalThis.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
self.IS_REACT_ACT_ENVIRONMENT = true
// @ts-ignore
window.IS_REACT_ACT_ENVIRONMENT …

我正在使用命令:

mocha --compilers :./test/babel-setup.js --recursive --watch

这是错误的:

ReferenceError: window is not defined

我的babel-setup.js中有以下内容:

require("babel/register")({
  compact: false
});

我使用节点0.12.7和"mocha":"^ 2.2.5"和"jsdom":"^ 3.1.2".

我已经在项目中安装了jsdom.

是什么导致错误？

有没有办法卸载和垃圾收集TestUtils.renderIntoDocument在jsdom测试中使用安装的React组件？

我正在尝试测试发生的事情componentWillUnmount并且TestUtils.renderIntoDocument不会返回任何要调用的DOM节点React. unmountComponentAtNode.