Hello, nihao!

[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.

Situation

[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.

Solution

import MessageContainer from '@/components/MessageContainer'
import { mount } from '@vue/test-utils'

// 1. cause
const MessageDisplayMock0 = '<p data-testid="message">Hello from the db!</p>'
// 2. solution 1
const MessageDisplayMock1 = {
  template: '<p data-testid="message">Hello from the db!</p>'
}
// 2. solution 2
const MessageDisplayMock2 = {
  render(h) {
    return h(
      'div',
      { attrs: { 'data-testid': 'message' } },
      'Hello from the db!'
    )
  }
}

describe('MessageContainer', () => {
  it('Wraps the MessageDisplay component', () => {
    const wrapper = mount(MessageContainer, {
      stubs: {
        //
        // 3. usage
        //
        MessageDisplay: MessageDisplayMock0
        // MessageDisplay: MessageDisplayMock1
        // MessageDisplay: MessageDisplayMock2
      }
    })
    const message = wrapper.find('[data-testid="message"]').element.textContent
    expect(message).toEqual('Hello from the db!')
  })
})