Karma测试过程中“无法对‘Document’执行'querySelector‘：'class MyComponent extends’”
在Karma测试过程中，出现了错误信息“无法对‘Document’执行'querySelector‘：'class MyComponent extends’”。这个错误通常是由于在测试代码中使用了querySelector方法，但是该方法无法在测试环境中找到相应的元素导致的。
解决这个问题的方法是确保在测试代码中正确地模拟所需的DOM元素。可以使用Jasmine的spyOn方法来模拟querySelector方法的返回值。具体步骤如下：
- 在测试代码中，使用spyOn方法来模拟Document对象的querySelector方法：
const documentSpy = spyOn(document, 'querySelector').and.returnValue(null);- 然后，执行测试代码，确保它能够正常运行。
这样，就可以解决“无法对‘Document’执行'querySelector‘：'class MyComponent extends’”错误。
关于Karma测试工具，它是一个基于Node.js的JavaScript测试执行器，用于运行前端单元测试。它可以在真实浏览器或者Headless浏览器中执行测试代码，并提供了丰富的功能和插件来辅助测试开发。Karma可以与各种前端框架和测试框架集成，如Jasmine、Mocha、QUnit等。
Karma的优势包括：
- 灵活性：Karma支持多种浏览器和操作系统，可以在不同环境中运行测试代码。
- 自动化：Karma可以自动监测文件变化并重新执行测试，提高开发效率。
- 插件生态系统：Karma有丰富的插件生态系统，可以扩展其功能，满足各种测试需求。
Karma的应用场景包括：
- 前端单元测试：Karma可以用于运行前端单元测试，验证代码的正确性。
- 跨浏览器测试：Karma可以在多种浏览器中执行测试代码，确保代码在不同浏览器中的兼容性。
- 持续集成：Karma可以与持续集成工具（如Jenkins、Travis CI）集成，实现自动化测试。
腾讯云提供的相关产品和服务包括：
- 云服务器（CVM）：提供弹性、可靠的云服务器实例，用于部署和运行应用程序。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的云数据库服务，用于存储和管理数据。
- 云存储（COS）：提供安全、可靠的对象存储服务，用于存储和管理大规模的非结构化数据。
- 人工智能平台（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。
- 物联网平台（IoT）：提供全面的物联网解决方案，用于连接和管理物联网设备。
- 移动推送（TPNS）：提供高效、可靠的移动推送服务，用于向移动设备发送推送通知。
更多关于腾讯云产品的介绍和详细信息，请访问腾讯云官方网站：腾讯云。
相关·内容
2回答
我对react非常陌生，我已经用React 14写了一个代码，没有任何转译器。现在我想使用Karma-Jasmine进行单元测试，但我的测试似乎无法渲染应用程序。
我有以下结构：
node_modules
MyApp/
/js/ *.js
/test/*.js
Karma.conf.js
package.json
index.html
我的index.html：
<html>
<div id="content"></div>
<script src="js/react-0.14.7.js"><
浏览 0提问于2017-11-16得票数 4
2回答
角2测试-无法创建组件
、、、
我的应用程序有很多模块，有许多组件和服务以及其他Angular2功能。
现在，我正在尝试使用TestBed方法创建一个带有茉莉花+业力的单元测试。
我在揭示概念的证据时遇到了一个错误。我为我的一个组件创建了一个测试，如下所示：
let myCompServiceStub = {} as MyComponentService;
let routerStub = {} as Router;
let globalServiceStub = {} as MyGlobalService;
describe('MyComponent', () => {
let compo
浏览 0提问于2017-01-05得票数 1
1回答
我有一个webcomponent，它创建一个影子DOM并将一些html添加到它的shadowRoot中。
class SomeThing extends HTMLElement {
attachedCallback () {
this.el = this.createShadowRoot();
this.render();
}
render () {
this.el.innerHTML = '<h1>Hello</h1>';
}
}
export default SomeThing;
在webpack和它的bab
浏览 0提问于2016-05-18得票数 3
WebStorageService在组件上运行良好，但是当尝试在Karma中进行测试时，会出现以下异常。
错误:无法解析WebStorageService：(?).的所有参数
在我的规范代码下面
import {LOCAL_STORAGE} from 'angular-webstorage-service';
import { WebStorageService } from 'angular-webstorage-service';
fdescribe('MyComponent', () => {
let component:
浏览 0提问于2019-10-23得票数 0
回答已采纳
我试着改编，但是遇到了第一个障碍。Property 'created' does not exist on type 'VueConstructor<Vue>'。
下面是我的测试，只是为了验证我的组件确实有一个created钩子：
import {assert} from 'chai';
import MyComponent from '../src/components/MyComponent.vue';
it('has a created hook', function() {
asser
浏览 2提问于2018-02-15得票数 0
代码如下：
index.tsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export function Loading(props) {
return <div {...props}>loading...</div>;
}
export class MyComponent extends Component {
static show() {
const container = document.create
浏览 17提问于2021-03-12得票数 0
回答已采纳
1回答
我正在尝试测试一个组件的一部分，将不会显示，如果浏览器没有Flash插件。该组件在和下面提到的逻辑的帮助下检测flash插件。
MyComponent.js
export default class MyComponent extends Component {
static propTypes = {
// props...
};
static contextTypes = {
router: PropTypes.object.isRequired,
};
constructor() {
super();
this.state = {
浏览 0提问于2016-05-07得票数 1
我得到了这个问题头中提到的错误。我不明白为什么我不能检查某个div id是否可用。这是一个非常简单的检查。
测试：
import { MyComponent } from "../src/my-component.js";
import { TestUtils } from "./test-utils.js";
describe("simple test", () => {
it("first test", async () => {
const { shadowRoot } = await TestUt
浏览 19提问于2019-07-16得票数 0
回答已采纳
我正在开发一个打字库，并试图配置巴泽尔的ts_web_test。测试失败是因为[web-server]: 404: /mylibrary/packages/mycomponent/spec/src/mycomponent.component.spec.js HeadlessChrome 76.0.3809 (Mac OS X 10.14.6) ERROR: 'There is no timestamp for mylibrary/packages/mycomponent/spec/src/mycomponent.component.spec.js!'
Karma version
浏览 0提问于2019-08-28得票数 1
当我运行karma测试一个导入HTML文件的javascript文件时，我期望得到可用于测试的html。我不清楚我是不是在尝试一些没有准备好的东西，或者我应该在开始测试之前以某种方式添加HTML文件。
简而言之，我应该怎么做才能对拆分成两个文件(js和html)的webcomponent进行单元测试？如果我误解了关于karma的一些错误(例如，它不能同步加载javascript导入的文件)，可能会有一个有用的评论。
控制台错误：
# npm run test
> skyscanner-openwc-graphql@0.0.0 test C:\_d\WSs\rapidapi-vanill
浏览 3提问于2019-08-13得票数 0
回答已采纳
我正在尝试测试我写的一个使用momentJS的Angular (angular2)服务，但是因为moment存在于浏览器中，所以我一直收到引用错误。有没有办法告诉karma/jasmine如何在单元测试中使用moment？下面是我得到的错误：
ReferenceError: Can't find variable: moment in karma-test-shim.js (line 33814)
以下是我的测试：
describe('isDateBeforeToday', () => {
it('should return true if
浏览 6提问于2017-10-31得票数 3
假设我有一个非常简单的'create‘单元测试，这种测试是ng cli为您生成的：
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [
H
浏览 0提问于2018-01-28得票数 10
回答已采纳
1回答
伙计们，这里是最前沿的新闻。试图理解如何正确地将模拟props传递给组件的构造函数.
class MyComponent extends React.Component {
constructor(props) {
super(props);
let dataToDecode = QueryString.parse(props.location.search).data;
const data = QueryString.parse(Base64.decode(dataToDecode));
this.state = {
浏览 7提问于2019-12-31得票数 1
回答已采纳
我正在使用ConvertFlow，它添加以前创建的表单模板，您告诉它添加此模板；您可以通过添加一个包含您在其系统上创建的表单的id的div来完成此操作。这部分不是问题所在，除了表单HTML是由该服务创建的，所以我无法访问它，无法添加ids等。 表单中有一个我想隐藏的元素，该元素有一个名为data-visible的数据属性。在普通的js中，我可以使用以下命令完成此操作： $('div[data-field="policyNumber"]').attr("data-visible", false); 然而，我不确定角度的方式是什么。我认为Child
浏览 31提问于2019-09-17得票数 1
回答已采纳
2回答
测试连接元件
、、、
我在测试封装在HOCs中的组件时遇到了问题。我有一个类组件，由2个HOC(Redux、Form和Connect)包装。我不想测试连接的组件。我想测试类内的方法。
我在Redux 上读到，您可以通过从组件文件导出类组件并在测试文件中导入命名组件来单独测试类组件。我已经这样做了，仍然无法测试类方法。我还尝试使用酶法dive()绕过HOCs，这给了我一个错误：
不变冲突:无法在"Connect(Form(MyComponent))“的上下文或道具中找到”存储“
组件文件：
export class MyComponent extends Component {
getThing(
浏览 0提问于2019-04-07得票数 0
回答已采纳
1回答
我运行jasmin-Karma测试的以下功能。
ExampleFunction(someParam) {
let element = document.querySelector(`aSelectorId}`);
if (element ) {
element.classList.remove('disabled');
element.classList.add('enabled');
}
}
这是我运行的测试
describe('ExampleFunction', () => {
浏览 2提问于2020-09-24得票数 0
回答已采纳
我有一个jsx文件：
import React from "react";
import ReactDom from "react-dom";
const styles = {
textAlign: "center",
color: "black"
};
ReactDom.render(
<div>
<h1 style={styles}>Good {wish}</h1>
</div>,
document.querySelector("#root&#
浏览 2提问于2022-03-21得票数 0
我正在为一个Angular应用编写karma/jasmine单元测试。其思想是验证HTML模板是否有效。
假设有一个简单的组件"my-comp“。假设我使用下面的HTML模板，它调用了一个不存在的属性：
<my-comp [noop]="dummy"></my-comp>
在应用程序执行期间，我会得到一个模板解析错误：
Can't bind to 'noop' since it isn't a known property of 'my-comp'.
现在，我想在测试过程中检查一下。然而，单元测试通
浏览 2提问于2018-11-20得票数 0
下拉菜单在应用程序中可以正常打开，但在单元测试中不起作用。我不确定我是否遗漏了什么，但我已经检查了很长一段时间，我找不到任何用户错误。我还在github上提交了一个问题。
这是stackblitz链接：
运行应用程序
// bootstrap(); // to run karma
platformBrowserDynamic().bootstrapModule(AppModule); // to run the app
运行因果报应
bootstrap(); // to run karma
// platformBrowserDynamic().bootstrapModule(AppModul
浏览 0提问于2018-05-02得票数 2
我的问题是:下面的代码在浏览器中工作，但是如果因果报应，不是-测试它。
有谁可以帮我？谢谢!
我们的堆栈中有以下内容：
角8.2.7材料8.2.3Jasmine 3.5.0Karma 4.4.1<code>F 213</code>
模板：
<mat-form [formGroup]="formGroup">
<mat-form-field>
<mat-select formControlName="myField" placeholder="Placeholder">
浏览 4提问于2021-02-04得票数 0
回答已采纳
2回答
我使用Qunit和Karma进行测试，但我无法找到创建Ember组件的方法。
下面是我的测试代码：
test('Function',function(){
var test = App.MyComponent.create({
data:[{'a':'a'}]
});
var result = test.get('buildingComponent');
equal(result, 'done', "function crush
浏览 5提问于2013-11-14得票数 2
回答已采纳
1回答
无酶反应组分函数
、、、、
我正在为React组件Product编写一个测试。我使用的是简单简单的Jest，没有react-renderer或enzyme，我的目标是暂时保持这种状态。我需要测试一个组件的函数，并且无法通过jest直接调用它。代码给出如下。
构成部分：
import React, { Component } from 'react';
class Product extends Component {
state = {
heading: `Old Heading`
};
changeHeading() {
this.setSta
浏览 1提问于2020-08-24得票数 2
1回答
我已经使用这个结构创建了vue组件。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
我想用karma和jasmine或者jasmine rails gem来测试一下。我想不出如何测试这个组件。在文档中的所有示例中，他们都使用requirejs模块方式进行测试。我使用全局组件的方式来创建组件。
这些是文档中的示例。
<template>
<span>{{ message }}</span>
浏览 0提问于2016-11-11得票数 1
1回答
我想知道为什么我的jest/酶测试失败了。我有一个使用redux中的compose函数的组件，结构如下：
class MyComponent extends Component {
//code here
}
export default compose(
connect(mapStateToProps),
)(MyComponent)
在我的jest测试中，我这样做：
Import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let com
浏览 2提问于2018-01-30得票数 4
回答已采纳
3回答
我使用了一个添加到上下文中的方法，该方法在componentDidMount()生命周期方法中触发。
我应该能够通过提供一个对酶的shallow()方法的选项来存根上下文，但是这不会传递给我的组件。例如：
我的测试：
it('renders without crashing', () => {
const context = { dispatch: jest.fn() };
shallow(<MyComponent />, { context });
});
和我的组件：
import React, { Component } from 'r
浏览 5提问于2018-12-11得票数 2
1回答
我有一个使用“通用饼干”的反应组件。在调用测试用例中的挂载时，cookie对象是空的。
import Cookies from 'universal-cookie';
const cookies = new Cookies();
class MyComponent extends React.Component {
componentDidMount(){
axios.defaults.headers.common.Authorization = cookies.get('token').value; //12492525
}
}
//M
浏览 1提问于2019-12-02得票数 0
回答已采纳
我运行了一个简单的karma init，并在整个过程中按enter以获得以下karma.conf.js：
// Karma configuration
// Generated on Thu Jan 21 2016 10:32:15 GMT-0600 (CST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
//
浏览 3提问于2016-01-21得票数 0
回答已采纳
1回答
我遇到了一个我搞不懂的问题，环顾四周似乎没人问同样的问题.
下面是我的工作代码：
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
window.Vue = Vue
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
methods: {
greetings:
浏览 0提问于2018-10-16得票数 0
回答已采纳
我有一个正在构建Typescript Angular2应用程序的Webpack配置。我正在尝试将Jasmine/karma测试集成到其中。
我有一个简单的Webpack测试配置，像这样：
loaders: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader','angular2-router-loader']
},
{ test: /\.html$
浏览 0提问于2016-10-26得票数 0
2回答
当我运行这样一个基本的测试用例时：
fdescribe('Browser back button', () => {
fit('should return to previous', async () => {
const originalHref = window.location.href;
window.history.pushState({}, 'Test', '/test');
window.history.back(); // This doesn
浏览 0提问于2021-02-26得票数 1
回答已采纳
1回答
我目前在为reactjs应用程序编写的单元测试中遇到了装饰器的问题。
我喜欢我们通过在react组件中引入装饰器来避免太多样板的方式，组件看起来很干净，代码也变得更具可读性。但现在我对这些毫无意义的装饰器感到非常恼火，因为我无法运行一个单元测试，而这在我的应用程序上下文中是一个必须的测试。代码描述如下：
@translate(['common'])
export default class MyComponent extends React.Component {
...
componentDidMount() {
// Ajax call on success set
浏览 2提问于2017-12-04得票数 1
我有一些外部数据获取到一些按钮，我想当我点击一个按钮自动滚动到它的部分。我就是这样做的：
const Target = (e) =>
document.querySelector("."+ e.target.className).scrollIntoView({
behavior: 'smooth'
});
}
{sideBarData.article.document.data.sections.map((sec)=>
(
<button className=
浏览 6提问于2022-06-16得票数 0
1回答
我们使用karma作为jasmine单元测试的测试运行器，测试一个Angular应用程序。我们有6000多个测试。Karma运行测试的速度非常慢，而且从来没有通过过大约2700次测试(11分钟)。
Karma可以运行的测试数量是否有限制，或者测试跑步者的性能随着测试数量的增加而下降是正常的吗？
// Karma Config file
module.exports = function(config) {
config.set({
basePath: '../',
frameworks: ['jasmine'],
files: [
浏览 12提问于2016-09-13得票数 1
我已经检查了这个问题的github问题，并查看了各种堆栈溢出问题和博客之类的内容，并且我无法找到在我的角2应用程序中运行"ng测试“时为什么会出现这个错误的解决方案。
下面是测试的样子：
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";
import { Location,Location
浏览 4提问于2017-04-05得票数 5
我刚刚开始学习React refs，我想选择ref=this.contentRef的所有图标。使用js，我会这样做: document.querySelectorAll('.content i')。如何用裁判做到这一点呢？
someMethode() {
const content = this.contentRef.current.childNodes;
const content2 = document.querySelectorAll('.content i');
}
render() {
return (
<div ref={
浏览 1提问于2018-07-31得票数 3
1回答
有关编写React测试用例的帮助
import {getEvent} from './utility'
export default class MyComponent extends React.Component {
constructor() {
......
}
componentDidMount(){
....
this.addEventListeners();
}
addEventListeners() {
const targetEvent = getEvent() === 'someeven
浏览 0提问于2018-09-27得票数 0
1回答
我尝试在一个角组件中选择内容标签中的所有内容。
<my-component>
<another-component></another-component>
<another-component></another-component>
<another-component></another-component>
</my-component>
my-component.html
<div>
<content></content>
</di
浏览 1提问于2014-10-06得票数 1
回答已采纳
1回答
我试着用id来得到元素。(这是一个再现错误的示例代码)
function MyComponent(){
const myId = useId();
useEffect(() => {
const myComponentDOMElement = document.querySelector(`#${myId}`); // error here
}
)
return <div id={ myId }> text </div>
}
此代码提供了一个错误：
Uncaught DOMException: Failed to execute
浏览 6提问于2022-09-29得票数 1
1回答
包含异步的拆分角元件单元测试
、、、、
我有一个组件，它通过服务从服务器加载一些数据，并显示它。
我已经为组件编写了以下测试(它可以工作)：
...
it('Should contains data after loading', async(() => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('h1').textContent.trim()).toBe(expectedTitle);
expec
浏览 3提问于2017-05-26得票数 0
回答已采纳
假设我的文档中有一个如下所示的DOM：
<body>
<div id="outer">
<custom-web-component>
#shadow-root (open)
<div id="inner">Select Me</div>
</custom-web-component>
</div>
</body>
是否可以在document上使用单个querySelector参数来选择卷影根目录中的内部div？如果是
浏览 0提问于2019-09-06得票数 3
1回答
我试图从kendo弹出窗口中提取一个值，但似乎无法得到正确的组合框/语法。我在寻找9070009中的"dipatchIdentLablel“
我试过：
.Document.getElementById("AddSucessWindow").Value 'I know, too broad, too many possibilities
.Document.getElementById("AddSucessWindow").Text
.Document.getElementById("AddSucessWindow").getEl
浏览 3提问于2017-11-13得票数 0
我正在尝试将对象引用传递给与聚合物元素关联的Dart脚本。我已经在DOM中找到了元素，但我不知道如何在Dart中调用与该元素关联的方法，也不知道如何以任何其他方式将对象动态传递给要显示的聚合物元素。
浏览 3提问于2014-12-13得票数 0
我试图在我的tfs构建中运行npm测试，但是每次我得到ENOENT错误时都会得到：
C：\程序Files\nodejs\npm.cmd运行测试
国家预防机制错误！路径E:\Agents\agent_work\38\package.json
国家预防机制错误！代码ENOENT
国家预防机制错误！错误号-4058
国家预防机制错误！系统调用已打开
国家预防机制错误！ENOENT:没有这样的文件或目录，打开'E:\Agents\agent_work\38\package.json‘
国家预防机制错误！这与npm无法找到文件有关。
我遵循来设置我的构建，我还包括了npm cache c
浏览 1提问于2017-10-12得票数 1
回答已采纳
1回答
我用的是有角的Jest (而不是Karma)。在运行angular.json时，ng test文件的配置似乎是正确的。
根据
您可以在构建器选项中指定Jest选项(当它是持久配置时有用)，也可以将ng test作为参数(当它是一个定时器时使用)。
例如，要运行单个测试：
ng test --testNamePattern="My test suite My test case"
这在我的v14升级之前就已经开始工作了，但现在已经不再是这样了。现在如果我跑：
ng test --testNamePattern="MyComponent"
我得到：
Erro
浏览 13提问于2022-06-27得票数 -2
回答已采纳
3回答
样式可能出现在50毫秒，并消失在下面的代码在这个SSR应用程序。我很好奇是什么导致了这一切。
// This component is a child of index.tsx in the /pages folder
<Button
color="primary"
variant="outlined"
size="large"
>Test Button</Button>
样式消失后，将留下一个普通的HTML按钮。
我相信是Next.js造成了这一切。我检查了Next.j
浏览 5提问于2019-11-10得票数 7
我们使用Karma和Grunt在Jenkins上运行单元和验收(e2e)测试。Karma使用karma-junit-reporter生成JUnit报告，我们已经对Jenkins进行了配置，如果在这些报告文件中发现测试失败，则将构建设置为不稳定(黄色)。
问题是，每当测试失败时，Karma和Grunt都会以非零退出代码退出，这会导致构建失败(红色)。这种行为可以改变吗？
我不希望使用--force运行Grunt，因为当测试无法执行或其他任务失败时，我仍然希望构建失败。
浏览 1提问于2015-02-05得票数 0
1回答
试图在Jest环境中模拟Renderer2，但无法使其正常工作。笑话23 &角形7.试过每一种方法：
component.ts
const icosahedron = document.getElementById('renderIcosahedron');
this.renderer2.appendChild(icosahedron, this.renderer.domElement);
获取所有时间的错误(仅在测试中)：
TypeError: Failed to execute 'appendChild' on 'Node
浏览 0提问于2019-06-03得票数 5
2回答
我创建了自定义表单组件。在我将其添加到智能编辑中之后，它不会调用控制器来fillIn表单。我在*-items.xml中创建了itemtype MyComponentModel，签入了HAC部署，它就在那里。我还添加了类似于这个中的注释
@Controller("MyComponentController")
@RequestMapping(value = ControllerConstants.Actions.Cms.MyComponent)
public class MyComponentController extends AbstractAcceleratorCMSCom
浏览 0提问于2018-09-20得票数 2
回答已采纳
我正在尝试使用fakeAsync测试角2组件，但是没有设置夹具变量。事实上，承诺回调并不是被调用的。以下是代码：
@Component({
template: '',
directives: [GroupBox, GroupBoxHeader]
})
class TestComponent {
expandedCallback() { this.expandedCalled = true; }
}
it('testing...', inject([TestComponentBuilder], fakeAsync((tcb) => {
v
浏览 3提问于2016-01-12得票数 2
1回答
我正在开发一个，并且对测试非常陌生。我试图模拟一个根据当前用户状态返回真或假布尔值的钩子。我需要模拟authState变量的返回值，在此基础上，我应该检查组件是否呈现。但是，jest模拟只返回相同的值。
useAuth.ts
export const useAuthState = () => {
const [authState, setAuthState] = useState<AuthState>();
useEffect(() => {
return authentication.subscribe(setAuthState);
}, [])
浏览 2提问于2022-07-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
