Unknown custom element: <foreignObject>

[ThomasR]

Version

2.6.11

Reproduction link

https://jsfiddle.net/0jh1psog/

Steps to reproduce

Open the console in the provided JSFiddle
or
run Vue.config.getTagNamespace('foreignObject')

What is expected?

Vue.config.getTagNamespace('foreignObject') should return 'svg'

What is actually happening?

It returns undefined.

This causes a warning Unknown custom element: <foreignObject> when testing such components using vue-test-utils

---

This is caused by

vue/src/platforms/web/util/element.js

Line 29 in 52719cc

'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +

It should be foreignobject with lowercase o here, because of the makeMap implementation.

To avoid such bugs in the future, even better fix:

vue/src/shared/util.js

Line 113 in 6fe07eb

map[list[i]] = true

should be map[expectsLowerCase ? list[i].toLowerCase() : list[i]] = true

[ThomasR]

Workaround (can go for example in one of your Jest setup files):

import Vue from 'vue';
const { getTagNamespace } = Vue.config;
Vue.config.getTagNamespace = (tag) => {
   if (tag.toLowerCase() === 'foreignobject') {
        return 'svg';
    }
    return getTagNamespace(tag);
};