cloneDeep returns an empty Map when cloning a prop inside a Vue 3 component in Node/jsdom #6084
Description
When using lodash.cloneDeep to clone a Map inside a prop of a Vue 3 component, the cloned Map is empty in Node/jsdom unit tests, even though the original Map contains entries. In a browser runtime, the same code works correctly and preserves the Map entries.
Minimal reproducible example:
// models/AppTest.ts
import { cloneDeep } from 'lodash';
export class TestObj {
name: string;
constructor(name: string) {
this.name = name;
}
}
export class AppTest {
data: Map<string, TestObj>;
constructor(data: Array<TestObj>) {
this.data = new Map(data.map((p) => [p.name, p]));
}
clone() {
return cloneDeep(this);
}
}<!-- components/AppTestComponent.vue -->
<template>
<div>AppTest.vue</div>
</template>
<script setup lang="ts">
import { AppTest } from './models/AppTest';
const props = defineProps<{ testData: AppTest }>();
// Clone the Map inside the prop
const ttt = props.testData.clone();
console.log(ttt);
</script>// test/AppTestComponent.spec.ts
import { mount } from '@vue/test-utils';
import { AppTest, TestObj } from './models/AppTest';
import AppTestComponent from './components/AppTestComponent.vue';
it('should component be mounted test', () => {
const wrapper = mount(AppTestComponent, {
props: {
testData: new AppTest([new TestObj('name1'), new TestObj('name2')])
}
});
expect(wrapper.exists()).toBeTruthy();
});Observed behavior in Node/jsdom tests:
When mounting the component in Node/jsdom and calling props.testData.clone(), the Map inside the cloned object is empty. The original Map in props.testData contains entries. In a browser runtime, the same code works correctly and the Map is preserved.
Environment:
lodash version: 4.17.21
Node version: v22.22.0
jsdom version: 27.0.0
Vue 3: 3.5.23
Vitest: 3.2.4
Notes:
This happens specifically when cloning a Map via cloneDeep on a prop inside a Vue 3 component.
Using clone-deep instead of lodash.cloneDeep produces the correct clone in Node/jsdom.