Javascript 如何使用Jest和/或Ezyme获取嵌套在React组件中的元素的属性？

我想测试查看图像是否已正确加载到React应用程序中。我决定检查嵌套在React组件中的

img

元素的

src

属性。我想使用Jest测试框架，如果需要，还可以使用酶测试实用程序

通过挖掘浅层React测试组件的

Object.keys

，我能够想出以下解决方案。我不确定的那条线用星号表示

import React     from 'react';
import {shallow} from 'enzyme';
import App       from './App';

it('should have the logo image', () => {
  const app = shallow(<App />);
  const img = app.find('img');
  const src = img.node.props.src; // ******
  expect(src).toBe('logo.svg');
});

从“React”导入React；
从“酶”导入{shall}；
从“./App”导入应用程序；
它（'应该有徽标图像'，（）=>{
const app=shallow（关于React元素属性对我来说似乎不是很好的答案，尽管那里的海报也表明很难找到关于断言呈现属性值的文档。还有一些其他问题（例如，和）处理React/Jest/Enzyme，但不处理检索属性值。
经过一些挖掘，我发现了以下内容。问题中的指示行：

const src = img.node.props.src;

可以简化为以下内容：

const src = img.prop('src');

可以找到文档

如果有人知道一种非酶的方法可以做到这一点，我仍然有兴趣听到它。
与React:

it（'应该有徽标图像'，（）=>
const app=TestUtils.renderIntoDocument（）；
var image=TestUtils.findrenderedomcomponentwithtag（应用程序“img”）；
expect（image.getDOMNode（）.getAttribute（'src'））.toEqual（'logo.svg'）；
});

酶测试看起来更干净。
.node在经过一些艰苦的工作后不工作了，我发现以下内容与上述问题的答案100%相关

  const src = img.getElement().props.src;

对我来说，效果如下

expect（companySelect.find（'input'）.props（）[“disabled”]）.toBe（true）

props（）
返回具有选择器所有属性的对象，然后可以将其作为对象浏览

希望这也有帮助

对我来说，这很有效

expect(component.find('button').props().disabled).toBeTruthy();

库提供了一个自定义匹配器。扩展
expect
子句后

import'@testinglibrary/jest-dom/extend-expect'

我们可以这样断言

const rect=document.querySelector（“[data testid=“my rect”]”）
expect（rect）.toHaveAttribute（'width'，'256'）
Enzyme
.prop
访问器不检查发出的HTML。它只是确保prop被送入被测组件中。
getDOMNode（）.getAttribute
是您所需要的。Ezyme已经弃用了
.node
方法，并鼓励使用
.getElement
方法。我使用了类似的方法：
mount（）.find（）.prop（'src'）
，除了此方法抛出的错误消息与（应禁用元素haveAttribute）
expect(component.find('button').props().disabled).toBeTruthy();