title: Why is my Jest mockReturnValue function not invoking? (Using Vue3 and Vue-Test-Utils-Next)
body: <p>I am using Vue's composition API and importing a module into a single-file component. I assign the return value of the module to a variable within the <em>setup</em> method and then return the value so the template can consume the variable. The component renders one <em>ItemComponent</em> for each item recieved from the imported module.</p>
  <p>The actual application is working fine and renders the correct amount of items. My test, on the other hand, is failing, and it appears the <strong>mockReturnValue</strong> function is not getting invoked.</p>
  <p><strong>Single-File Component Code</strong></p>
  <pre><code>&lt;template&gt;
    &lt;ul class=&quot;ItemList&quot;&gt;
      &lt;ItemComponent
        v-for=&quot;item in items&quot;
        :key=&quot;item.id&quot;
        :item=&quot;item&quot; /&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue';
  import ItemComponent from '@/components/ItemComponent.vue';
  
  import module from '@/module';
  
  export default defineComponent({
    components: {
     ItemComponent,
    },
    setup() {
      const { items } = module.property // note destructuring here
      console.log(items);
      return { items };
    },
  });
  &lt;/script&gt;
  </code></pre>
  <p><strong>mock-module.ts</strong></p>
  <pre><code>export const property = {
    items: jest.fn(),
  };
  </code></pre>
  <p><strong>(mock) index.ts</strong></p>
  <pre><code>import {module} from './modules/mock-module';
  
  export default {module}
  </code></pre>
  <p><strong>Test file</strong></p>
  <pre><code>  import module from '@/modules/__mocks__/index.ts';
    jest.mock('../../../src/modules/index.ts');
  
    it('should render an ItemComponent for each item', () =&gt; {
      module.property.items.mockReturnValue([{}, {}, {}]); // Doesn't seem to get invoked?
      const wrapper = mount(MyComponent, { shallow: true });
      expect(wrapper.findAllComponents('item-component-stub').length)
        .toBe(3);
    });
  </code></pre>
  <p><strong>Result</strong></p>
  <p>The test fails and finds 0 items, and when I <code>console.log(items)</code> from within the single-file component, I get the following:</p>
  <pre><code> [Function: mockConstructor] {
          _isMockFunction: true,
          getMockImplementation: [Function (anonymous)],
          mock: [Getter/Setter],
          mockClear: [Function (anonymous)],
          mockReset: [Function (anonymous)],
          mockRestore: [Function (anonymous)],
          mockReturnValueOnce: [Function (anonymous)],
          mockResolvedValueOnce: [Function (anonymous)],
          mockRejectedValueOnce: [Function (anonymous)],
          mockReturnValue: [Function (anonymous)],
          mockResolvedValue: [Function (anonymous)],
          mockRejectedValue: [Function (anonymous)],
          mockImplementationOnce: [Function (anonymous)],
          mockImplementation: [Function (anonymous)],
          mockReturnThis: [Function (anonymous)],
          mockName: [Function (anonymous)],
          getMockName: [Function (anonymous)]
        }
  </code></pre>
  <p>This indicates (to me) that the test is using the mock file, but for some reason, is not invoking the <code>.mockReturnValue()</code> call. If I simply change the mock dependency from jest.fn() to some actual value, the console.log statement returns that value. Of course, I don't want to do that, as I need to be able to set different return values in different tests.</p>
  <p><strong>What I Expect</strong>
  I would expect when I call <code>module.property.items.mockReturnValue([{}, {}, {}])</code> that the console.log would print an array with three empty objects, and the test would pass with 3/3 ItemComponents rendered.</p>