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

Posted 2023-02-21

【中文标题】如何使用 Jest 和/或 Enzyme 获取嵌套在 React 组件中的元素的属性？

【英文标题】：How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?

【发布时间】：2017-04-25 13:12:52

【问题描述】：

我想测试一下图像是否已正确加载到 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等方法？有没有更好的方法使用其他东西而不是酶来做到这一点，例如react-addons-test-utils?

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

【参考方案1】：

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

const src = img.node.props.src;

可以简化为：

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

文档可以在here找到。

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

【讨论】：

enzyme 已弃用 .node 方法并鼓励使用 .getElement 方法。

我用过这样的东西：mount(<MyComponent/>).find().prop('src')

【参考方案2】：

对我来说，它的工作原理如下

expect(companySelect.find('input').props()["disabled"]).toBe(true)

props() 返回一个具有选择器所有属性的对象，然后可以作为对象浏览。

希望这也有帮助....

https://airbnb.io/enzyme/docs/api/ReactWrapper/props.html

【参考方案3】：

使用 React Test Utilities:

it('should have the logo image', () => 
  const app = TestUtils.renderIntoDocument(<App/>);
  var image = TestUtils.findRenderedDOMComponentWithTag(app, 'img');
  expect(image.getDOMNode().getAttribute('src')).toEqual('logo.svg');
);

酶测试看起来更干净。

【讨论】：

Enzyme .prop 访问器不会检查发出的 HTML。它只是确保将道具输入到被测组件中。 getDOMNode().getAttribute 是您所需要的。

【参考方案4】：

对我来说这很有效

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

【讨论】：

除了这个会抛出的错误消息不太友好（预期未定义为真实）与（预期元素禁用属性）

【参考方案5】：

@testing-library/jest-dom 库提供了一个自定义匹配器 toHaveAttribute。扩展expect子句后

import '@testing-library/jest-dom/extend-expect'

我们可以断言

const rect = document.querySelector('[data-testid="my-rect"]')
expect(rect).toHaveAttribute('width', '256')

【参考方案6】：

.node 不工作 经过一番努力，我发现以下内容与上述问题的答案 100% 相关

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