如何使用react-testing-library测试React组件的css属性？
使用react-testing-library测试React组件的CSS属性可以通过以下步骤进行：
- 安装所需的依赖：
- 安装所需的依赖：
- 创建一个测试文件，例如
Component.test.js。 - 在测试文件中导入所需的依赖：
- 在测试文件中导入所需的依赖：
- 编写测试用例，使用
render函数渲染组件，并使用getByTestId或其他选择器获取组件的DOM元素： - 编写测试用例，使用
render函数渲染组件，并使用getByTestId或其他选择器获取组件的DOM元素： - 在上面的示例中，我们使用
getByTestId选择器获取具有data-testid属性为'test-element'的元素，并使用toHaveStyle断言函数来验证元素的CSS属性值是否为'color: red'。 - 运行测试：
- 运行测试：
这样，你就可以使用react-testing-library测试React组件的CSS属性了。请注意，这只是一个简单的示例，你可以根据实际情况编写更复杂的测试用例。另外，腾讯云提供了云计算服务，你可以参考腾讯云的文档和产品介绍来了解更多相关信息。
相关·内容
使用react-testing-library，我希望测试一个在React中实现的表单。 该表单包含类型为react-select的React组件。必须单击react-select组件中没有标签、没有文本等的部分(例如，下拉箭头)。 通常，react-testid library的方法是向有问题的项目添加一个“data-test
浏览 119提问于2019-09-06得票数 6
我正在尝试测试react组件并使用expect(elm).not.toBeVisible()，但没有成功。我已经将代码简化为以下更简单的形式：我使用React，语义-ui-react和react测试库。_tickCallback (internal/process/next_tick.js:68:7)
我试图在浏览器上看到<
浏览 0提问于2018-10-15得票数 15
回答已采纳
我正在尝试使用反应测试库，看看我们是否应该在我们的项目中使用它。我们使用jasmine而不是jest。我想知道jasmine是否可以很容易地使用react-testing-library (应该没问题……)谢谢
浏览 3提问于2019-02-13得票数 1
1回答
组件呈现为table元素，而不是react-testing-library使用的默认div？我还试着在react-testing-library测试中寻找例子，但没有找到任何东西。容器：默认情况下，react-testing-library将创建一个div并将该div附加到document.body中，这就是呈现react组件的地方。它用作查询的基本元素，以及使用debug()时打
浏览 0提问于2018-07-06得票数 5
回答已采纳
1回答
我正在尝试测试是否向组件传递了正确的属性。enzyme.mount(<Test />);
expect(control.find(<CompToTest />).props().MyProp).toEqual(expectedProp); 如何使用react-testing-library实现相同的结果？
浏览 6提问于2019-05-07得票数 1
react-react library背后的哲学对我来说是有意义的，但我正在努力将其应用于css属性。例如，假设我有一个简单的切换组件，它在单击时显示不同的背景色：import ".}
.on {
background-color: g
浏览 48提问于2020-06-02得票数 5
我正在学习如何使用进行单元测试反应组件import 'react-testing-library/cleanup-after-each'
import {
浏览 0提问于2019-04-20得票数 1
回答已采纳
假设我想要检查这个组件，用正确的初始属性呈现它的子组件哪里是在我尝试检查任何东西之前，当我运行我的测试时，我得到属性'custom-
浏览 0提问于2019-11-25得票数 0
我想通过单元测试来测试组件，我不知道如何将组件呈现给，它会出错。我只能使用"React-testing-library“
浏览 3提问于2021-08-17得票数 2
2回答
我一直在为我的alert.js写一个测试。我需要访问支柱值来测试它的严重性。我试过很多东西。但每次都失败了。import PropTypes from 'prop-types'; onClose: PropTypes.func.isRequi
浏览 2提问于2020-06-26得票数 7
我正在从enzyme迁移到react-testing-library。我有一个名为<ScrollToTop/>的组件，它只检查自上一次组件更新以来window.location是否发生了变化，如果有，则滚动到顶部。render() { }我以前的酶测试使用wrapper.set
浏览 12提问于2022-05-25得票数 1
回答已采纳
因此，react-testing-library用于单元/集成测试，cypress用于e2e测试。然而，两者似乎都在做同样的事情：
从顶层组件开始(这不是一个硬性和快速的需求，但如果不这样做，您将在您的子组件测试中得到一堆重复的测试用例即时反馈，快速的
浏览 4提问于2019-12-03得票数 39
为了测试我的组件，我正在从使用enzyme切换到使用react-testing-library。从和中获取我的提示，我向我的孩子添加data-testid
浏览 1提问于2019-03-08得票数 3
回答已采纳
我正在尝试测试一个下拉组件，以正确的顺序呈现某些选项。当前的测试代码如下：const selectOptions = dropdown.ownerDocument.querySelectorAll，但是它感觉太依赖于我的组件的实现细节。react-testing-library的核心原则之一是，我们希望我们
浏览 4提问于2021-09-10得票数 1
1回答
我正在尝试访问位于window.sunpietro.config属性下的属性。当使用Jest运行测试时，我得到的是TypeError: Cannot read property 'config' of undefined。我的测试代码如下所示： import React from 'react';
import { render, cleanup } from '<e
浏览 31提问于2019-04-17得票数 5
回答已采纳
2回答
我正在使用Jest和React-testing-library来测试React组件。我已经使用上下文API提供程序呈现了一个组件，因此该组件可以访问上下文。不幸的是，我不知道如何从渲染组件外部访问它。在本例中，上下文中有一个isUserLogged属性，具体取决于组件的更改。但是我不知道如何改变这个属性
浏览 25提问于2019-02-18得票数 2
回答已采纳
1回答
我正在使用React-Testing-Library，到目前为止，我的测试都通过了，但我有一个警告，我不能理解，也不知道如何解决。When testing, code that causes React state updates should be wrapped into act(...): act(Learn more at https://reactjs.org/link/wrap-tests-with-act
浏览 37提问于2021-11-20得票数 0
1回答
/styles.css";
import Input from ".value={value} setValue(e.target.value); />}
我想使用jest和react-testing-library来测试<I
浏览 2提问于2022-02-28得票数 1
回答已采纳
假设我有这个功能反应组件。const SomeComponent = ({ onShow }) => { return <div />;现在我要进行单元测试我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶
浏览 1提问于2019-05-10得票数 3
似乎如果你不将Material-UI样式表注入到jest/react-testing-library测试中，那么jsdom将无法从你的组件中获得正确的样式(例如，运行getComputedStyle(component)将为组件返回不正确的样式)。如何正确设置jest/react- test -library测试，以便将样式正确地注入到测试中？我已经将组件包装在
浏览 1提问于2019-05-20得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
