It seems problematic to allow arbitary non-lowercase attribute on HTML nodes. Because the server has no ability to keep them case sensitive (HTML isn't). So they will end up different on the client.

We should probably warn if the attribute is not a known one *and* is not lowercase.
itRenders('unknown data- attributes with boolean true', async render => {
        const e = await render(<div data-fooBar={true} />);
        expect(e.getAttribute('data-fooBar')).toBe('true');
      });
      itRenders('unknown data- attributes with boolean false', async render => {
        const e = await render(<div data-fooBar={false} />);
        expect(e.getAttribute('data-fooBar')).toBe('false');
      });
      itRenders(
        'no unknown data- attributes with casing and null value',
        async render => {
          const e = await render(<div data-fooBar={null} />);
          expect(e.hasAttribute('data-fooBar')).toBe(false);
        },
      );
      itRenders('custom attributes for non-standard elements', async render => {
        const e = await render(<nonstandard foo="bar" />);
        expect(e.getAttribute('foo')).toBe('bar');
      });
      itRenders('unknown attributes for custom elements', async render => {
        const e = await render(<custom-element foo="bar" />);
        expect(e.getAttribute('foo')).toBe('bar');
      });
      itRenders(
        'no unknown attributes for custom elements with null value',
        async render => {
          const e = await render(<custom-element foo={null} />);
          expect(e.hasAttribute('foo')).toBe(false);
        },
      );