同时使用酶和反应测试库
是指在软件开发过程中，使用酶（Enzyme）和反应测试库（React Testing Library）来进行前端组件的单元测试和集成测试。
酶（Enzyme）是一个React应用程序的JavaScript测试工具，它提供了一组用于测试React组件的实用函数。酶可以模拟用户与React组件的交互，并断言组件的渲染结果和行为是否符合预期。酶支持多种测试方式，包括浅渲染、完全渲染和静态渲染等，可以在测试中访问组件的状态、属性和子组件，以及模拟用户事件和异步操作。
反应测试库（React Testing Library）是一个简单和直观的测试工具，它专注于测试React组件的用户行为和交互。反应测试库鼓励开发人员编写更接近用户实际使用场景的测试用例，而不是关注组件的内部实现细节。它提供了一组API，用于查找组件元素、模拟用户事件、断言组件状态和断言DOM元素的出现与消失等。
使用酶和反应测试库可以有效地测试前端组件的正确性和可靠性，保证组件在不同场景下的表现符合预期。这样的测试方式可以降低代码修改和重构的风险，提高开发效率和代码质量。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（Serverless）：腾讯云函数是一种无需管理服务器即可运行代码的计算服务。它可以快速构建和部署云原生应用程序，具有高度可扩展性和灵活性。详情请参考：https://cloud.tencent.com/product/scf
- 腾讯云容器服务（TKE）：腾讯云容器服务是一种高度可扩展的容器部署和管理服务，支持使用Docker容器部署应用程序。它提供了快速部署、弹性伸缩、自动化管理等功能，简化了容器化应用程序的开发和运维。详情请参考：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：腾讯云数据库是一种高性能、可扩展的云数据库服务，提供了多种数据库引擎（如MySQL、Redis等）和存储类型，适用于各种应用场景。它具有高可用性、数据安全性、备份和恢复等功能。详情请参考：https://cloud.tencent.com/product/cdb
相关·内容
用于反应测试的酶、ReactTestUtils和反应测试库有什么区别？
ReactTestUtils文档说：
ReactTestUtils使在您选择的测试框架中测试反应组件变得容易。
酶的文件只是说：
酶是一种用于React的JavaScript测试工具，它使断言、操作和遍历反应组件的输出变得更容易。
反应-测试-库文件：
反应测试库是一个非常轻的解决方案，用于测试反应元件.它提供了轻的实用功能之上的反应-多玛。
为什么每一种解决方案实际上都比较容易，而另一种解决方案却无法实现？
浏览 6提问于2019-01-11得票数 88
回答已采纳
长期以来，我们一直使用酶来测试我们的反应组分，但我们已经开始逐步迁移到反应测试库中。
当尝试在RTL测试中使用toHaveValue匹配器时，它会失败，因为同名的酶匹配器将被调用。有没有一种方法，我可以“告诉”一个特定的测试文件使用匹配从玩笑？
根据安装文档，我已经将酶和jest匹配器添加到我的存储库中。
浏览 4提问于2021-12-17得票数 0
1回答
因此，我们开始在我们的应用程序中实现测试，我使用了酶，我的同事使用了反应测试库。当然，setupTests.js文件是不同的，所以要么他们的测试失败了，要么我的测试失败了。有没有办法同时使用这两个库，或者我应该迁移测试并只使用一个库？
浏览 15提问于2021-11-17得票数 0
当从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
我有一个使用酶的简单应用程序，我只想呈现html节点，而不是组件：
const container = mount(<Hello />);
expect(toJson(container)).toMatchSnapshot();
当前结果：
// Jest Snapshot v1
exports[`Hello should render 1`] = `
<Hello>
<a />
</Hello>
`
预期结果：
// Jest Snapshot v1
exports[`Hello should render 1`] = `
&
浏览 1提问于2019-07-26得票数 0
2回答
令我惊讶的是，许多博客都在编写单元测试，以便同时使用Jest和酵素进行反应应用程序。不能，我们用唯一的玩笑或唯一的酶来编写反应应用程序的单元测试？
如果是的话，为了得到一个成分，我们在酶中使用浅层()，而在Jest中使用什么？
浏览 5提问于2020-05-12得票数 0
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
我想测试我的道具是否通过了，但不使用酶，
我试着在网上找到文档，但是所有的教程都是用酶做的。
describe('App Component', () => {
it('renders the Counter wrapper', () => {
const wrapper = shallow(<App />);
expect(wrapper.find(Counter)).to.have.length(1);
});
it('passes all props to Counter wrapper'
浏览 2提问于2019-01-28得票数 0
回答已采纳
我需要重构所有的酶单元测试，以反应本机测试库。
在酶中，为了获得子元素的道具，我可以使用一些东西，比如：
((rootElement.props() as Props).prop).toBe(value)。
函数的作用是:返回包装器当前节点的属性散列。注意:只能在单个节点的包装器上调用。
我如何在react本机测试库中做同样的事情？
我应该只把完整的路径传递给道具吗？如下所示：
expect(nextUpNoThanksButton[0].props.children.props.isSelected).toEqual(true);
或者有其他方法可以做到这一点？
浏览 9提问于2021-09-03得票数 0
嗨，我试着用酶测试这个反应应用程序，但是它引发了一个错误TypeError:适配器不是构造函数，任何想法都可以。
这是我的测试文件
从‘./ ProductRow _row’导入反应；从‘React’导入反应；//从‘酶’导入{react}；从‘酶’导入*作为酶；从‘酶适配器-react 16’导入*作为适配器；从‘enzyme.configure({适配器:新适配器() })；测试(‘TodoComponent呈现其内的文本’，() => { const包装= enzyme.mount( <ProductRow item={}{} quickView={[]} productP
浏览 1提问于2018-04-13得票数 18
回答已采纳
在ReactJS中测试非反应组件的好方法是什么。我们目前使用的酶，但这是有限的反应成分。什么将是一个好的方式单元测试，无反应组件。
浏览 1提问于2016-09-07得票数 1
回答已采纳
我想做一些基本的单元测试，我的应用程序，我创建了“创建-反应-应用”包。我相信它已经安装了Jest。
我的应用程序中有一些基本的redux代码。
我想测试：
它呈现主组件(App.js)而不崩溃。
单击以显示下一项功能
我已经安装了酶使用"npm安装--节省-开发酶“和”酶-适配器-反应-15“。
这是我的代码：
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import { shallow,
浏览 0提问于2018-05-09得票数 0
3回答
我正在使用酶(airbnb)库来查找wrapper.my html是这样的
<div>
<div></div>
<div></div>
<div></div>
</div>
我必须选择嵌套的三个div使用酶文库使用find function.Is它可能使用酶查找方法?？
浏览 9提问于2017-07-09得票数 0
我试着用Jest +酶测试useState和useEffect的反应钩子，但是我找不到方法，有人能帮忙吗？
const [sPlaceholder, setSPlaceholder] = useState('');
useEffect(() => {
setSPlaceholder('abcd');
if (s === '') {
dispatchUpdateSPlaceholder(searchPlaceholder);
}
}, [sPlaceholder]);
浏览 1提问于2019-05-09得票数 4
回答已采纳
1回答
因此，我开始从单元测试反应组件组成材料-UI组件使用Jest和酶设置。到目前为止，每个事件模拟都很正常，直到我遇到了物料UI中的Select。(下面有更多信息)
项目被引导使用创建-反应-应用程序和使用材料-ui-下一步。
依赖关系版本
反应: 16.2.0
React Dom: 16.2.0
反应-说明: 1.1.1
材料用户界面: 1.0.0-beta.35
Jest:一个装有安装程序的(22.4.3)
酶: 3.3.0
酶适配器反应16: 1.1.1
问题
我有一个名为FiltersDesktop的纯功能组件，它由Material表单字段组成。其中三个
浏览 1提问于2018-04-01得票数 8
回答已采纳
我们目前正在用酶的浅渲染功能测试我们的反应应用程序。每个组件都是隔离测试的，所以我理解为什么这被称为“单元测试”。
我们正在向渲染组件的方向发展，它是子组件。您可以使用酶的挂载功能或React测试库来实现这一点，因为它从不浅显。这也意味着如果Redux是一个连接的组件，我们必须模拟它。
这种测试的名称是什么？我听说过它叫做“集成测试”，但是当我在工作中这么说的时候，人们认为我的意思是其他的东西。它是否仍然是一种“单元测试”，尽管多个组件是一起测试的？
浏览 0提问于2019-07-18得票数 2
回答已采纳
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
回答已采纳
我最近开始编程了。我是一个团队的人，谁正在编程的反应，并使用酶，摩卡和柴单元测试。请参阅下面的包版本。
我的团队坚持每个组件的单元测试文件应该有以下测试：
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回答
我开始学习用酶/Jest进行反应测试。我想要使用的一些测试是查看数据库中是否插入/更新了某些内容。我想知道如何用axios进行测试。我听说过axios-mock-adapter，可能会使用它。是否有一种方法可以模拟数据库插入/更新调用，而无需实际在实际数据库中插入/更新条目？
例如:我有一个向api端点发出post请求的方法，该端点将新条目插入到我的db中的表中。有没有办法用Jest/酶来测试这个
数据库不会被修改。
我可以得到一个响应，它告诉我如果要在实际的数据库中执行api调用是成功的。
我不确定这是否应该在react上进行测试，或者是否最好在后端使用数据库进行测试。
我对
浏览 2提问于2018-10-12得票数 1
我有一个函数组件，它有一个handleKeyDown函数： const handleKeyDown = () => {
if (e.key === 'Backspace') {
e.nativeEvent.stopImmediatePropagation()
}
}
return (
<input onKeyDown={handleKeyDown} //etc />
) 如何测试e.nativeEvent.stopImmediatePropagation被调用时的退格键？ 我使用的是酶/反应测试库和jest。 任何指导都将不胜
浏览 53提问于2021-07-29得票数 0
回答已采纳
1回答
我是新的反应和尝试测试我的代码使用玩笑&测试-库/反应。
我做了一个简单的选择框，并在该框上触发了更改事件。我只想得到这个州，但我还是不知道怎么得到它。
这是我的组成部分：
import React from "react";
import ReactDOM, { render } from "react-dom";
import NativeSelect from "@material-ui/core/NativeSelect";
const MyTest = () => {
const [option, setOption
浏览 0提问于2019-09-06得票数 1
回答已采纳
1回答
我正在尝试将一个测试从酶迁移到反应测试库
酶的目的是“如果孩子不受影响，不应该强迫孩子重新渲染”。
const wasRendered = jest.fn();
const Component = (props) => (
<div {...props} />
);
const ChildComponent = () => {
wasRendered();
return <div>Hello</div>;
};
const SkinnablePa
浏览 3提问于2022-02-02得票数 0
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回答
带反应弹簧/反应运动的快照测试
、、、、
我试图用Jest和酶来测试我的反应成分。有些组件中有动画组件(从react-spring/react-motion导入)，它将函数呈现为其子函数。这使得测试变得非常困难。我做了很多研究，想出了三个想法：
使用酶的mount渲染一切，并对其进行快照测试。我发现昂贵的组件是不可能的/无效的，生成的快照通常很重(1MB - 2MB)。
用酶的shallow和快照测试组分。然后找到动画组件，使用酶的renderProp()渲染里面的子组件，并对它们进行快照测试。在我发现renderProp()与<StaggeredMotion />的react-motion和react-sprin
浏览 0提问于2018-12-28得票数 2
回答已采纳
1回答
我有一个名为AddEditVehicle的组件，它在路由为/vehicle/:vehicleId/edit时呈现。
我需要测试这个组件的反应生命周期。因此，我使用酶mount在单元测试中以下列方式呈现我的组件。
beforeEach(async () => {
wrapper = await mount(
<BrowserRouter>
<Provider store={store}>
<AddEditVehicle match={{ params: { vehicleId } }} />
&l
浏览 0提问于2019-01-31得票数 0
我有以下内容：
export const DeviceModule = (props: Props) => {
const [isTooltipVisible, changeTooltipVisibility] = useState(false)
const deviceRef = useRef(null)
useEffect(() => {
if (deviceRef && deviceRef.current) {
deviceRef.current.addEventListener(EVENT_TYPE.MOUSEOVER, ()
浏览 0提问于2021-03-10得票数 1
回答已采纳
我最近开始编程了。我是一个团队的人，谁正在编程的反应，并使用酶，摩卡和柴单元测试。请参阅下面的包版本。
在测试一个组件时，如果有几个用例需要不同的支持值，那么应该在每个测试中使用beforeEach()然后使用setProps()，还是应该在每个测试开始时执行一个显式挂载()(或浅层())？有关系吗？
例如，我可以在没有任何道具的情况下使用beforeEach()挂载，然后在每个测试中使用setProps()，如下面所示(使用伪代码)：
describe('MyComponent', () => {
beforeEach(... let component = m
浏览 0提问于2019-07-16得票数 2
我是新手反应，我需要一个帮助为Redux表单组件"onSubmitSuccess“编写测试用例，以下是代码 reduxForm({ form: "AddTagForm",
enableReinitialize: true,
onSubmitSuccess: afterSubmit })
callback function,
export const afterSubmit = (dispatch) => dispatch(reset("AddTagForm")); 我需要一个帮助来编写afterSubmit方法的测试用例。请帮帮忙
浏览 26提问于2019-10-16得票数 0
我正在尝试测试componentWillMount中的一个函数。
组件
componentWillMount = () => {
const {
agents,
match
} = this.props;
this.edit = false;
this.agent = {};
if (match.params.id) {
this.edit = true;
this.agent = getAgent(agents, match.params.id);
if ("undefined" === typeof this.agent) {
push(&
浏览 3提问于2017-09-20得票数 0
我对反应测试库是完全陌生的。我刚刚开始阅读所有的各种“入门”文档和博客文章，我可以找到后，我没有成功测试一个组成部分的酶。我能找到的大多数例子都很简单，就像中的例子一样。我希望看到如何测试本身由其他组件组成的组件的示例，因为组件组合是有关React的最重要的事情之一(在这篇文章中，由于缺少更好的名称，我将调用此类ComposedComponent的示例)。
当我用酶编写ComposedComponented测试时，我可以断言正确的道具被传递给了某些ChildComponent，并且相信ChildComponent有自己的测试，而且我不需要关心ChildComponent在对ComposedCo
浏览 3提问于2019-12-31得票数 19
回答已采纳
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
我想模拟我的TodoForm组件的TodoForm事件。
TodoForm.jsx
import React, { Component } from "react";
export class TodoForm extends Component {
handleClick = () => {
console.log("handle click is called");
}
render() {
return (
&
浏览 0提问于2018-12-12得票数 0
回答已采纳
2回答
我是新的反应测试库，我热衷于使用酶。当我浏览文档时，我发现允许直接包含第三方测试库。我试着用下面的方法来加入酶，但没有结果。这是我尝试过的，但它在我的app.test.js中行不通。
import React from 'react';
import {configure, shallow} from 'enzyme'
import AboutPage from './AboutPage';
describe('About us',() =>{
it('About us content valid
浏览 0提问于2018-09-17得票数 2
回答已采纳
2回答
问题
我刚开始做酶和反应测试。我试图让酶与业力和webpack一起工作在一个琐碎的反应部件上。我的问题是包装器上的prop()返回null，我不知道为什么。
Greeter.js
import React from 'react';
/*
* A trivial component we added while trying to get the react testing working
* */
export default class Greeter extends React.Component {
constructor(props) {
super
浏览 0提问于2016-05-05得票数 8
回答已采纳
当我挂载一个组件时，我得到了什么(浅层我没有得到这个错误)，我得到了下面的错误。
TypeError:无法读取未定义的属性“创建”
在(node_modules/@material-ui/core/CircularProgress/CircularProgress.js stylesOrCreator
。
。
。
还请将此错误放在顶部：
node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js Uncaught :无法读取未定义的属性“body2”
来自package.json的版本：
浏览 0提问于2020-07-27得票数 3
回答已采纳
我正在为一个简单的反应应用程序编写一些玩笑酶测试，使用类型记录和新的反应钩子。
但是，我似乎无法正确地模拟在useEffect钩子中进行的api调用。
useEffect调用api并用"setData“更新useState状态”数据“。
然后将对象“数据”映射到表中对应的表单元格中。
这看起来应该很容易用模拟的api响应和酶装载来解决，但是我总是收到错误，告诉我使用act()进行组件更新。
我尝试过多种使用act()的方法，但都没有效果。我已经尝试用axios替换为提取和使用酶浅和反应测试库的渲染，但似乎没有任何效果。
组件：
import axios from 'axios&
浏览 0提问于2019-03-28得票数 35
回答已采纳
我刚刚开始从酶迁移到我的项目的反应测试库，使用的材料-ui。据我所知，RTL查询dom，推荐的查询方法是通过aria角色。如何查询类似MUI的排版、Box或API组件(如Dialog )？有人能告诉我如何获得咏叹调角色或如何查询Mui组件吗？
浏览 3提问于2022-04-22得票数 1
到目前为止，在单元测试中，react路由器匹配参数被检索为组件的支持。因此，测试考虑特定匹配的组件(带有特定的url参数)是很容易的:当我们在测试中呈现组件时，我们只需根据需要精确地完成路由器匹配的支持(为此我使用了酶库)。
我真的很喜欢用新的钩子来检索路由信息，但是我没有找到关于如何在单元测试中模拟一个反应路由器匹配的例子，如何使用新的反应性路由器挂钩？
浏览 23提问于2019-09-26得票数 108
回答已采纳
1回答
我有一个rails应用程序与一个反应前端，我安装使用webpacker。我该如何设置摩卡和酶来处理这个问题？
浏览 1提问于2017-06-06得票数 0
回答已采纳
1回答
我正在测试使用Jest和酶的反应组件，并且很难测试是否正确地调用了已删除的函数(或者根本没有调用)。我简化了下面的组件代码(编辑以使代码更简单)，链接到代码依赖
// uses lodash debounce
class MyApp extends React.Component {
constructor(props) {
super()
this.state = {name: "initial value"};
this.debouncedFunction = _.debounce(this.debouncedFunction, 3000);
浏览 2提问于2018-10-08得票数 10
回答已采纳
TCG的“可信平台模块库规范”指出，命令PCR_Event和PCR_Extend最终会导致对指定的聚合酶链反应(及其银行)进行更新。除此之外，我们知道PCR只能被重置或扩展。那这两者有什么区别呢？
浏览 4提问于2019-12-16得票数 1
回答已采纳
我正在做一个项目，当我试图运行npm run build时，我得到了一个错误，上面写着“CI不被识别”，我一直在寻找答案，却什么也找不到。
，，这是我在gitbash得到的：
“‘CI”不被识别为内部或外部命令、可操作的程序或批处理文件。npm错误！代码ELIFECYCLE npm错误！错误1国家预防机制错误！barhop@0.1.0预置：CI=true react-scripts test --colors npm！退出状态1 npm错误！npm错误！barhop@0.1.0预编译脚本失败。npm错误！这可能不是npm的问题。上面可能还有额外的日志输出。npm错误！这个运行的完整日志可以在:
浏览 1提问于2021-01-16得票数 1
1回答
我对Jest和单元测试也很陌生，我想知道使用jest可以涵盖什么样的场景。
在我开始之前，我有一些具体的问题：
在单元测试中应该包括什么反应应用程序？
我是否需要其他有Jest的库来进行断言、嘲弄等等？我读过关于柴、西农等的文章。我不知道它们为什么会被使用，也不知道它们是否需要和Jest一起使用。
酶到底是用来做什么的？这是Jest必须使用的吗？
我需要像卡玛这样的小丑跑任务吗？或者Jest有一个内置的？我该怎么安排呢。
浏览 6提问于2017-08-09得票数 0
回答已采纳
我刚开始在React中编写测试用例。我正在使用玩笑和酶来编写测试用例。当我尝试用测试用例提交我的代码时，我遇到了一个问题，即浏览器只呈现html、css、js，它是否与其他代码一起加载测试用例。很抱歉发布了这样的问题，请帮助我理解浏览器如何呈现一个反应应用程序。
浏览 1提问于2020-03-13得票数 1
回答已采纳
1回答
我试着用酶的describeWithDOM()和mount()来测试反应组分的行为。但是，当组件导入jQuery时，我得到了以下错误：
错误: jQuery需要一个带有文档的窗口
我知道酶在引擎盖下使用jsdom，我一直认为jsdom负责窗口和文档。但我似乎找不到办法让这些人一起工作。
测试代码如下所示：
import chai, {expect} from 'chai';
import Select from './Select';
import React, {createElement} from 'react';
import {desc
浏览 1提问于2016-02-06得票数 7
回答已采纳
我有一个关于反应测试库的问题。如果你正在做钩子开发，这似乎是测试库的好去处，因为酶目前似乎不支持钩子，谁知道它是否会支持钩子，至少从浅层渲染的角度来看是这样的……至少从我目前所读到的情况来看。所以，让我对react- test -library感到有点疯狂的是，它建议进行完整的渲染、触发点击、更改等等来测试你的组件。所以，如果你要改变一个Button组件的功能，那会怎样呢？当您已经在测试该组件时，在该组件的每个子组件上呈现并运行测试不是很奇怪吗？您希望模拟父组件中的所有这些组件吗？如果你已经在自动化测试中这样做了，比如使用webdriver，那么点击和更改看起来不是多余的吗？
浏览 29提问于2019-02-26得票数 0
我使用jest和酶库来用创建- react app样板对进行反应测试。
随着套件和测试的运行，我陷入了上述错误。还没找到任何解决办法。如果有什么解决办法请告诉我。
TypeError: Cannot read property 'subroute' of undefined
浏览 2提问于2018-12-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
