Test element in object is empty with Jest

General Discussions
1

A developer using Jest and Enzyme for testing a React component wants to increase coverage for a property deconstruction default value. Inside the Team component, the url property is destructured with a default value url = '', but this line appears in yellow in the coverage report, indicating it’s untested. The developer attempted to pass an object with an empty url property in a test and verify it using expect(specificTeams.url).toEqual(''), but coverage still didn’t improve. They’re looking for the correct way to write a Jest test that ensures the component executes the default empty string assignment in destructuring and reaches full coverage for that case.

2

So, here’s the thing, when Jest is tracking code coverage, it only registers the default destructuring behavior if the property is completely undefined. It won’t trigger when the property is passed as an empty string, because Jest doesn’t count an explicitly empty string as a “missing” value. So in your case, if you pass { url: '' }, it doesn’t consider the default url = '' as executed. To fix this, you need to omit the url property entirely in your test, like so:

import { shallow } from 'enzyme';
import Team from './Team';

test('uses default url when prop is missing', () => {
  const wrapper = shallow(<Team specificTeams={{}} />);
  const specificTeams = wrapper.props().specificTeams;
  expect(specificTeams.url).toBe(''); // default is used
});

This will ensure Jest counts that line as covered, and the default value is properly exercised. When the url is missing, Jest will correctly register the use of the default empty string. It’s a small trick, but it works wonders!

3

Exactly, I’ve been there too. It’s a bit counterintuitive, but Jest really only registers the default value when the property is undefined, not when it’s passed as an empty string. So, just like Babita pointed out, if you pass url: '', Jest won’t trigger the default value. Instead, you should remove the url property altogether from your test props. This way, Jest will see that the url property is missing, and the default will be applied. Here’s what your test would look like:

import { shallow } from 'enzyme';
import Team from './Team';

test('uses default url when prop is missing', () => {
  const wrapper = shallow(<Team specificTeams={{}} />);
  const specificTeams = wrapper.props().specificTeams;
  expect(specificTeams.url).toBe(''); // default is used
});

This simple fix ensures the default gets triggered and your coverage report shows it as covered. Remember, it’s all about making sure Jest sees the value as missing.

4

That’s exactly the right way to go about it. And if you’re aiming for more comprehensive coverage, here’s a pro tip: you can test both behaviors, when the url is omitted and when it’s explicitly set. This will help Jest see both the default assignment and the behavior when the property is passed as expected. You can split your tests like this:

test('uses default url when prop is missing', () => {
  const wrapper = shallow(<Team specificTeams={{}} />);
  const specificTeams = wrapper.props().specificTeams;
  expect(specificTeams.url).toBe(''); // default is used
});

test('does not override existing url', () => {
  const wrapper = shallow(<Team specificTeams={{ url: 'https://example.com' }} />);
  expect(wrapper.props().specificTeams.url).toBe('https://example.com');
});

The first test ensures the default is used when the url is missing, while the second ensures that when a url is provided, it’s not overwritten. This gives you full coverage of both the default and normal behavior, and you can even check for emptiness using jest tobeempty where applicable. Just a simple tweak, and you’re set!