在 span vue test utils 中获取文本 - Javascript

在 Vue Test Utils 中，要获取 span 元素中的文本内容，有以下两种方式。

1. 使用 text() 方法

可以使用 text() 方法来获取元素中的文本内容。

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

describe('MyComponent', () => {
  it('renders span element with text content', () => {
    const wrapper = shallowMount(MyComponent);
    const spanText = wrapper.find('span').text();
    expect(spanText).toMatch('hello world');
  });
});

在上述例子中，我们首先使用 wrapper.find('span') 获取了 span 元素的引用，然后使用 text() 方法来获取其文本内容。

2. 使用 html() 方法

除了 text() 方法，我们还可以使用 html() 方法来获取元素中的 HTML 内容。

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

describe('MyComponent', () => {
  it('renders span element with text content', () => {
    const wrapper = shallowMount(MyComponent);
    const spanHtml = wrapper.find('span').html();
    expect(spanHtml).toMatch('<span>hello world</span>');
  });
});

在上述例子中，我们使用 html() 方法获取了 span 元素的 HTML 内容，然后使用 Jest 的 toMatch() 方法来验证其内容是否为 <span>hello world</span>。

总之，我们可以使用 text() 或 html() 方法来获取元素中的文本或 HTML 内容，从而验证组件的渲染结果是否符合预期。