fix(vue2): augmentedCreateElement should pass HTML attributes (#6282)

fix(vue2): `augmentedCreateElement` does not pass HTML attributes properly

Co-authored-by: Haroen Viaene <hello@haroen.me>

packages/vue-instantsearch/src/util/__tests__/renderCompat.test.js

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '../../../test/utils';
+import { renderCompat } from '../vue-compat';
+
+describe('renderCompat', () => {
+  it('should handle function components that return multiple children', () => {
+    const wrapper = mount({
+      render: renderCompat((h) => {
+        function Component({ text }) {
+          return h(
+            'div',
+            { attrs: { 'data-text': text } },
+            h('span', {}, ['1']),
+            h('span', {}, '2')
+          );
+        }
+        return h(Component, { text: 'Hello world' });
+      }),
+    });
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      <div data-text="Hello world">
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+      </div>
+    `);
+  });
+
+  it('should map props to attrs when using a HTML tag', () => {
+    const wrapper = mount({
+      render: renderCompat((h) => {
+        return h('img', {
+          src: 'http://algolia.com/image.png',
+          alt: 'Some image',
+        });
+      }),
+    });
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      <img src="http://algolia.com/image.png"
+           alt="Some image"
+      >
+    `);
+  });
+});

packages/vue-instantsearch/src/util/vue-compat/index-vue2.js

@@ -21,6 +21,23 @@ const augmentCreateElement =
       );
     }
 
+    if (typeof tag === 'string') {
+      const { on, style, attrs, domProps, nativeOn, key, ...rest } = props;
+      return createElement(
+        tag,
+        {
+          class: className || props.class,
+          attrs: attrs || rest,
+          on,
+          nativeOn,
+          style,
+          domProps,
+          key,
+        },
+        children
+      );
+    }
+
     return createElement(
       tag,
       Object.assign(props, { class: className || props.class }),