我想测试一下图像是否已正确加载到 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 但不涉及检索属性值。
最佳答案
经过一番挖掘,我发现了以下内容。问题中指示的行:
const src = img.node.props.src;
可以简化为:
const src = img.prop('src');
可以找到文档here .
如果有人知道这样做的非 enzyme 方法,我仍然有兴趣了解它。
关于javascript - 如何使用 Jest 和/或 Enzyme 获取嵌套在 React 组件中的元素的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41070895/