Search code examples
jestjsreact-test-renderer

Jest test using react-test-renderer is inserting undefined attribute value into the DOM

I briefly tried to find this in the react-test-renderer source code, but wasn't able to locate it.

Recall that in React, component element attributes whose values are undefined are not rendered in the DOM. I.e., given bat = undefined and <Foo bar={bat} />, the bar attribute will not appear in the generated HTML.

I'm assuming it's expected behavior, but I'm confused why, when an optional component attribute appears in the JSON tree in a Jest snapshot - unless the snapshot is simply confirming that the property is unspecified (ws-automation-id is an optional component property that does not have a defaultProps entry defined):

exports[`the <TextButton/> component should use the specified class names 1`] = `
<button
  className="gc-icon test-class1 test-class2"
  onClick={[Function]}
  ws-automation-id={undefined}
>
  Button Text
</button>
`;

Given

test('should use the specified class names', () => {
  const tree = create(<TextButton buttonText="Button Text" onClick={null} classNames={['test-class1', 'test-class2']} />).toJSON()
  expect(tree).toMatchSnapshot()
})
Solution

  • I neglected to post the version being used at the time of the original post. This issue has been fixed, however, it's unclear as to the exact version.