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

Question

我想测试一下图像是否已正确加载到 React 应用程序中。我决定检查嵌套在 React 组件中的 img 元素的 src 属性。我想使用 Jest 测试框架，如果需要，还想使用 Enzyme 测试实用程序。

通过深入研究浅层 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');
});

这个解决方案确实有效，但它似乎有点令人费解(它需要包装器属性的属性的属性)并且看起来有些晦涩(我无法轻易找到明确的说明在线的)。那么，这是执行此操作的正确/最简单的方法吗？

• 如果有，文档在哪里？
• 如果不是，我还应该/可以怎么做？例如Enzyme 有没有现成的getAttribute 或retrieveProp 等方法？有没有更好的方法使用其他东西而不是 enzyme 来做到这一点，例如react-addons-test-utils?

This question关于 React 元素属性似乎并没有完全回答我的问题，尽管那里的海报也表示很难找到关于断言渲染属性值的文档。许多其他问题(例如 here、here 和 here)涉及 React/Jest/Enzyme 但不涉及检索属性值。

Answer 1

经过一番挖掘，我发现了以下内容。问题中指示的行:

const src = img.node.props.src;

可以简化为:

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

可以找到文档here .

如果有人知道这样做的非 enzyme 方法，我仍然有兴趣了解它。