如何在对react组件进行单元测试的同时，对img标签进行测试
在对React组件进行单元测试的同时，对img标签进行测试，可以采取以下步骤：
- 安装所需的测试库和工具：首先，确保你的项目中已经安装了适当的测试库，如Jest和Enzyme。你可以使用npm或yarn来安装它们。
- 创建测试文件：在与组件文件相同的目录下，创建一个名为
Component.test.js的测试文件。这个文件将包含对组件的单元测试代码。 - 导入所需的库和组件：在测试文件的开头，导入所需的测试库和组件。例如，导入React、Enzyme的shallow函数和待测试的组件。
- 编写测试用例：使用Jest提供的
test函数来编写测试用例。对于img标签的测试，可以使用Enzyme的find方法来查找img标签，并对其进行断言。 - 编写测试用例：使用Jest提供的
test函数来编写测试用例。对于img标签的测试，可以使用Enzyme的find方法来查找img标签，并对其进行断言。 - 在上面的例子中，我们首先使用
shallow函数来创建组件的浅渲染实例。然后，使用find方法查找img标签，并使用prop方法获取其src属性的值。最后，使用expect断言来验证src属性的值是否符合预期。 - 运行测试：在命令行中运行测试命令，通常是
npm test或yarn test。测试运行完成后，你将看到测试结果和覆盖率报告。
对于React组件的单元测试，还可以进一步测试其他方面，如组件的渲染、props传递、事件处理等。可以根据具体需求编写更多的测试用例。
在腾讯云的产品中，可以使用云测试（Cloud Test）来进行移动应用的自动化测试。云测试提供了丰富的测试能力和工具，包括自动化测试、性能测试、兼容性测试等。你可以通过腾讯云控制台或API来管理和执行测试任务。了解更多关于云测试的信息，请访问腾讯云测试产品介绍页面：云测试产品介绍。
相关·内容
1回答
刚开始学习测试库的React js.Some，比如chai，Sinon，testing和mocha用于单元测试。在react js中有没有可用于测试驱动开发实践的测试库？另一个问题是如何在react js中测试页面导航，因为一旦页面提交，状态和属性就会更新。注意:通过react路由器，它将导航到其他页面。如何编写集成测试的测试用例。
浏览 1提问于2018-06-18得票数 0
我正在尝试使用Jest为react类编写测试用例，在material中使用frameworks.My react类使用卡类。我的部分代码是这样的。
<Card>
<CardHeader
avatar = {<div className={classes.imgHolder}><img src='/opt/imgs.png'/></div>}
actions = {<div/>}
title = {<div/>}
/>
<
浏览 0提问于2019-05-13得票数 0
回答已采纳
1回答
我想单独测试react组件，而不是使用模拟存储。
假设我有一个连接到redux存储的组件，并且我导出了两次：
class MyComponent extends Component {
...
}
export {MyComponent};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(injectIntl(MyComponent))
);
然后在我的测试文件中，我将导入未连接的版本：
import {MyComponent} from "./MyComp
浏览 1提问于2019-11-10得票数 1
1回答
我正在使用AngularJS开发一个单页面的web应用程序.此应用程序的数据是通过REST使用的，而REST本身就经过了很好的测试。
角度应用程序有许多单元测试，例如测试单个控制器及其方法。它还提供了一系列集成测试，这些测试目前可以验证这些控制器在应用于视图时是否正确。
单元测试和集成测试目前都在共享一组存根JSON数据，这些数据是在某些HTTP请求即将发出时返回的(通过$httpBackend角服务)。在测试期间，不会向API服务器发送实际的HTTP请求。
这是一个很好的前端集成测试方法吗？在我看来，单元测试正在测试小的代码单元(例如控制器中的单个方法)，而集成测试则测试这些单元在视图或模板
浏览 0提问于2014-02-18得票数 7
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'e
浏览 42提问于2019-01-02得票数 0
我正在寻找使用cypress为我的react应用程序设置单元和集成测试的最佳实践。我想知道我们是否可以将集成和单元测试(基于组件的测试)合并到一个文件中。或者，如果我们想要使用Cypress为我们的应用程序实现IT和UT，有没有更好的方法可以提供。
浏览 2提问于2020-09-17得票数 1
我正在搜索如何在我的应用程序中实现单元测试功能，但可用的资源有限，是否有任何可用文档提供在ReactNative应用程序中添加单元测试功能的分步指南。
因为大多数文档都过时了，因为有人说我们需要模拟react-native，然后导入react/addons，这是现在不可用的。
现在React中没有加载项文件...
浏览 2提问于2016-08-25得票数 0
1回答
我试图在酶单元测试中检查我的成分的默认状态。为此，我有以下组件：
import React, { Component } from 'react';
class Picker extends Component {
constructor(props) {
super(props);
this.state = {
sources: true
};
}
}
...
export default Picker;
最后，我的单元测试如下所示：
it('should contain `
浏览 1提问于2017-12-28得票数 8
我正在尝试用酶来模拟一个按钮点击。我已经能够编写简单的测试，如果一个元素呈现，但是，有趣的测试，如按钮点击等是不够的。
在此示例中，终端中的错误为：
1) Front End @Profile Component clicks a button :
Error: This method is only meant to be run on single node. 0 found instead.
at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1093:17)
at ShallowWrap
浏览 2提问于2016-05-14得票数 2
1回答
我正在使用Jest和酶进行单元测试。我有一个根据媒体类型呈现组件的组件。在单元测试下，我正在检查是否呈现了适当的组件。 我的组件 const getComponent = {
'image': ImageComp,
'video': VideoComp,
'other': DocumentComp
}
const MediaDisplay = (props) => {
let { assetInfo } = props;
let source = assetInfo.assetUrl;
const
浏览 19提问于2020-04-07得票数 0
我得到了这个错误：
在路由器上下文之外呈现的链接无法处理单击。
在<Link>标签上，无法找出原因。
import React from 'react';
import { Router , Route, Link , hashHistory } from 'react-router';
class App extends React.Component {
render() {
return (
<div className="container-fluid">
浏览 1提问于2016-07-05得票数 9
2回答
我有一个很大的angular应用程序，我正试图逐步地将其转换为React。因此，我的一个angular指令呈现一个带有id的div，控制器将使用ReactDOM.render将React组件呈现到该div。
除了单元测试之外，一切都运行得很好。已经有很多使用karma和angular的测试套件的单元测试，它们在我调用ReactDOM.render时抛出错误，因为没有指向getElementById的文档。angular的测试框架让您可以$compile您的angular代码，这样您就可以在不使用DOM的情况下运行单元测试。
我希望有人以前遇到过这个问题--有什么想法可以让React单元测试与A
浏览 0提问于2015-11-07得票数 1
1回答
在我的gatsby应用程序中，我有以下json文件：
Competences.json
{
"languages": [
{
"img": "JS.png",
"title": "Javascript",
"text": ""
},
{
"img": "Node.png",
"title": "Node.js",
"
浏览 4提问于2020-10-21得票数 0
回答已采纳
我有一个实现方法的React组件，我想对它进行单元测试。理想情况下，我可以在单元测试中更改组件上的一些支柱或状态，并验证它是否重新呈现。如果这有帮助的话，我正在使用。
浏览 4提问于2017-05-26得票数 21
回答已采纳
根据上的问题，我有一个组件Comp，它在导出时使用来自reactjss的injectSheet包装。请查看上的设置。
在单元测试中，我想断言该组件包含<a>，它确实包含它(请参阅代码框)，但是测试失败，不管如何：
describe("<Comp /> component", () => {
const wrapper = shallow(<Comp />);
it("should render a <a>", () => {
expect(wrapper.find('a'
浏览 1提问于2017-12-07得票数 3
1回答
目前，我正在与一个ESP-以色列国防军工作，并试图使单元测试工作。
我已经找到了，但有一点我不明白。
但首先，让我解释一下我的设置：
我在Windows下工作，拥有一个MSYS32外壳。
我的IDF_PATH指向~/esp-以色列国防军，我的特别以色列国防军套房就在那里。
然而，我的项目位于~/project_dir/subdir中。他们按应有的方式工作。
如果我遵循单元测试指南中的说明，我就可以构建系统中内置的测试用例。但是它找不到我的应用程序的单元测试。这是很清楚的，因为他们完全坐在其他地方。
我现在该怎么办？如果没有过多地篡改默认的单元测试应用程序，这是完全正确的吗？
浏览 1提问于2018-07-04得票数 11
回答已采纳
1回答
为asp.net实现测试自动化
、、、、
我已经计划为我们的web应用程序实现自动化测试，.I希望这个工具是开源的，测试用例应该用C语言编写。
因此，我选择使用selenium Web-driver和N-unit。我有一系列的问题。
我只能使用这个设置进行单元测试吗？不能做功能测试？
浏览 0提问于2014-04-02得票数 0
我创建了一个模型来识别图像中的数字。图像具有黑色背景和代表数字的白色像素(这是一个黑白图像)。我有95%的准确率，但任何给出的预测图像，它总是预测
DATADIR = "./abc"
catg = ['data_aug_0','data_aug_1','data_aug_2','data_aug_3','data_aug_4','data_aug_5','data_aug_6','data_aug_7','data_aug_8',
浏览 0提问于2019-08-03得票数 0
3回答
我正在使用Enzyme对我的反应组件进行单元测试。我理解，为了测试未连接的原始组件，我只需导出并测试它(我已经这样做了)。我已经成功地为连接的组件编写了一个测试，但是我真的不确定这是否是正确的方法，也不确定我到底想为连接的组件测试什么。
Container.jsx
import {connect} from 'react-redux';
import Login from './Login.jsx';
import * as loginActions from './login.actions';
const mapStateToProps =
浏览 0提问于2016-08-17得票数 24
回答已采纳
我在单元测试中使用了React测试库。
我想测试我的React组件中的这个：
return (
<div>
<p data-testid="my-string">
{string}
</p>
</div>
);
在查询queryByTestId组件后，我收到如下内容：
<p class="css-1317scs-myString" data-testid="my-string"><iframe src="
浏览 5提问于2022-09-18得票数 0
回答已采纳
2回答
我正在使用React中的功能组件，我需要为功能组件中的方法编写单元测试用例。
import React from 'react';
function print(){
console.log('hello');
}
function Welcome(props){
return <h1>{props.name}</h1>;
}
export default Welcome;
在jest和酶中：
test (method print , ()=> {
const container = shallo
浏览 19提问于2020-06-02得票数 0
2回答
反应中的单元测试入口文件
、、、
我正在为React中的条目(也称为根或索引)文件编写单元测试。
似乎还没有编写关于React中条目文件的单元测试的文档。
单元测试条目文件是否有必要作出反应？有可能吗？
浏览 0提问于2018-06-11得票数 2
回答已采纳
我们目前正在用酶的浅渲染功能测试我们的反应应用程序。每个组件都是隔离测试的，所以我理解为什么这被称为“单元测试”。
我们正在向渲染组件的方向发展，它是子组件。您可以使用酶的挂载功能或React测试库来实现这一点，因为它从不浅显。这也意味着如果Redux是一个连接的组件，我们必须模拟它。
这种测试的名称是什么？我听说过它叫做“集成测试”，但是当我在工作中这么说的时候，人们认为我的意思是其他的东西。它是否仍然是一种“单元测试”，尽管多个组件是一起测试的？
浏览 0提问于2019-07-18得票数 2
回答已采纳
我正在尝试做一个jest单元测试，它只是简单地确认refreshControl属性在我的ScrollView中是活动的。
我目前有一个组件，它本质上呈现以下内容
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
{children}
/>
它在实践中工作得很好，在我的测试中，我正在检查以确认道具是否如预期的那样。
import { Refres
浏览 0提问于2018-11-16得票数 0
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
我已经创建了简单的react组件，并编写了正确工作的组件的测试用例。我已经得到了测试用例的覆盖报告。
现在，我已经在我的其他组件中添加了react redux。此组件包含componentDidMount()和导出默认连接(null、updateProps)(ComponentName)方法。我需要为这些方法编写单元测试用例。
请参考下面的代码示例。
class MyComponent extends Component {
componentDidMount = () => {
//some code here
)
handl
浏览 3提问于2021-12-03得票数 1
1回答
如何对PropTypes.shape的React组件的propTypes验证进行单元测试
我的组件propTypes验证：
MyComponent.propTypes = {
propA: PropTypes.string.isRequired,
propB: PropTypes.shape({
inner1: PropTypes.bool.isRequired,
inner2: PropTypes.func,
}).isRequired,
}
我的单元测试：
describe('MyComponent propTypes validation',
浏览 2提问于2017-08-17得票数 0
1回答
我正在尝试为使用微前端架构的react网络应用程序编写单元测试。我的第一步是为应用程序容器编写单元测试。
应用程序容器react组件使用包含带有后续路由的交换机的react路由器来呈现主内容区域中的组件。
使用JavaScript运行时集成将每个应用程序挂载到应用程序容器。
我正在使用React Jest Library和Jest作为测试工具集的一部分。
我在互联网上到处搜索，没有找到任何关于我所拥有的问题的有用文章。它们中的大多数展示了测试与我的场景无关的web应用程序的演示。
我有三个问题，我想要一些指导。
(自微前沿)由多个组件层组成，这些组件与身份验证和其他业务逻辑链接在一起。我应该只
浏览 3提问于2021-08-09得票数 3
回答已采纳
在开发我的第一个大型React应用程序时，我开始对嵌套组件的紧密耦合感到不安，尤其是在编写单元测试时。
如果是一个高级组件，并且它的呈现函数返回<div><Bar><Baz /></Bar></div>，我希望能够单独测试Foo、Bar和Baz。
我寻求建议，但什么也没找到。因此，我自己想出了两种注入方法:工厂函数和通过外部组件的属性。)我不是在说孩子。我说的是“烘焙”依赖项--人们通常通过require或import语句导入的那种依赖项。
属性
const Baz = React.createClass({
render() {
浏览 1提问于2015-10-09得票数 2
我试图升级以响应16+，而我现有的单元测试失败了。应用程序运行良好，只有单元测试失败。
连接-组成部分：
const componentsWrapper = (Components, selectData) => {
class BaseComponent extends Component {
constructor(props) {
super(props);
this.state = {
saveMode: false,
updateMode:
浏览 1提问于2020-01-16得票数 1
回答已采纳
我正在尝试使用jest和react测试库对自定义钩子进行单元测试，在这种情况下抛出错误，但我无法捕获实际的错误消息，以下是我到目前为止的代码：
我的第一个钩子：
import react from 'react';
const useFirstHook = () => {
//I will add conditional logic later
throw new Error('my custom error is thrown')
const test1 = 'I am test 1';
retur
浏览 7提问于2021-03-09得票数 0
2回答
我试着制作一个简单的照片库。当我点击照片预览，我想要一个更大的图像的模式弹出。
到目前为止我已经开始工作了。模态元素本身最初被设置为一个带有display: none;的类。我的问题是，当我点击一张照片时，每一个模式都会弹出.
如何更改一个特定模态元素的类名，这样就不会发生这种情况？
这是我的代码：
import React, { Component } from 'react';
import images from './../data/images';
import './../css/Photos.css';
class Photo
浏览 0提问于2018-12-28得票数 0
回答已采纳
我想添加一个单元测试来测试样式类的设置是否正确。不幸的是，getter getStyleClass需要一个FacesContext。有什么想法吗？
浏览 0提问于2010-02-17得票数 1
回答已采纳
我刚刚加入了一个团队，我们使用react，redux，recompose来构造组件来构建UI。应用程序中没有任何单元测试，并且应用程序没有一致的体系结构。我决定自己使用jest和react- tests library添加单元测试。我在一些快照测试中取得了成功，但在单元测试方面却举步维艰。我还在学习react，并且对redux还很陌生。我想要一些建议。我将分享一个组件，它呈现一个带有列和行的表。我想要一个反馈。 import React, { useEffect, useState } from 'react';
import { compose } from 're
浏览 32提问于2020-01-29得票数 2
回答已采纳
我有这个问题，特别是在我写第一个单元测试的时候。静态类型检查这些第三方代码似乎是不正确的，例如酶/React测试工具函数的返回值类型和测试框架的回调函数类型。
我只是认为第三方API就像(这个)太长了，而且很可能会被测试。
编辑:澄清了当我说类型检查时，我指的是像流一样的静态类型检查，而不是通过单元测试。
浏览 1提问于2017-05-11得票数 0
2回答
我试图为具有Link的组件编写单元测试用例。
所以，我的成分是，
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router-dom'
<div className="col-sm-4">
<Link to="create-job/new" style={{ textDecoration: 'none'}}><button type
浏览 0提问于2019-02-08得票数 2
回答已采纳
目前在routes单元测试中，我正在测试是否调用了适当的控制器和模板，比如seen 。另外，在某些情况下，我已经解析了对象。我可以像这样访问它们：
expect($route.routes['/someroute'].resolve.name_of_field).not.toBe(null);
我的问题是:我是否应该在路由单元测试中检查解析的对象，因为它们一方面是路由配置的一部分，但另一方面，我是否应该通过单元测试用于解析对象的服务来涵盖这一点？
浏览 0提问于2014-04-25得票数 0
1回答
我想为用react本机编写的应用程序创建自动测试。我只想测试逻辑(而不是UI)。
对于将在计算机上运行的单元测试甚至集成测试，Jest似乎是一个很好的解决方案。但是我想在一个真正的设备上测试这个应用程序。我有一个没有UI的组件，它可以做一些逻辑、与其他设备的无线通信等等。我需要测试这种通信，尤其是没有设备就无法完成的通信。
是否有任何框架或标准解决方案来做这样的事情？
浏览 4提问于2017-06-28得票数 2
回答已采纳
我正在使用redux应用程序在我的反应中尝试单元测试。因此，我需要测试连接的组件，不幸的是，我得到了这个错误：
无法读取未定义的属性“contextTypes”--我在单元测试中使用酶--这里是我的组件：
import React from 'react';
import TextFieldGroup from '../common/TextFieldGroup';
import validateInput from '../../server/validations/login';
import { co
浏览 5提问于2017-01-31得票数 5
回答已采纳
我在反应导航中使用标签导航器。当我更改选项卡时，我想要检测当前焦点选项卡。
任何帮助都将不胜感激！
我使用的是：-react原生: 0.57.4，react导航: 2.16.0
浏览 0提问于2018-11-22得票数 0
2回答
我有一个Mocha-chai测试一个Redux连接的反应组件。为了将Redux存储传递给测试组件，我在测试文件中创建了它，并将它作为支柱传递，但是测试抛出了以下错误：
不变违规:无法在“连接(项目)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地传递"store“作为"Connect(Project)”的支柱。
下面是一个测试：
import React from 'react';
import ReactDOM from 'react-dom';
import {
renderIntoDocument,
sc
浏览 0提问于2017-08-15得票数 5
1回答
我是新来的反应和玩笑，我现在不使用酶
我面临的错误是没有过载匹配此调用。“2中的重载1”(道具:XProperty\ Readonly )：BuildingUnit，给出了以下错误。类型'{}‘中缺少以下属性: ab，cd重载2的2，’(道具: XProperty，上下文:任何)：BuildingUnit'，给出了以下错误。类型“{}”缺少“Readonly”类型中的下列属性: ab，cd
类BuildingUnit:
type XProperty= { ab, cd};
type YProperty= {ef, gh};
class
浏览 13提问于2021-10-25得票数 0
我试图为使用的组件编写一个单元测试。
正在测试的组件模块的简化版本：
MyComponent.js
import React from 'react';
export default () => <h1>Tadaa!!!</h1>;
MySuspendedComponent.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';
export default () => (
<Su
浏览 0提问于2019-01-02得票数 0
回答已采纳
我对React Unit testing是个新手。我构建了一个呈现的React组件，它将column names和data作为道具。我已经用Jest编写了表元素的单元测试，它是PASSED。单元测试是
describe('Client Component Testing', () => {
let mountedClientComp;
const clientComp = () => {
if (!mountedClientComp) {
mountedClientComp = mount(
浏览 0提问于2018-10-08得票数 0
1回答
我有一个序列化Json对象的方法，如下所示：
public bool SerializeObject<T>(string fileName, IEnumerable<T> list)
{
try
{
var listContent = JsonConvert.SerializeObject(list, Formatting.Indented);
var relativeFileName = _httpContext.Server.MapPath(fileName);
浏览 0提问于2014-05-22得票数 1
回答已采纳
2回答
我有一个单元测试项目，它使用Ninject来模拟数据库存储库。我想使用这些相同的测试作为集成测试，并使用Ninject将我的实际数据库存储库绑定回它们各自的实现中，以便对应用程序在DB中进行测试/施加压力。
有没有办法在Visual Studio2012中做到这一点，或者除了MSTest之外，还有其他测试框架可以支持这种类型的配置吗？
我真的不愿意将这些单元测试重写/复制到集成测试项目中，但我怀疑我可以将这些文件作为链接复制进来，并将单个测试文件编译成两个项目(Unit和Integration)。
谢谢托德
浏览 2提问于2012-09-20得票数 0
1回答
如何使用酶测试嵌套的连通组件？
、、、、
我正在尝试测试嵌套的连接组件(Redux connected)：主组件有Container组件，由App中的store wrapper提供。
import React, { Component } from 'react';
import Main from './components/Main';
import './App.css';
import { Provider } from 'react-redux'
import createStore from './redux'
import applyConf
浏览 1提问于2018-05-03得票数 1
3回答
反应还原的集成测试-saga
、、、、
我有一个这样的项目结构：
app/
global/
styles/
components/
scenes/
Home/
actions.js
constants.js
index.jsx
reducer.js
sagas.js
styles.styl
index.spec.jsx
some-other-scene/
actions.js
constants.js
index.jsx
reducer.js
saga
浏览 1提问于2018-07-12得票数 7
回答已采纳
我在使用mocha，chai和enzyme进行以下单元测试时遇到了问题。我似乎无法理解如何对组件中的方法进行单元测试，以及如何对onClick方法调用这些方法进行单元测试。以下是我正在尝试进行单元测试的内容： <Link to="/create-new-template-results" onClick={this.checkLink}>
<Button
buttonname="Next_button"
variant="primary"
label="Save&
浏览 24提问于2019-02-12得票数 0
1回答
背景
我正在使用作为我的react应用程序。在内部，他们使用renderToStaticMarkup呈现组件，然后将其传递给Html组件，后者包括使用dangerouslySetInnerHTML的组件，如您所见的。
我正试图为我的AboutUs页面创建一个单元测试。但是，由于它是在html组件中呈现为字符串的，所以单元测试无法找到这个组件。
单元测试
/*REACT*/
var React = require('react');
import ReactDOM from 'react-dom/server';
var TestUtils = require(&
浏览 1提问于2016-01-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
