Jest & Vue Testing UseHead inside Computed

Question

Trying to test UseHead in my component that's inside of a computed but it is throwing the following error Cannot read properties of undefined (reading 'name')

Vue Component has

useHead(computed(() => ({
  title: data?.title,
})));

Jest Test

import { useHead } from '@unhead/vue';

jest.mock('@unhead/vue');

const expectedArguments = { title: 'Test Title' };

describe('Page Meta Tests', () => {
  it('should display meta title', async () => {
     const wrapper = await mountComponent();
     expect(useHead).toHaveBeenCalledWith(expectedArguments);
  });
});

what line of code is the error on? there is no name in the code shown — yoduh
– yoduh, Commented May 18, 2024 at 0:08
Can you share the way you mocked @unhead/vue? Also the we don't know what mountComponent function looks like, you might have to attach the component to the virtual dom — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented May 22, 2024 at 7:54

Andrey Nelubin · Accepted Answer · 2024-06-07 11:55:06Z

0

You should not mock useHead just to test if it has been called. Just test the actual behavior of a testing component.

it('should display meta title', async () => {
     const wrapper = await mountComponent();
     expect(document.title).toBe(expectedTitle);
  });

answered Jun 7, 2024 at 11:55

Andrey Nelubin

3,3081 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jest & Vue Testing UseHead inside Computed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related