如何在Cypress中访问组件属性
提问于 2019-11-22 19:17:12
我有一个包含两个项目的“选择器”组件(类似于分段控件)，它在被选中时是黄色的，在未被选中时是灰色的。我想测试一下，单击其中一个选项是否会将其变为选中状态。
元素是一个带样式的按钮：
const LeftButton = styled(Button)({
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
borderRight: 'solid 2px #545454',
});
const RightButton = styled(Button)({
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
});
<Group>
<LeftButton
data-testid={'OPTION_1'}
active={option == 1}
onClick={() => toggleParameter(1)}
>
1
</LeftButton>
<RightButton
data-testid={'OPTION_2'}
active={option === 2}
onClick={() => toggleParameter(2)}
>
2
</RightButton>
</Group>查看呈现的HTML，看起来唯一可用的信息就是类。例如，以下是选项1被选中而选项2未被选中时的外观：
<div data-testid="OPTION_1" class="css-1z12orh">1</div>
<div data-testid="OPTION_2" class="css-14vfpcp">2</div>当选项2被选中而选项1没有被选中时，类不会切换，它们实际上生成了新的类，尽管幸好每次生成的类都是相同的gobbledegook。
要在Cypress中断言是否选中了一个，我必须在这个随机的类名上断言，对吗？有没有办法访问实际组件的属性，这样我就可以在props.active上断言？
Cypress知道react组件的存在吗，还是只知道HTML元素？
回答 1
Stack Overflow用户
发布于 2020-08-08 08:02:32
将其另存为dev依赖关系：
npm i -D cypress-react-selector您可以从React元素获取React属性，并在运行时验证这些属性。
describe('It should validate cypress react selector', () => {
before(() => {
cy.visit('https://localhost:300');
cy.waitForReact();
});
it('it should validate react selection', () => {
cy.react('MyComponent').should('have.text', 'abcd');
});
});使用cypress-react-selector和@cypress/react库进行单元/组件/集成测试。几个方便的示例- https://github.com/abhinaba-ghosh/cypress-react-selector/tree/master/component
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59000442
复制相关文章
【Android Gradle 插件】Gradle 扩展属性 ④ ( 扩展属性访问方式 | 直接访问扩展属性 | 通过 ext 对象访问 | 在 gradle.properties 中定义扩展属性 )
点击加载更多
腾讯云开发者
