Hey there! I’ve been in your exact spot before—working with nested Vue components and trying to wrap my head around Jest’s shallow rendering behavior. Let’s walk through what’s going on and how to tackle it effectively.

First off, let’s clarify: when you use shallowMount (the shallow rendering method from Vue Test Utils), it’s intentionally designed not to render child components. The whole point is to isolate your parent component during testing, so you don’t have to worry about dependencies or issues from child components affecting your parent component tests. That’s why your child component isn’t loading—it’s expected behavior!

But if you need to test interactions between the parent and child (or verify the parent is passing props correctly, handling child events, etc.), here are the most common approaches:

1. Stub the Child Component Manually #

You can create a custom stub for your child component to simulate its structure, methods, or props. This lets you test the parent’s logic without rendering the actual child.

Here’s a concrete example:

import { shallowMount } from '@vue/test-utils';
import ParentComponent from '@/components/ParentComponent.vue';
import ChildComponent from '@/components/ChildComponent.vue';

describe('ParentComponent', () => {
  it('triggers the child component’s method when a button is clicked', () => {
    // Create a stub with a mock method
    const childStub = {
      template: '<div class="stubbed-child"></div>',
      methods: {
        performAction: jest.fn()
      },
      // Add any props your parent passes to the child
      props: ['childProp']
    };

    const wrapper = shallowMount(ParentComponent, {
      stubs: {
        ChildComponent: childStub
      },
      // Pass props to the parent if needed
      props: {
        parentData: 'test value'
      }
    });

    // Trigger the button that should call the child's method
    wrapper.find('.trigger-child-action').trigger('click');
    
    // Verify the child's mock method was called
    expect(wrapper.vm.$refs.child.performAction).toHaveBeenCalled();
  });
});

2. Use mount Instead of shallowMount (For Integration Testing) #

If you actually need the full child component to render (for integration-style tests where you want to check parent-child rendering together), swap shallowMount with mount. Just keep in mind this loses the isolation of shallow rendering—any issues in the child will affect your parent component test.

Example:

import { mount } from '@vue/test-utils';
import ParentComponent from '@/components/ParentComponent.vue';

describe('ParentComponent', () => {
  it('renders the child component correctly', () => {
    const wrapper = mount(ParentComponent);
    
    // Check if the child component exists in the DOM
    expect(wrapper.findComponent({ name: 'ChildComponent' }).exists()).toBe(true);
    
    // Verify the parent passes the correct props to the child
    expect(wrapper.findComponent({ name: 'ChildComponent' }).props('childProp')).toBe('expected value');
  });
});

3. Test Parent-Child Interactions via Events and Props #

Even with shallow rendering, you can test how the parent communicates with the child:

• Props: Verify the parent passes the right values to the child stub.
• Events: Simulate the child emitting an event and check if the parent handles it correctly.

Example:

import { shallowMount } from '@vue/test-utils';
import ParentComponent from '@/components/ParentComponent.vue';

describe('ParentComponent', () => {
  it('passes the correct props to the child component', () => {
    const mockParentData = 'sample data';
    const wrapper = shallowMount(ParentComponent, {
      props: {
        parentData: mockParentData
      }
    });

    const childStub = wrapper.findComponent({ name: 'ChildComponent' });
    expect(childStub.props('childProp')).toBe(mockParentData);
  });

  it('handles the child’s event properly', () => {
    const wrapper = shallowMount(ParentComponent);
    // Mock the parent's event handler method
    wrapper.vm.handleChildEvent = jest.fn();

    // Simulate the child emitting an event
    wrapper.findComponent({ name: 'ChildComponent' }).vm.$emit('childEvent', 'event payload');

    // Check if the parent's handler was called with the right payload
    expect(wrapper.vm.handleChildEvent).toHaveBeenCalledWith('event payload');
  });
});

Shallow rendering’s "no child component loading" is a feature, not a bug—it helps you focus solely on testing the parent component’s logic. Choose the approach above based on what you need to test: stubbing for isolation, mount for integration, or event/props checks for communication.

内容的提问来源于stack exchange，提问作者Frontend developer