如何测试React元素是否包含酶中的文本？
要测试React元素是否包含酶中的文本，可以使用酶（Enzyme）提供的方法来实现。酶是一个用于React组件测试的JavaScript库，它提供了一组强大的工具和断言，可以方便地测试React组件的输出。
首先，需要安装酶库。可以使用npm或者yarn来安装：
npm install enzyme enzyme-adapter-react-16 --save-dev或者
yarn add enzyme enzyme-adapter-react-16 --dev接下来，需要在测试文件中导入所需的酶模块和适配器：
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';然后，需要配置酶适配器：
configure({ adapter: new Adapter() });现在，可以编写测试用例来检查React元素是否包含特定的文本。可以使用shallow方法来渲染React组件，并使用text方法获取渲染后的文本内容。然后，可以使用断言库（如Jest或Chai）来断言文本是否符合预期。
以下是一个示例测试用例：
import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
describe('MyComponent', () => {
it('should contain the text "Hello, World!"', () => {
const wrapper = shallow(<MyComponent />);
const text = wrapper.text();
expect(text).toContain('Hello, World!');
});
});在上面的示例中，MyComponent是待测试的React组件。首先，使用shallow方法将组件渲染为一个浅层次的渲染器。然后，使用text方法获取渲染后的文本内容，并使用断言来验证文本是否包含了预期的内容。
需要注意的是，这只是一个简单的示例，实际的测试用例可能涉及更复杂的组件结构和文本内容。根据具体情况，可以使用酶提供的其他方法来进行更详细的测试。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云酶（Enzyme）产品介绍：https://cloud.tencent.com/product/enzyme
请注意，以上答案仅供参考，具体的测试方法和推荐的产品可能会因实际情况而有所不同。
相关·内容
假设我有一个React元素： <p>
<span class="first-part">
foo
</span>
<span class="second-part">
bar
</span>
</p> 如何使用酶来测试元素是否包含特定的文本？
浏览 20提问于2020-09-17得票数 0
回答已采纳
1回答
开始测试与酶和Jest反应的成分
、、、、
不幸的是，在我工作的地方，我们不对React组件进行单元测试。由于我对这个行业也相当陌生，所以我没有为软件编写单元测试的经验。这使我在尝试自己学习时陷入了一个奇怪的困境，因为我在网上看到的例子要么解释得很糟糕，要么就是不适合初学者。最近，我用酶和Jest检查了反应组分，并认为这种组合看起来很有前途。
，我这里的目标是：，我想找出正确的方法来测试从父组件到子组件，React道具是否一直工作正常。我使用Jest和酶法，所以解决方案应该使用这两个模块的最佳实践。
为了简单起见，我想围绕两个示例组件提出这个问题。与您在现实世界中从未见过的名称不同，让我们假设这些组件在串联使用时会在屏幕上生成一个用户列
浏览 3提问于2017-06-30得票数 4
回答已采纳
4回答
在酶中，你可以像这样检查子组件的存在：
expect(wrapper.find(ChildComponent)).toHaveLength(1)
什么等同于react测试库中的这个测试？我找到的所有在线示例只涵盖了寻找dom元素的非常简单的测试-没有一个包含渲染子组件的示例。如何查找子组件？
浏览 19提问于2020-02-03得票数 29
检查React组件是否包含带有酶+ Jest的内容的模式似乎是这样的：
expect(shallow(<Field title="hello" />).contains(<p id="hello"></p>)).toBe(true);
对于这种代码，我面临的主要问题是，如果期望失败，我不知道问题是什么。因为它使用了"expect boolean to be boolean“模式，所以我得到的唯一错误是：
expect(received).toBe(expected) // Object.is equality
Exp
浏览 2提问于2018-09-25得票数 0
嗨，我试着用酶测试这个反应应用程序，但是它引发了一个错误TypeError:适配器不是构造函数，任何想法都可以。
这是我的测试文件
从‘./ ProductRow _row’导入反应；从‘React’导入反应；//从‘酶’导入{react}；从‘酶’导入*作为酶；从‘酶适配器-react 16’导入*作为适配器；从‘enzyme.configure({适配器:新适配器() })；测试(‘TodoComponent呈现其内的文本’，() => { const包装= enzyme.mount( <ProductRow item={}{} quickView={[]} productP
浏览 1提问于2018-04-13得票数 18
回答已采纳
我正在试着测试一个Menu是否呈现为MenuItems
import React from "react";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { mount } from "enzyme";
configure({ adapter: new Adapter() });
const MenuItem = ({ children }) => <li>{children
浏览 0提问于2018-10-05得票数 1
回答已采纳
2回答
我设计了一个react组件，它包含一个只能被设置的输入字段，因此必须是readOnly，但是无法确定如何测试这个输入在酶中是否是readOnly。
我找不到关于readOnly属性的任何信息，但是有人提出了类似于的问题。从这一点看，我似乎需要使用类似下面的代码。
test('select button select input must be read only', () => {
expect(select.find('div').find('div').find('input').hasAttribute(
浏览 1提问于2018-09-13得票数 3
回答已采纳
1回答
我对React测试和Jest和酶都是新手。我正在尝试首先学习如何使用TDD方法，因此，我正在开始编码之前构建我的测试。我所做的是在React中创建了一个示例应用程序，并安装了酶依赖性，然后我编写了测试：
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLa
浏览 2提问于2020-04-24得票数 1
2回答
我正在为我的React组件使用隔离样式。如下所示：
import React from 'react';
import { observer } from 'mobx-react';
import style from './book.css';
const Book = ({ name }) => {
return (
<div className={style.book_container}>
<div className={style.book}>{name}&
浏览 1提问于2018-06-22得票数 0
2回答
我从myDomNode.html();得到这个html
<div aria-expanded="true"> {{someChildren}} </div>
在我的测试中，我想检查aria-expanded是否设置为true。
对于酶2.x和react 15.x，这是有效的：expect(myDomNode.attr('aria-expanded')).toBeTruthy();，但是在将react更新为16.x和3.x之后，我在更新后得到了一个错误，即值是未定义的。我在文档中找不到任何有用的提示。
我得到了这样的myDomNode：
c
浏览 3提问于2017-10-02得票数 2
回答已采纳
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给Popover的页脚属性的Button触发单击
const React, {Component} from 'react';
const {Popover, Button} from 'slds'; // Any UI library
class My Component extends Component {
render() {
return(
<Popover
footer={
浏览 0提问于2019-08-27得票数 1
我有一个使用useState钩子的功能组件，如下所示： import React,{useState} from 'react';
export const PList = (props) =>{
const [obj, setObj]= useState({
value: null,
open: null
});
let onDeleteList = (data) =>{
setObj({....});
};
return(
<
浏览 19提问于2021-01-08得票数 0
1回答
我刚开始使用React-Jest-Enzyme，进行测试，但从我收集到的所有信息来看，在我看来，大多数测试实际上都是测试React库是否坏了，而不是我的实际业务逻辑。
我给你举几个例子，如果我错了，请纠正我：
快照测试：
这个策略是怎么回事？
据我所见，它的主要目的是捕捉代码中任何不必要的更改。它“调整”了我的组件树，只注意到是否添加了新的换行符/字符，对吗？
所以它主要用于那些我可以不小心按下键盘的箱子？或者是别人不小心弄乱了我的代码？
酶的坐骑/浅和Jest‘s
我看到的解释您使用方式的大多数示例如下所示：
const wrapper = mount(<MyComponeny /&g
浏览 1提问于2018-02-21得票数 11
1回答
我正在尝试测试是否向组件传递了正确的属性。在酶中，它很容易做到： const control = enzyme.mount(<Test />);
expect(control.find(<CompToTest />).props().MyProp).toEqual(expectedProp); 如何使用react-testing-library实现相同的结果？谢谢。
浏览 6提问于2019-05-07得票数 1
2回答
我正在建立一个应用程序与反应。我隐藏一个文件输入元素(<input type="file"/>)“后面”一个反应引导Button，以便能够控制样式。因此，当单击按钮时，我转过身，在文本输入元素上触发一个合成单击事件，如下所示。
class OpenFileButton extends React.Component {
...
clickHandler() {
this.refs['input'].click();
}
render() {
return (
<ButtonGroup>
浏览 7提问于2017-03-04得票数 2
回答已采纳
我正在尝试使用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
回答已采纳
2回答
我不能得到答案，为什么不能使用jest和react-testing-library在react中访问函数组件中的方法。 我试过用酶，但我发现一切都变成了RTL。 import React from "react";
const simpleComponents = (props) => {
const simpleMethod = () =>{
// method logic
};
return <h1>test</h1>;
};
}
export default simpleCom
浏览 19提问于2020-04-19得票数 1
1回答
我试图用浅渲染器用酶测试HoC，但我一直收到以下警告：Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
这里有一个简单的例子来重现警告：
import React from 'react';
import { shallow } from 'enzyme';
const testHoc = Wrapp
浏览 0提问于2018-07-30得票数 0
回答已采纳
2回答
我有一个容器
import React from "react";
class App extends React.Component {
render() {
return (
<div className="App">
<input type="text" onChange={this.changeInput} />
<button onClick={this.addItem}>Add</button>
</div>
浏览 0提问于2018-12-11得票数 0
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
我是单元测试的新手，我真的很感谢你的帮助。下面是组件 import React from 'react';
import PropTypes from "prop-types";
import {Textfit} from 'react-textfit'; //This will fit the text how big or small it is.
class DisplayPanel extends React.Component {
render() {
return (
<Te
浏览 9提问于2019-03-18得票数 1
回答已采纳
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
1回答
我想知道反应片段是否与酶的快照兼容。现在看来，来自React 16+的片段在酶的shallow()方法中被呈现为符号，这会导致转换错误："TypeError: Cannot convert a Symbol value to a string"。
这是我的测试：
it('should render successfully', () => {
const wrapper = shallow(
<Sections
data={mappedMockData}
sections={mappedMockData.secti
浏览 2提问于2017-12-15得票数 5
回答已采纳
1回答
如何在酶反应测试中获取HTML元素？我能找到包装纸。但是我想要HTML元素。因为我需要覆盖的代码块对未覆盖的HTML元素进行了offsetParent检查。下面是示例。 it('add class test', async () => {
const wrapper = mount((
<div class='ag-cell'>
<div class='ag-react-conatiner'></div>
<span an
浏览 25提问于2019-12-06得票数 0
1回答
我正在编写一个简单的测试反应组分使用酶来创建一个浅表克隆，这是失败的时候，它不应该是。我想要看的两件事，是它是否正常，以及它是否得到了一个道具。这两种方法都失败了。这里，我正在测试的组件和我的规范：
我的组成部分：
import * as React from 'react';
export default class PortfolioItem extends React.Component<any, any> {
render() {
// Deconstructing the items obj into these consts
con
浏览 3提问于2017-08-04得票数 0
回答已采纳
在CSS中考虑，
.content
{
width:500px;
box-sizing: border-box;
}
我在react组件中添加了这个css类，如下所示
const Banner = () => {
return (<div className="content">This is message content</div>);
}
如何编写jest和酶测试用例，以确保‘盒大小’与‘边框’的正确应用？
注意:我可以编写测试用例以确保添加到这个元素中的".content“类。但确切地说，我需要编写测试用例，
浏览 4提问于2019-12-26得票数 0
1回答
是否有一种方法可以通过浅层安装来测试使用React构建的功能组件。我遇到了酶不支持useEffect ()和其他钩子与浅层渲染一个组件，我不想进入装入。
同时也发现react-testing-library是一种新的流行的替代品。比酶更好的选择吗？我已经将Enzyme用于测试基于类的组件。因此，在重写这些内容时有一种痛苦。
浏览 2提问于2020-01-30得票数 1
回答已采纳
是否有一种方法可以使用酶浅层方法和样式组件的ThemeProvider包装来测试样式组件的文本内容？
class MyComponent extends React.component {
...
render(){
return (
<StyledComponent_A>
<StyledComponent_B>
some text
</StyledComponent_B>
<
浏览 4提问于2017-10-20得票数 4
1回答
在测试React components时，有一个常见的问题，该组件连接到酶中的Redux。您可能遇到了以下错误：
Invariant Violation: Could not find "store" in either the context or props of "Connect(YourComponent)
通过两次导出测试中的组件，解析了：
export class YourComponent extends Component {}
export default connect(mapStateToProps, mapDispatchToProps)(You
浏览 1提问于2018-10-04得票数 3
我正在制作一个javascript单元测试套件，用于一个带有jest &酶法的react redux组件；所讨论的组件是一个文件上传表单，其中包含一些基于用户输入和/或服务器响应的基本样式更改。玩笑和酶都是建立和工作的，我能够成功地编写基本的测试，好的。
我想用jest &酶法模拟用户与这些UI元素(文件输入和文本字段)的交互，但我在这样做时遇到了困难；我对使用这些测试框架相当陌生，对react redux有了基本的理解，我有点不知所措，为了编写有意义的单元测试，我需要确保适当的部分已经就位。
顺便提一下:这个单元测试是在事实发生后进行的，几个月前，我加入了这个项目，使用测试驱
浏览 3提问于2019-04-11得票数 0
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
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
5回答
用反应和酶测试设置文本值
、、、
如何设置文本输入的文本，然后使用React /酶法测试它的值？
const input = wrapper.find('#my-input');
input.simulate('change',
{ target: { value: 'abc' } }
);
const val = input.node.value;
//val is ''
所有的似乎都不起作用。
浏览 14提问于2017-01-19得票数 28
回答已采纳
3回答
我写了一个有趣的酶测试如下：
import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {
it('snapshot test', () => {
const setRouteLeaveHook =
浏览 1提问于2017-05-17得票数 6
回答已采纳
我构建React应用程序已经有一段时间了，所以我想做一个React组件库。我一直在阅读有关方法的文章，并采用了一种方法，在这种方法中，您可以使用Webpack和Babel来绑定而不使用React，因为如果您不这样做，将会出现错误，因为将导入两个版本的React (一个在组件库中，一个在应用程序中)。无论如何，我有一个Jest安装文件，其中包含以下内容： import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: ne
浏览 54提问于2019-10-09得票数 0
回答已采纳
反应用16.3.1，jest 16.3.1，酶3.3.0。
在React组件中，我创建了一个react，用于确保在挂载组件时浏览器位于页面顶部。
class PageView extends React.Component {
constructor(props) {
super(props);
this.topOfPageRef = React.createRef();
}
componentDidMount() {
ReactDOM.findDOMNode(this.topOfPageRef.current).scrollIntoView();
浏览 4提问于2018-09-14得票数 3
回答已采纳
现在测试React Native组件的首选方法似乎是使用mocha、react-native-mock和酶的组合来浅层呈现组件。
问题是，浅层渲染只深入一层，有时组件的嵌套视图需要您测试额外的一层或两层。
理论上，酶支持mount()来完全呈现组件，但实际上这是失败的，因为。
考虑到这些限制，人们如何测试超过一个呈现级别的组件？
浏览 14提问于2016-08-03得票数 10
回答已采纳
2回答
我已经编写了一个简单的React组件来呈现<iframe>
export class Iframe extends React.component {
render() {
return <iframe src={ this.props.src } />;
}
}
我尝试通过检查<iframe>中是否正确填充了用src加载的内容来对其进行测试。为了做到这一点，我尝试访问frame.contentWindow，但是在用酶挂载它之后，它总是返回undefined。
我试着用Sinon 模拟<iframe>内容
serve
浏览 0提问于2017-01-04得票数 14
我正在使用mocha，酶创建react组件的单元测试。下面是一个示例组件。
Foo.js
class Foo extends React.Component {
customFunction=() => {
}
render() {
return (<div className={this.props.name}/>);
}
}
这是测试文件。
Foo-Test.js
import React from 'react';
import { expect } from 'chai';
import
浏览 5提问于2016-03-01得票数 17
1回答
我开始学习用酶/Jest进行反应测试。我想要使用的一些测试是查看数据库中是否插入/更新了某些内容。我想知道如何用axios进行测试。我听说过axios-mock-adapter，可能会使用它。是否有一种方法可以模拟数据库插入/更新调用，而无需实际在实际数据库中插入/更新条目？
例如:我有一个向api端点发出post请求的方法，该端点将新条目插入到我的db中的表中。有没有办法用Jest/酶来测试这个
数据库不会被修改。
我可以得到一个响应，它告诉我如果要在实际的数据库中执行api调用是成功的。
我不确定这是否应该在react上进行测试，或者是否最好在后端使用数据库进行测试。
我对
浏览 2提问于2018-10-12得票数 1
1回答
我正在尝试学习酶+ Jest反应组分的测试，我在酶中使用.find方法时出错了。
误差
Method “simulate” is meant to be run on 1 node. 0 found instead.
19 | onAddNew={onAddNew} />);
20 |
> 21 | component.find('button.btn-primary').simulate('click');
|
浏览 0提问于2019-02-03得票数 1
回答已采纳
2回答
我已经创建了一个函数，我想为该函数编写一个测试用例。我在该函数中返回HTML内容。
我的函数代码是-
export function executeScenario(handleExecuteScenarioClick: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined, classes: any , buttonTitle:string) {
return <Button id="executescenario" variant="c
浏览 0提问于2020-06-12得票数 2
1回答
我有一个使用react-select的组件。我想测试传递给它的道具是否正确，以及这些道具是否正确显示。有没有办法强制菜单在酶/jest中打开？
浏览 21提问于2019-02-05得票数 2
回答已采纳
概述：
在使用酶测试之前，我重构了脚本测试，但现在，我想使用@ test -library/react。
问题：
我在@react library/react中找不到setState的解决方案
浏览 0提问于2019-07-06得票数 16
回答已采纳
4回答
我正在尝试使用酶来测试组件的方法。我知道最典型的方法是使用酶的instance()方法。
问题是，这只适用于root组件，我的组件需要在两个上下文提供程序(即react-router和apollo客户端)中进行包装才能呈现。
const wrapper = mount(
<ApolloProvider client={client}>
<MemoryRouter initialEntries={["/login"]}>
<AuthFormContainer />
</MemoryRou
浏览 0提问于2018-06-09得票数 7
2回答
我正在测试一个有条件地呈现包装组件的组件。我使用的是酶和jest，根组件是通过浅层()方法呈现的。问题是测试根组件是否包含已包装的组件。
如何测试包装的组件是否存在，而不使用挂载()呈现方法？
hoc.component.jsx
export function HOC(Component) {
render() {
return <Component />
}
}
wrapped.component.jsx
class WrappedComponent extends React.Component {
...
}
export default HOC
浏览 0提问于2018-12-14得票数 8
回答已采纳
我对反应测试库是完全陌生的。我刚刚开始阅读所有的各种“入门”文档和博客文章，我可以找到后，我没有成功测试一个组成部分的酶。我能找到的大多数例子都很简单，就像中的例子一样。我希望看到如何测试本身由其他组件组成的组件的示例，因为组件组合是有关React的最重要的事情之一(在这篇文章中，由于缺少更好的名称，我将调用此类ComposedComponent的示例)。
当我用酶编写ComposedComponented测试时，我可以断言正确的道具被传递给了某些ChildComponent，并且相信ChildComponent有自己的测试，而且我不需要关心ChildComponent在对ComposedCo
浏览 3提问于2019-12-31得票数 19
回答已采纳
我使用的酶与反应16通过卡玛，茉莉花和webpack。在配置beforeEach函数中的酶适配器时，我进行了测试：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import App from 'app';
describe('App', () => {
let wrapper;
beforeEach(() =&
浏览 2提问于2017-11-02得票数 4
回答已采纳
1回答
我是新的反应酶测试。我想要检查类名后单击按钮，我得到空类酶浅包装。
Button.tsx
import React from 'react';
import style from './styles.module.scss';
export interface ButtonPropTypes {
title?: string;
}
const Button = ({ title }: ButtonPropTypes) => {
const [active, setActive] = useState(false);
return (
浏览 5提问于2021-01-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
