如何通过正确的道具进行酶单元测试？
酶（Enzyme）是一个用于React应用程序的JavaScript测试实用工具，它可以帮助开发者模拟用户交互、断言组件行为和输出，并提供了一套简洁的API来进行单元测试。
在进行酶单元测试时，可以通过以下步骤来确保正确的测试结果：
- 安装酶：首先，确保你的项目中已经安装了酶。可以使用npm或yarn进行安装：
- 安装酶：首先，确保你的项目中已经安装了酶。可以使用npm或yarn进行安装：
- 或
- 或
- 配置适配器：在测试文件的顶部，导入酶和适配器，并进行适配器的配置：
- 配置适配器：在测试文件的顶部，导入酶和适配器，并进行适配器的配置：
- 编写测试用例：根据你的需求编写测试用例。可以使用酶提供的API来模拟用户交互、断言组件行为和输出。以下是一个简单的示例：
- 编写测试用例：根据你的需求编写测试用例。可以使用酶提供的API来模拟用户交互、断言组件行为和输出。以下是一个简单的示例：
- 运行测试：使用测试运行器（如Jest）运行你的测试用例。在命令行中执行以下命令即可运行测试：
- 运行测试：使用测试运行器（如Jest）运行你的测试用例。在命令行中执行以下命令即可运行测试：
- 或
- 或
通过正确的道具进行酶单元测试可以帮助开发者验证组件的行为和输出是否符合预期，从而提高代码质量和可靠性。
酶的优势包括：
- 简洁的API：酶提供了一套简洁易用的API，使得编写和维护测试用例变得更加简单。
- 模拟用户交互：酶可以模拟用户在组件上的交互行为，如点击按钮、输入文本等，以验证组件的交互逻辑是否正确。
- 断言组件行为和输出：酶提供了一系列的断言方法，可以用于验证组件的行为和输出是否符合预期。
酶适用于以下场景：
- 单元测试：酶可以用于对React组件进行单元测试，验证其行为和输出是否符合预期。
- 组件测试：酶可以帮助开发者测试组件的交互逻辑和状态管理，以确保组件的正确性。
- 快速迭代开发：酶的简洁API和易用性使得开发者可以快速编写和运行测试用例，从而加快开发迭代的速度。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网平台（IoT Explorer）：https://cloud.tencent.com/product/explorer
- 移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
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
如果你正在对一个React组件进行单元测试，例如使用Mocha +酶，并且该组件的单元测试包括测试道具，那么可以说为该组件定义propTypes是不必要的吗？
浏览 0提问于2017-02-08得票数 0
3回答
如何在react路由器v4中对组件进行单元测试？我试图使用jest和酶通过重定向对一个简单的组件进行单元测试，但没有成功。
我的组件：
const AppContainer = ({ location }) =>
(isUserAuthenticated()
? <AppWithData />
: <Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>);
我尝试测
浏览 1提问于2017-06-01得票数 25
回答已采纳
当单元测试响应组件时，我通常根据支柱的存在或内容来检查子节点的存在。
对于酶，我在浅层包装器或挂载包装器上找到使用.find的元素，然后检查它的长度是否为1。
const wrapper = shallow(<MYReactComponent/>);
const innerNode = wrapper.find('some-css-selector');
expect(innerNode.length).to.equal(1);
有没有更好的检查方法
浏览 0提问于2016-04-22得票数 5
回答已采纳
我需要重构所有的酶单元测试，以反应本机测试库。
在酶中，为了获得子元素的道具，我可以使用一些东西，比如：
((rootElement.props() as Props).prop).toBe(value)。
函数的作用是:返回包装器当前节点的属性散列。注意:只能在单个节点的包装器上调用。
我如何在react本机测试库中做同样的事情？
我应该只把完整的路径传递给道具吗？如下所示：
expect(nextUpNoThanksButton[0].props.children.props.isSelected).toEqual(true);
或者有其他方法可以做到这一点？
浏览 9提问于2021-09-03得票数 0
我是单元测试的新手，我真的很感谢你的帮助。下面是组件 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
回答已采纳
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给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
1回答
我正在尝试测试是否向组件传递了正确的属性。在酶中，它很容易做到： const control = enzyme.mount(<Test />);
expect(control.find(<CompToTest />).props().MyProp).toEqual(expectedProp); 如何使用react-testing-library实现相同的结果？谢谢。
浏览 6提问于2019-05-07得票数 1
5回答
在单元测试中，我希望测试父组件是否成功地呈现其子组件。以下是代码：
describe('Parent Component', () => {
it('renders Child component', () => {
const wrapper = shallow(<Parent store={store} />);
expect(wrapper.find(Child).length).toEqual(1);
});
});
父级：
const Parent = observer(({ store }) =>
浏览 1提问于2018-06-21得票数 29
1回答
开始测试与酶和Jest反应的成分
、、、、
不幸的是，在我工作的地方，我们不对React组件进行单元测试。由于我对这个行业也相当陌生，所以我没有为软件编写单元测试的经验。这使我在尝试自己学习时陷入了一个奇怪的困境，因为我在网上看到的例子要么解释得很糟糕，要么就是不适合初学者。最近，我用酶和Jest检查了反应组分，并认为这种组合看起来很有前途。
，我这里的目标是：，我想找出正确的方法来测试从父组件到子组件，React道具是否一直工作正常。我使用Jest和酶法，所以解决方案应该使用这两个模块的最佳实践。
为了简单起见，我想围绕两个示例组件提出这个问题。与您在现实世界中从未见过的名称不同，让我们假设这些组件在串联使用时会在屏幕上生成一个用户列
浏览 3提问于2017-06-30得票数 4
回答已采纳
1回答
我正在使用酶来对react组件进行单元测试。我使用的酶的前一个版本允许我使用一个或多个节点访问子节点及其成员变量。现在，im使用的新版本的酶使我可以使用getElement函数访问子组件。而且getElement不允许我直接访问一个或多个节点(不受支持)。如何使用getElement设置子组件的成员变量？
浏览 5提问于2018-01-11得票数 0
我对前端开发非常陌生&我在使用Shallow进行酶单元测试时遇到了一些麻烦。基本上，我有像这样的东西
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const {
handleClick,
...other
} = this.props;
return (
浏览 14提问于2019-07-12得票数 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
我想要浅层测试我的组件，我知道浅层测试只测试一个级别的深度。我的问题是我会收到警告，因为我的组件需要mapStateToProps和mapDispatchToProps接收的道具。这让我想知道如何正确地将这个道具发送到我的浅层渲染组件，而不重复这些方法。我正在使用jest和酶。
浏览 1提问于2017-08-15得票数 0
1回答
我的父组件根据状态{ conditionMet : true }呈现一个<Child1 />组件。
如何编写一个测试来检查子组件本身的呈现，而不是组件内字符串的呈现？我想避免使用setTimeout()。
这是我如何构建测试的问题吗？或者，我是如何构建组件的？在Jest / Enzyme中是否存在一个已知的限制或bug，阻止检查子组件是否已呈现？
React: 16.6.3 Jest: 23.6.0酶: 3.7.0酶-接头-react-16
ParentComponent的Jest单元测试
describe('ParentComponent', () => {
浏览 0提问于2018-12-27得票数 0
1回答
假设有两个组件，一个是动作调度类，另一个是状态接收类。
Component1有一个方法分派一个动作来更改props1 redux状态，然后Component2从redux状态接收props1，将它传递给Component3。
Component1和Component2在SuperComponent下结合。
// Component1.js
class Component1 extends React.component {
method1 = () => {
this.props.action1({ props1: something });
}
render() {
浏览 0提问于2018-08-09得票数 1
回答已采纳
1回答
我正在尝试使用酶的mount()函数编写Jest测试，该函数确保在向React组件提供错误数据时抛出错误，但mount()只在第一次调用mount()时执行PropTypes验证。下面的测试套件使用了不正确的属性：
it('should throw a "Failed prop type" Error', () => {
expect(globalNavigation).toThrow("Failed prop type");
});
it('should throw a "Failed prop t
浏览 11提问于2017-08-22得票数 0
我正在试着测试一个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
回答已采纳
我最近开始编程了。我是一个团队的人，谁正在编程的反应，并使用酶，摩卡和柴单元测试。请参阅下面的包版本。
我的团队坚持每个组件的单元测试文件应该有以下测试：
beforeEach(() => {
component = mount(<MyComponent />)
})
it('renders with correct properties', () => {
component.setProps({
height: 100,
width: 500,
placeholder: 'Some value he
浏览 0提问于2019-07-16得票数 2
1回答
茉莉花中的Css样式单元测试
、、、、
如何用酶对节点的css进行单元测试
.toHaveStyle()不是为我工作的
还有其他酶匹配器来测试css吗？
不起作用
浏览 2提问于2018-04-30得票数 0
回答已采纳
我试图模拟一个keyDown事件，特别是Enter，keyCode: 13。我尝试过很多不同的方法，但是没有一种方法有效。我也在网上看过了，看起来这个特性要么是错误的，要么在当前版本的酶中不起作用。是否有人确切地知道此特性是否有效，如果是，那么模拟enter或其他类型的关键事件的正确语法是什么？谢谢!
这是我目前的情况，但不起作用：
const input = wrapper.find('input');
input.simulate('keyDown', {keyCode: 13});
我现在的酶版本是2.4.1
浏览 4提问于2016-08-15得票数 59
回答已采纳
1回答
我有一个测试用例，该测试用例失败并提供了错误：
Expected value to be (using ===):
true
Received:
false
我不明白为什么，组件具有带有true false的属性，并且结果dom应该是正确的。
是什么导致了这个问题？
怎样才能看出什么是玩笑和酶的比较？
import React from 'react'
import { shallow } from 'enzyme'
import Location from './Location'
des
浏览 5提问于2017-09-09得票数 1
回答已采纳
1回答
我最近继承了一个代码基，要求使用RTL (目前使用的是酶)。很多酶测试都很简单，没有任何问题：
const render = ({ firstName, surname } = {}) => {
const props = { firstName, surname };
return shallow(<MyComponent {...props} />);
};
test('renders firstName and surname', () => {
expect(
render({
firstName: 'M
浏览 3提问于2022-08-15得票数 2
当从useContext()钩子中使用mobx存储时，编写单元测试用例的最佳方法是什么？我们应该使用酶还是反应测试库？此处不使用Provider或@inject()
商店设计：
//StoreA
export class StoreA {
rootStore: RootStore;
constructor(rootStore: RootStore) {
this.rootStore = rootStore;
}
//StoreA implementations...
}
//StoreB
export class StoreB {
rootStore: Root
浏览 3提问于2020-09-06得票数 0
我有这个问题，特别是在我写第一个单元测试的时候。静态类型检查这些第三方代码似乎是不正确的，例如酶/React测试工具函数的返回值类型和测试框架的回调函数类型。
我只是认为第三方API就像(这个)太长了，而且很可能会被测试。
编辑:澄清了当我说类型检查时，我指的是像流一样的静态类型检查，而不是通过单元测试。
浏览 1提问于2017-05-11得票数 0
2回答
我试图针对作为组件支柱的元素进行断言。
例如：
function ComponentUnderTest() {
const foo = <span></span>
return <Bob something={foo} />
}
我试过这样做：
shallow(<ComponentUnderTest />)
.prop(‘something’)
.matchesElement(<span></span>)
但我得到了一个类似的错误：
(0，_enzyme.shallow)(...).prop(...).m
浏览 0提问于2017-06-21得票数 0
1回答
我有一个使用react-select的组件。我想测试传递给它的道具是否正确，以及这些道具是否正确显示。有没有办法强制菜单在酶/jest中打开？
浏览 21提问于2019-02-05得票数 2
回答已采纳
我正在用TypeScript构建一个。我在用Jest和酶做成分测试。我也在使用React导航
我很难写单元测试来点击我的按钮。
以下是组件的代码(只是呈现函数)：
render() {
const { navigation } = this.props;
return (
<View style={styles.container}>
<Button
raised
title={strings.painButtonTitle}
buttonStyle={styles.p
浏览 0提问于2018-10-07得票数 7
回答已采纳
1回答
我正在为我的reactjs创建一个单元测试--带有酶和chai的应用程序：
const wrapper = shallow(
<MyComp {...props}>
</MyComp>
);
expect(wrapper.debug()).to.contain("hello");
我如何断言“hello”这个词的确切出现量是1？
浏览 1提问于2017-05-26得票数 1
回答已采纳
1回答
假设我在react中实现了一个简单的pexeso游戏()。
现在重要的是，游戏由一个GameBoard组件组成，其中显示了大量的卡组件。
GameBoard组件有一个当前翻转卡片的数组- this.state.flipped_cards。
一旦一张卡片被点击，它就会调用一个内部函数(迫使卡片翻转)。在这个函数中，游戏板的handleCardFlip函数用于确定游戏状态。
从GameBoard返回的结果JSX如下所示：
<div>
<Card onClick={this.handleFlippedCard} name="MistyRose" />
浏览 3提问于2017-02-07得票数 3
回答已采纳
我将使用酶测试生命周期函数，包括componentWillReceiveProps。
在任何其他事情之前，我的组件应该包装为并与redux连接。否则，渲染功能会出现错误，因为我使用的是material组件，包括FlatButton。
const wrapper = mount(
<MuiThemeProvider muiTheme={muiTheme}>
<Provider store={store}>
<MemoryRouter>
<MyComponent />
浏览 4提问于2017-03-23得票数 7
回答已采纳
我的组件使用dangerouslySetInnerHTML属性呈现HTML。我需要在酶测试中访问这个呈现出来的HTML。我怎么能这么做？
我已经尝试过component.html()，但它返回类似于<button ...>[object Object]</button>的内容。
浏览 3提问于2018-01-16得票数 5
回答已采纳
我有一个非常简单的基于类的组件。如下所示：
class MyComponent extends React.Component {
onPressButton () {
console.warn('button pressed')
const { contextFunction } = this.context
contextFunction()
}
render () {
return (
<div>
My Compon
浏览 3提问于2021-06-21得票数 0
回答已采纳
我有一个<Parent/>组件，当我添加/删除/更改它的<Child/>组件时，我想使用酶来测试它的行为。例如，更改
<Parent>
<Child />
</Parent>
至
<Parent>
<Child />
<Child />
</Parent>
我正在使用一个操作DOM的第三方库，所以我需要跟踪孩子，以保持React和库的同步。
我多次尝试调用mount，尽管这两个mount调用创建了两个不同的实例。例如,
let constructorCalls = 0;
le
浏览 1提问于2017-04-18得票数 1
1回答
我正在用jest和酶对我的React应用程序进行单元测试，一切都很好，直到我碰巧测试了一个与Redux连接的类组件。我继续测试它，用a包装组件，然后浅层挂载它。但是，我无法模拟连接组件中定义的静态方法的返回值。
下面是我的示例代码：
const wrapper = shallow(
<Provider store={store}>
<TestComponent {...props} />
</Provider>
).dive();
现在，当我尝试模拟TestComponent中定义的静态方法的返回值时，它没有任何效果，它失败
浏览 8提问于2020-02-17得票数 0
4回答
我有一个反应应用程序，我想开始用酶编写单元测试。酶的讨论多达16种反应的版本。
在src/setupTests.js中，我现在有
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
但我的应用程序使用的是Reactive17.0.1版本。反应17的酶适配器是什么？
浏览 5提问于2020-11-03得票数 70
回答已采纳
1回答
在这种情况下，我需要对一个有状态组件进行单元测试，该组件也连接到redux存储，用于调度事件。我用的是Jest和酶。
我尝试了文档中提供的各种示例：
这些示例中没有一个涉及使用redux-connect的用例。
考虑伪代码中的下列react组件：
// ../MyComponent.js
import React, { Component } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux
浏览 0提问于2018-12-17得票数 0
1回答
我有一个LoginInfo组件，在这个组件下，我又调用了一个子组件。我正在尝试使用jest、酶和react测试工具为组件编写单元测试用例。我已经部分地编写了测试用例，但不确定如何为子组件(LoginInfoEdit)编写测试。这条线我不能讲。
import React from 'react';
import { LoginInfoEdit } from './LoginInfoEdit'
class LoginInfo extends React.Component {
constructor(props) {
super(props)
t
浏览 1提问于2017-04-21得票数 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
回答已采纳
到目前为止，在单元测试中，react路由器匹配参数被检索为组件的支持。因此，测试考虑特定匹配的组件(带有特定的url参数)是很容易的:当我们在测试中呈现组件时，我们只需根据需要精确地完成路由器匹配的支持(为此我使用了酶库)。
我真的很喜欢用新的钩子来检索路由信息，但是我没有找到关于如何在单元测试中模拟一个反应路由器匹配的例子，如何使用新的反应性路由器挂钩？
浏览 23提问于2019-09-26得票数 108
回答已采纳
我最近开始编程了。我是一个团队的人，谁正在编程的反应，并使用酶，摩卡和柴单元测试。请参阅下面的包版本。
在测试一个组件时，如果有几个用例需要不同的支持值，那么应该在每个测试中使用beforeEach()然后使用setProps()，还是应该在每个测试开始时执行一个显式挂载()(或浅层())？有关系吗？
例如，我可以在没有任何道具的情况下使用beforeEach()挂载，然后在每个测试中使用setProps()，如下面所示(使用伪代码)：
describe('MyComponent', () => {
beforeEach(... let component = m
浏览 0提问于2019-07-16得票数 2
使用反应与类型记录，玩笑和酶。试图统一一个功能组件，该组件有一个对象作为参数：
const JobListItem: React.FC<{ job: IJob }> = ({ job }) => {
在我的测试中--这是我尝试设置组件的方式：
const setup = (props={ }) => {
const wrapper = shallow(<JobListItem<{ job: IJob }> {...props} />)
return wrapper;
}
使用更简单的组件(这些组件没有IJob -仅仅是道具)，设置
浏览 2提问于2020-01-04得票数 1
回答已采纳
我使用jest和酶库来用创建- react app样板对进行反应测试。
随着套件和测试的运行，我陷入了上述错误。还没找到任何解决办法。如果有什么解决办法请告诉我。
TypeError: Cannot read property 'subroute' of undefined
浏览 2提问于2018-12-20得票数 0
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
尝试运行以下内容的单元测试:使用REACT JS - Jest和酶是代码的一部分：
componentDidMount () {
let requestSettings = this.props.getViewRequestSettings()
let linkerDefinition = requestSettings.catalog[0].resolvedtemplate[0]
if(linkerDefinition.includes('Universal')){
let functionName =
linkerDefinition.substr(0,li
浏览 3提问于2019-02-07得票数 9
回答已采纳
1回答
测试反应重定向
、、
我有一个react组件，它可以导致两个重定向中的一个被呈现，例如：
render () {
if(condition) {
return <Redirect to={'page1'} />
} else {
return <Redirect to={'page2'} />
}
}
在酶测试中，我发现了如何测试重定向正在呈现：
expect(page.find('Redirect').length).toEqual(1)
但是，我不知道如何配置测试，以便能够测试正在呈现的重定向。根据酶文档，不可能
浏览 2提问于2018-05-16得票数 3
回答已采纳
1回答
尝试使用酶浅对redux形式的FormSection组件进行单元测试，并得到以下错误
Error: FormSection must be inside a component decorated with reduxForm()
避免此错误的最佳选择是什么？
浏览 2提问于2017-09-23得票数 0
1回答
使用Jest和酶，我试图测试我的Logo组件是否收到了正确的属性(id、height、width、active、disableTransparency)。
我尝试创建一个实例(wrapper.instance())，但返回null。我也尝试过wrapper.getElement().props，这将返回呈现的组件的属性。
const Logo = ({id, height, width, active, disableTransparency}) => (
<Svg x='0px' y='0px' height={height} width=
浏览 42提问于2018-08-22得票数 0
1回答
我们可以模仿打印模式(媒体查询打印)进行单元测试吗？(Ract，酶，玩笑)我试着：
window.matchMedia('print')
但它不适用于我，风格媒体印刷不适用；
浏览 1提问于2017-11-10得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
