43

I want to test to see whether an image has properly loaded in a React app. I have decided to check the src attribute of the img element nested within the React component. I want to use the Jest testing framework and, if needed, the Enzyme testing utility.

By digging through the Object.keys of a shallow React test component, I was able to come up with the following solution. The line I'm uncertain about is indicated with the asterisks.

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');
});

This solution does work but it seems a little convoluted (it requires a property of a property of a property of a wrapper) and seems somewhat obscure (I can't easily find clear instructions for this online). So, is this the correct/simplest way to do this?

  • If so, where is the documentation?
  • If not, how else should/could I be doing this? e.g. Is there some ready-made getAttribute or retrieveProp method, etc. in Enzyme? Is there a better way of doing this using something else instead of Enzyme, e.g. react-addons-test-utils?

This question about React element attributes doesn't seem to quite answer it for me even though the poster there also indicates having a hard time finding documentation about asserting a rendered attribute value. A number of other questions (e.g. here, here and here) deal with React/Jest/Enzyme but don't deal with retrieving attribute values.

Community
  • 1
  • 1
Andrew Willems
  • 11,880
  • 10
  • 53
  • 70

6 Answers6

53

After some digging, I found the following. The indicated line in the question:

const src = img.node.props.src;

can be simplified to the following:

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

The documentation can be found here.

If someone knows of a non-Enzyme way of doing this, I'd still be interested in hearing about it.

Andrew Willems
  • 11,880
  • 10
  • 53
  • 70
24

For me, it worked as below

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

props() returns an object having all the attributes of the selector and then it can be browsed as an object.

Hope this helps too....

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

Dinuka De Silva
  • 2,431
  • 2
  • 14
  • 13
  • 5
    `.props()["disabled"]` and `.toBe(true)` can be simplified to `expect(companySelect.find('input').prop('disabled')).toBeTruthy()` – Stijn V Apr 22 '22 at 07:21
  • In my case `props` was not a function and I had to use `props["aria-label"]` – Devnsyde Sep 15 '22 at 16:00
14

The @testing-library/jest-dom library provides a custom matcher toHaveAttribute. After extending expect clause

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

we can assert like

const rect = document.querySelector('[data-testid="my-rect"]')
expect(rect).toHaveAttribute('width', '256')
Spatz
  • 18,640
  • 7
  • 62
  • 66
12

With 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 tests looks much cleaner.

yadhu
  • 15,423
  • 7
  • 32
  • 49
  • The Enzyme `.prop` accessor does not inspect the emitted HTML. It simply ensures that the prop was fed into the component under test. `getDOMNode().getAttribute` is what you need. – Tom Feb 05 '18 at 21:28
12

For me this worked

expect(component.find('button').props().disabled).toBeTruthy();
SanS
  • 1,137
  • 9
  • 7
  • Except that the error message this one would throw would be less friendly (Expected undefined to be truthy) vs (Expected elem to haveAttribute disabled) – Dean Radcliffe May 18 '20 at 16:49
2

.node is not working After some hard work, I found the following is 100% related to answer for above question

  const src = img.getElement().props.src;
D V Yogesh
  • 3,337
  • 1
  • 28
  • 39