可以将基于js-dom的酶包装器与react-testing library一起使用吗？
可以将基于js-dom的酶包装器与react-testing library一起使用。
基于js-dom的酶包装器（enzyme）是一个流行的React测试工具，它提供了一组用于测试React组件的实用功能。它允许开发人员模拟渲染React组件并与它们进行交互、断言和验证组件的行为。
而react-testing library是另一个常用的React测试工具，它的设计目标是鼓励开发人员编写更接近用户实际使用场景的测试。它提供了一组简单且直观的API，使得编写可读性高、易于维护的测试变得更加容易。
这两个工具可以很好地结合使用。可以使用enzyme的功能来模拟和操作React组件，然后使用react-testing library提供的断言和查询API来验证组件的行为和输出。
通过结合使用enzyme和react-testing library，可以同时享受到enzyme丰富的功能和react-testing library的测试编写风格。这样可以更好地测试和验证React组件的行为，从而提高应用程序的质量和稳定性。
推荐腾讯云的相关产品：云服务器 CVM、容器服务 TKE、云原生应用托管 TEM。
- 腾讯云服务器（CVM）是一种弹性计算产品，提供高性能、可扩展的云服务器实例，适用于各种应用场景。 产品链接：https://cloud.tencent.com/product/cvm
- 腾讯云容器服务（TKE）是一种高度可扩展的容器部署和管理服务，支持快速部署和扩展容器化应用程序。 产品链接：https://cloud.tencent.com/product/tke
- 腾讯云原生应用托管（TEM）是一种基于Kubernetes的全托管应用程序部署和管理服务，简化了应用程序的构建、部署和扩展。 产品链接：https://cloud.tencent.com/product/tem
以上是腾讯云提供的与云计算相关的产品，可根据具体需求选择适合的产品进行使用。
相关·内容
使用AirBnB的酶，我们可以对一个组件进行setState： const loginComponent = shallow(<Login />);
loginComponent.setState({ error: true }); 我想用react-testing library做同样的事情。 谢谢!
浏览 20提问于2019-01-09得票数 5
1回答
是否有一种方法可以通过浅层安装来测试使用React构建的功能组件。我遇到了酶不支持useEffect ()和其他钩子与浅层渲染一个组件，我不想进入装入。
同时也发现react-testing-library是一种新的流行的替代品。比酶更好的选择吗？我已经将Enzyme用于测试基于类的组件。因此，在重写这些内容时有一种痛苦。
浏览 2提问于2020-01-30得票数 1
回答已采纳
1回答
我有表单组件(这是一个简化的例子。实际上，我有更多的字段)：
<form className="film-form" onSubmit={formik.handleSubmit}>
<LabeledInput
id="film-title"
name="title"
title="Title"
value={formik.values.title}
onChange={formik.hand
浏览 4提问于2020-10-11得票数 0
回答已采纳
我在大约20个测试中使用来自@apollo/react-testing的MockedProvider，每个单独的测试运行大约2.5秒，但是当它们一起运行时，其中一些随机需要6-8秒
我真的不能理解这一点，因为“慢”测试总是不同的，测试执行的顺序也总是不同的。
每个测试都有以下结构
import React from 'react'
import { MemoryRouter } from 'react-router-dom'
import { MockedProvider } from '@apollo/react-testing'
import
浏览 3提问于2019-11-22得票数 2
我正在试着测试一个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回答
用反应式组件进行测试.测试.库
、、、、
我目前正在尝试用模拟的提供程序测试一个样式化的组件，如下所示：
import React from "react";
import TestResults from "./TestResults";
import {
render,
cleanup,
findByTestId,
findByText,
waitForElement,
} from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";
浏览 3提问于2020-06-09得票数 4
回答已采纳
使用jest和酶在react中编写单元测试。在检查组件状态时，它抛出错误"ReactWrapper:: state ()仅能在类组件上调用“。 import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
浏览 27提问于2019-10-17得票数 4
回答已采纳
4回答
在酶中，你可以像这样检查子组件的存在：
expect(wrapper.find(ChildComponent)).toHaveLength(1)
什么等同于react测试库中的这个测试？我找到的所有在线示例只涵盖了寻找dom元素的非常简单的测试-没有一个包含渲染子组件的示例。如何查找子组件？
浏览 19提问于2020-02-03得票数 29
我正在开发一个使用Storybook模拟组件的React项目。我们最近引入了Apollo react钩子(即useQuery)来获取一些组件的数据。示例： const Component = () => {
const { loading, error, data } = useQuery(GET_THING);
if (loading) return 'Loading!';
if (!loading && error) return 'Error!';
return <ComponentChild data={da
浏览 23提问于2020-04-10得票数 1
2回答
我正在尝试让Scala.js使用bootstrap库。添加js文件非常简单直接：
jsDependencies +="org.webjars" % "bootstrap" % "3.3.7-1" / "bootstrap.js" minified "bootstrap.min.js"
但是现在我在添加bootstrap.css文件时遇到了问题。我试过这句话：
"org.webjars" % "bootstrap" % "3.3.7-1" / "bootstr
浏览 3提问于2017-07-02得票数 1
2回答
令我惊讶的是，许多博客都在编写单元测试，以便同时使用Jest和酵素进行反应应用程序。不能，我们用唯一的玩笑或唯一的酶来编写反应应用程序的单元测试？
如果是的话，为了得到一个成分，我们在酶中使用浅层()，而在Jest中使用什么？
浏览 5提问于2020-05-12得票数 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
我在React酶测试中遇到这个错误-- TypeError: Cannot read property 'have' of undefined
下面是我的测试文件：
import React from 'react';
import ReactDOM from 'react-dom';
import { mount } from 'enzyme';
import TransactionsTable from './TransactionsTable';
import Pagination from './
浏览 19提问于2018-09-10得票数 0
1回答
我正在使用jest和酶进行单元测试。我有一个登录表单，现在想要为它编写测试用例。我如何验证我传递的值。假设我用abc@gmail.com模拟电子邮件字段。我需要在提交表单时检查这些值。
浏览 7提问于2020-08-05得票数 0
回答已采纳
这是一个Vue 2 JavaScript应用程序：
VIcon导致jest测试失败，并呈现此错误：
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'component' of undefined"
found in
---> <VIcon>
<VCheckbox>
浏览 2提问于2021-01-28得票数 6
回答已采纳
3回答
我在用玩笑和酶做单元测试。我有与钩子连接的组件。我调用redux操作来加载数据。
import React, {useEffect, useState, useCallBack} from "react";
import {connect} from "react-redux";
import CustomComponent from "../Folder";
import { loadData, createData, updateData } from "../../redux/actions";
const Accoun
浏览 2提问于2021-06-10得票数 3
1回答
我有一个证监会，我正在测试使用酶浅渲染。我将一个带有内联样式的style对象作为支持传递给这个无状态组件。但是，当我将单元测试应用到它时，它会返回未定义的。我不确定这是否可以，因为我理解这个组件只是将传递给它的任何东西作为道具返回，并且由于没有传递/呈现，它给了我未定义的东西。有什么解决办法吗？
const LoginForm = ({ style, handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<div style={_.get(style, 'containe
浏览 3提问于2016-08-12得票数 1
回答已采纳
2回答
所以我有一个需要解决的测试用例。后台正在将开发环境更新到较新的版本，在那之后，我们的许多测试都中断了。 这里我有一个奇怪的案例，结果是：“无法解析选择器:标签价格细节1” 这就是测试代码片段的样子，我希望我已经添加了所有必要的内容。 it('Should render with price and one addon', () => {
data.addonHeaderName = 'addonHeaderName';
data.addons.push(
{
price: {
label
浏览 19提问于2019-02-13得票数 1
1回答
我想使用一些过滤条件将一个数据帧分离成一个数据帧列表，所以我编写了一些代码，如下所示
library(dplyr)
mySpecies <- iris$Species %>% levels
iris %>%
function(y) lapply(mySpecies, function(x) filter(y, Species == x))
它工作得很好。
从内部函数的角度来看，"y“位于parent.env(environment())中，因此我们还可以编写
iris %>%
function(x) lapply(mySpecies, functio
浏览 2提问于2014-08-22得票数 0
1回答
说真的，从酶中使用浅层和渲染有什么不同？ 下面是这两者的一个示例： 使用浅层测试渲染： import "jest";
import * as React from "react";
import { shallow } from "enzyme";
import Item from "../item.component";
describe("Item", () => {
it("renders correct", () => {
const item = {
浏览 10提问于2019-01-17得票数 0
回答已采纳
我有一个<Parent/>组件，当我添加/删除/更改它的<Child/>组件时，我想使用酶来测试它的行为。例如，更改
<Parent>
<Child />
</Parent>
至
<Parent>
<Child />
<Child />
</Parent>
我正在使用一个操作DOM的第三方库，所以我需要跟踪孩子，以保持React和库的同步。
我多次尝试调用mount，尽管这两个mount调用创建了两个不同的实例。例如,
let constructorCalls = 0;
le
浏览 1提问于2017-04-18得票数 1
我有一个jest/酶测试，它在组件周围创建一个ShallowWrapper，找到一个指定的语义-ui-react (by id)，模拟单击按钮，然后查看单击是否切换了某些内容。
样本JSX：
<Popup
trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
content="Popup Words"
/>
{this.state.showThing &&
<div classNa
浏览 3提问于2017-08-23得票数 2
回答已采纳
1回答
library(ggmap) # -- for geocoding, obtaining city locations
load("gadm36_IND_2_sp.rds")
ind2 = gadm
对于上面的代码，我将获得以下错误：
警告消息：“文件‘gadm36_IND_2_sp.rds’有魔术号'X‘使用保存版本之前的2是废弃的”错误加载(“gadm36_IND_2_sp.rds”)：错误的还原文件魔术号(文件可能已损坏)-没有数据加载的回溯：
load("gadm36_IND_2_sp.rds")
在此之后，我正在运行下面的代码：
# plott
浏览 3提问于2020-07-20得票数 0
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
回答已采纳
1回答
反应路由器4和酶
、、、
我已经切换到了反应性路由器v4，很少有测试需要重新实现。我有以下设想：
安装组件(检查是否调用了methodA )
用酶包装法改变道具: setProps
检查方法是否已被调用两次
这对老路由器来说很容易。但是这个新的很难做到：
如果组件(或子组件)包含例如Link，这意味着我们必须为呈现组件提供适当的配置。这就是创建MemoryRouter的原因：
const comp = mount(
<MemoryRouter>
<Comp {...someProps} />
</MemoryRouter>
浏览 1提问于2017-05-24得票数 9
我的场景是构建在类型记录中的一个react项目，特别是关于涉及酶的mount的单元测试。我正在努力使项目与tsconfig参数“noImplicitAny”保持一致:是的，我想知道如何修复下面描述的let组件问题。
let wrapper
beforeEach(() => {
wrapper = mount(<Component/>)
})
it('shows the rendered component', () => {
expect(wrapper.find('.class-component')).toHaveLeng
浏览 0提问于2020-06-01得票数 0
回答已采纳
我刚刚开始使用jest和酶。
我有一个问题，使我的单元测试工作。我正在使用redux- mock -store来模拟store对象。
it('shows an li for each comment', () => {
expect(container.find('li').length).toBe(2);
});
我期望有两个li元素，但是我得到了0个li元素。
我在这个错误中纠结了很长时间。
有没有人能帮我弄清楚怎样才能通过这项测试！？
来自jest test runner的测试结果
Error: expect(received).toBe(e
浏览 25提问于2017-06-27得票数 1
回答已采纳
1回答
我有一个旋转木马组件，我正在测试Jest和酶。该组件作为子元素接收任何类型的元素。在touchMove事件上，根据触摸的方向，活动子事件将相应更改。
是否有一种方法可以测试组件的行为而不依赖于实现？
浏览 1提问于2019-02-14得票数 0
回答已采纳
我有一个简单的酶测试，它检查HTML输入密码字段是否为空，然后尝试按如下方式键入一些文本。
expect(wrapper.find({type: 'password'})).toHaveLength(0);
wrapper.find({type: 'password'}).simulate('keydown', {which: "password123"});
第一行运行良好，并通过。但是，第二行失败，并报告以下错误。
方法“模拟”意味着在一个节点上运行。0找到了.
酶如何才能在一条线上而不是在另一条线上找到该成分？
浏览 2提问于2019-12-11得票数 2
回答已采纳
1回答
测试useSubscription钩子我发现有点困难，因为这个方法被省略了/没有记录在上(在写文章的时候)。想必，应该使用来自<MockedProvider />的@apollo/react-testing来模拟它，就像该链接中给出的示例中的突变一样。
测试订阅的加载状态，我已经工作了：
组件：
const GET_RUNNING_DATA_SUBSCRIPTION = gql`
subscription OnLastPowerUpdate {
onLastPowerUpdate {
result1,
result2,
}
}
`;
浏览 3提问于2020-04-29得票数 12
回答已采纳
3回答
我正在尝试在dplyr中做一个过滤器，其中一列就像是某些观察值。我可以使用sqldf作为
Test <- sqldf("select * from database
Where SOURCE LIKE '%ALPHA%'
OR SOURCE LIKE '%BETA%'
OR SOURCE LIKE '%GAMMA%'")
我尝试使用以下不返回任何结果的代码：
database %>% dplyr::filter(SOURCE %like% c('
浏览 1提问于2017-11-01得票数 1
检查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
我的所有组件都从上下文中获取数据和方法。我想测试-at最小的“组件渲染”情况，但当然，当我试图在测试用例中渲染组件时，它找不到来自上下文的方法/函数和数据。我找不到使用React Testing Library或Jest将上下文值传递到测试用例的方法(我需要使用这些库，不需要酶)
假设我想测试一个简单的过滤器组件。
上下文(我猜是原语用法)
import { useState, useEffect, createContext } from "react";
const Context = createContext();
const ContextProvider = (
浏览 2提问于2021-05-19得票数 0
从find()返回和findWhere()返回有什么不同吗？
我试图从我使用find()获得的组件中获得一个返回数组的道具，但随后我从TypeScript对象获得了一个类型为“未知”的..ts(2571)
const wrapper = mount(<Component />)
const a = wrapper.find('[name='componentName']')
expect(a.prop('someProp')[0].value).toBe('someValue')
因此，我使用的不是wrapper.fi
浏览 5提问于2020-08-29得票数 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
2回答
我可以模拟组件的功能(使用Jest、酶和反应)如下：
let wrapper = shallow(<Component />);
wrapper.instance().load = jest.fn(function(ref) {
this.setState({ loading: false, notice: {thing: 'thing'} });
});
wrapper.update();
我的load函数实际上由componentWillMount调用。在我重载函数之前，componentWillMount似乎是被调用的。
那么，在实际构建组件之前，是否有一
浏览 0提问于2018-09-25得票数 1
回答已采纳
4回答
我正在尝试使用酶来测试组件的方法。我知道最典型的方法是使用酶的instance()方法。
问题是，这只适用于root组件，我的组件需要在两个上下文提供程序(即react-router和apollo客户端)中进行包装才能呈现。
const wrapper = mount(
<ApolloProvider client={client}>
<MemoryRouter initialEntries={["/login"]}>
<AuthFormContainer />
</MemoryRou
浏览 0提问于2018-06-09得票数 7
我是个新手，对所有的测试库都很困惑。我让我的测试代码正常工作，但为了使用它的toMatchSnapshot()，必须从react- test -renderer调用create()，并且为了使用它的断言，必须从@testing-library/react调用render()，这似乎是多余的。
import {render} from '@testing-library/react';
import {act, create} from 'react-test-renderer';
it('renders a login screen', ()
浏览 1提问于2019-11-01得票数 15
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
现在测试React Native组件的首选方法似乎是使用mocha、react-native-mock和酶的组合来浅层呈现组件。
问题是，浅层渲染只深入一层，有时组件的嵌套视图需要您测试额外的一层或两层。
理论上，酶支持mount()来完全呈现组件，但实际上这是失败的，因为。
考虑到这些限制，人们如何测试超过一个呈现级别的组件？
浏览 14提问于2016-08-03得票数 10
回答已采纳
我有一个React组件，它包含在高阶组件withRouter中，如下所示：
module.exports = withRouter(ManageProfilePage);
我的路线如下：
<Route path="/" component={AdrApp}>
<IndexRoute component={Login}/>
<Route component={CheckLoginStatus}>
<Route path="manage-profiles/:profileId" compone
浏览 7提问于2017-05-26得票数 35
回答已采纳
我需要解析时间的字符格式，如"1:36:22 PM“。
我尝试过as.POSIXct和strptime的各种排列，但都无法实现。例如，这不能提高PM的重要性：
t <- "1:36:22 PM"
as.POSIXct(t, format = "%H:%M:%S")
# [1] "2016-09-08 01:36:22 BST"
但这是失败的：
strptime(t, "%H:%M:%S")
# [1] NA
奇怪的是，出于我无法理解的原因，将秒从输入中删除可能有效：
t <- "1:30:00 PM&#
浏览 6提问于2016-09-08得票数 16
我正在gedit上尝试这段代码，并在终端上使用g++编译器进行编译。
#include <Rcpp.h>
using namespace Rcpp;
// [[Rcpp::export]]
double sumC(NumericVector x) {
int n = x.size();
double total = 0;
for(int i = 0; i < n; ++i) {
total += x[i];
}
return total;
}
// [[Rcpp::export]]
double meanC(NumericVector x)
浏览 2提问于2018-06-29得票数 3
1回答
默认同步酶发布与基于轴2的Synpase环境捆绑在一起。但是，我希望使用基于Apache的容器。
如果我正确理解，我将不得不使用Apache库实现SynapseEnvironment类。
这是使用基于CXF环境的正确方法吗？
如果是，这是否一种明智的做法？这会不会是一项很大的努力？
请澄清上述问题。
浏览 2提问于2015-06-26得票数 4
回答已采纳
基于酶的测试与系统测试有什么不同？
我们能否将系统测试视为基于用例的测试的一个子集，即系统测试只考虑系统中组件或子系统的使用。
浏览 1提问于2009-11-29得票数 1
1回答
我正在使用Google Closure编译器编译我的代码。
我正在编译的代码是来自闭合库、Hammer、Hammer-Time和一些我自己的代码的相关部分。
直到我将锤子添加到编译中，编译才会正常工作，此时，当我运行JavaScript时，我会得到以下错误：
Uncaught TypeError: n.add is not a function
指的是：
function mb(a, c, e, l, f, k) {
if (!c)
throw Error("Invalid event type");
var h = !!f
, n
浏览 6提问于2016-04-02得票数 1
当单元测试响应组件时，我通常根据支柱的存在或内容来检查子节点的存在。
对于酶，我在浅层包装器或挂载包装器上找到使用.find的元素，然后检查它的长度是否为1。
const wrapper = shallow(<MYReactComponent/>);
const innerNode = wrapper.find('some-css-selector');
expect(innerNode.length).to.equal(1);
有没有更好的检查方法
浏览 0提问于2016-04-22得票数 5
回答已采纳
1回答
酶有一组欢快的选择器函数，但它似乎没有.eq()或.index()。我找不到一组超级特定的函数，它在文档中的任何地方都能实现。
是否有像.eq()或.index()这样的函数可以用于获取特定索引上的特定元素。
:nth-child()似乎没有实现，.get()对其进行了解压，我并不特别希望如此。
浏览 2提问于2017-07-27得票数 1
回答已采纳
想要创建发送和阅读短信应用程序从Symbian系列60手机即诺基亚手机通过PC使用Java。有图书馆吗？
浏览 2提问于2012-02-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
