导航：首页 > 开发技术 >

前端Vue单元测试知识点有哪些

发表于：2025-01-17 作者：千家信息网编辑

千家信息网最后更新 2025年01月17日，本篇内容介绍了"前端Vue单元测试知识点有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、为什

千家信息网最后更新 2025年01月17日前端Vue单元测试知识点有哪些

本篇内容介绍了"前端Vue单元测试知识点有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、为什么需要单元测试

单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等。单元测试的作用有以下：

正确性：可以验证代码的正确性，为上线前做更详细的准备；
自动化：测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；
解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；
驱动开发、指导设计：提前写好的单元测试能够指导开发的API设计，也能够提前发现设计中的问题；
保证重构：测试用例可以多次验证，当需要回归测试时能够节省大量时间。

二、如何写单元测试

测试原则

测试代码时，只考虑测试，不考虑内部实现
数据尽量模拟现实，越靠近现实越好
充分考虑数据的边界条件
对重点、复杂、核心代码，重点测试
测试、功能开发相结合，有利于设计和代码重构

编写步骤

准备阶段：构造参数，创建 spy 等
执行阶段：用构造好的参数执行被测试代码
断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常
清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的 spy 等

三、测试工具

单元测试的工具可分为三类：

测试运行器（Test Runner）：可以模拟各种浏览器环境，自定义配置测试框架和断言库等，如Karma.
测试框架：提供单元测试的功能模块，常见的框架有Jest, mocha, Jasmine, QUnit.
工具库：assert, should.js, expect.js, chai.js等断言库，enzyme渲染库，Istanbul覆盖率计算。

这里，我们将使用 Jest 作为例子。Jest 功能全面，集成了各种工具，且配置简单，甚至零配置直接使用。

四、Jest入门

Jest 官网的描述是这样的：

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

安装

yarn add --dev jest# or# npm install -D jest

简单示例

从官网提供的示例开始，测试一个函数，这个函数完成两个数字的相加，创建一个 sum.js 文件︰

function sum(a, b) {  return a + b;}module.exports = sum;

然后，创建 sum.test.js 文件︰

const sum = require('./sum');test('adds 1 + 2 to equal 3', () => {  expect(sum(1, 2)).toBe(3);});package.json 里增加一个测试任务：{  "scripts": {    "test": "jest"  }}

最后，运行 yarn test 或 npm run test ，Jest将打印下面这个消息：

PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

至此，完成了一个基本的单元测试。

注意：Jest 通过用 JSDOM 在 Node 虚拟浏览器环境模拟真实浏览器，由于是用 js 模拟 DOM, 所以 Jest 无法测试样式。Jest 测试运行器自动设置了 JSDOM。

Jest Cli

你可以通过命令行直接运行Jest(前提是jest已经加到环境变量PATH中，例如通过 yarn global add jest 或 npm install jest --global 安装的 Jest) ，并为其指定各种有用的配置项。如：

jest my-test --notify --config=config.json

Jest 命令有以下常见参数：

--coverage 表示输出单元测试覆盖率，覆盖率文件默认在 tests/unit/coverage/lcov-report/index.html；
--watch 监听模式，与测试用例相关的文件更改时都会重新触发单元测试。

更多选项查看Jest CLI Options.

使用配置文件

使用 jest 命令可生成一个配置文件：

jest --init

过程中会有几个选项供你选择：

√ Would you like to use Typescript for the configuration file? ... no
√ Choose the test environment that will be used for testing » jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... yes
√ Which provider should be used to instrument code for coverage? » babel
√ Automatically clear mock calls and instances between every test? ... yes

配置文件示例（不是基于上述选择）：

// jest.config.jsconst path = require('path')module.exports = {    preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',    rootDir: path.resolve(__dirname, './'),    coverageDirectory: '/tests/unit/coverage',    collectCoverageFrom: [        'src/*.{js,ts,vue}',        'src/directives/*.{js,ts,vue}',        'src/filters/*.{js,ts,vue}',        'src/helper/*.{js,ts,vue}',        'src/views/**/*.{js,ts,vue}',        'src/services/*.{js,ts,vue}'    ]}

使用 Babel

yarn add --dev babel-jest @babel/core @babel/preset-env

可以在工程的根目录下创建一个babel.config.js文件用于配置与你当前Node版本兼容的Babel：

// babel.config.jsmodule.exports = {  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],};

vue-cli 中使用 Jest

在项目中安装 @vue/cli-plugin-unit-jest 插件，即可在 vue-cli 中使用 Jest：

vue add unit-jest# or# yarn add -D @vue/cli-plugin-unit-jest @types/jest

"scripts": {    "test:unit": "vue-cli-service test:unit --coverage"},

@vue/cli-plugin-unit-jest 会在 vue-cli-service 中注入命令 test:unit，默认会识别以下文件：/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) 执行单元测试，即 tests/unit 目录下的 .spec.(js|jsx|ts|tsx) 结尾的文件及目录名为 __tests__ 里的所有 js(x)/ts(x) 文件。

常见示例

判断值相等

toBe() 检查两个基本类型是否精确匹配：

test('two plus two is four', () => {  expect(2 + 2).toBe(4);});

toEqual() 检查对象是否相等：

test('object assignment', () => {  const data = {one: 1};  data['two'] = 2;  expect(data).toEqual({one: 1, two: 2});});

检查类false值

toBeNull 只匹配 null
toBeUndefined 只匹配 undefined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配任何 if 语句为真
toBeFalsy 匹配任何 if 语句为假

示例：

test('null', () => {  const n = null;  expect(n).toBeNull();  expect(n).toBeDefined();  expect(n).not.toBeUndefined();  expect(n).not.toBeTruthy();  expect(n).toBeFalsy();});test('zero', () => {  const z = 0;  expect(z).not.toBeNull();  expect(z).toBeDefined();  expect(z).not.toBeUndefined();  expect(z).not.toBeTruthy();  expect(z).toBeFalsy();});

数字大小比较

test('two plus two', () => {  const value = 2 + 2;  expect(value).toBeGreaterThan(3);  expect(value).toBeGreaterThanOrEqual(3.5);  expect(value).toBeLessThan(5);  expect(value).toBeLessThanOrEqual(4.5);  // toBe and toEqual are equivalent for numbers  expect(value).toBe(4);  expect(value).toEqual(4);});

对于比较浮点数相等，使用 toBeCloseTo 而不是 toEqual，因为你不希望测试取决于一个小小的舍入误差。

test('两个浮点数字相加', () => {  const value = 0.1 + 0.2;  //expect(value).toBe(0.3);           这句会报错，因为浮点数有舍入误差  expect(value).toBeCloseTo(0.3); // 这句可以运行});

字符串比较

可以使用正则表达式检查：

test('there is no I in team', () => {  expect('team').not.toMatch(/I/);});test('but there is a "stop" in Christoph', () => {  expect('Christoph').toMatch(/stop/);});

数组和类数组

你可以通过 toContain 来检查一个数组或可迭代对象是否包含某个特定项：

const shoppingList = [  'diapers',  'kleenex',  'trash bags',  'paper towels',  'milk',];test('the shopping list has milk on it', () => {  expect(shoppingList).toContain('milk');  expect(new Set(shoppingList)).toContain('milk');});

异常

还可以用来检查一个函数是否抛出异常：

function compileAndroidCode() {  throw new Error('you are using the wrong JDK');}test('compiling android goes as expected', () => {  expect(() => compileAndroidCode()).toThrow();  expect(() => compileAndroidCode()).toThrow(Error);  // You can also use the exact error message or a regexp  expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');  expect(() => compileAndroidCode()).toThrow(/JDK/);});

更多使用方法参考API文档.

只执行当前test

可使用 only() 方法表示只执行这个test，减少不必要的重复测试：

test.only('it is raining', () => {  expect(inchesOfRain()).toBeGreaterThan(0);});test('it is not snowing', () => {  expect(inchesOfSnow()).toBe(0);});

测试异步代码

回调函数

例如，假设您有一个 fetchData(callback) 函数，获取一些数据并在完成时调用 callback(data)。你期望返回的数据是一个字符串 'peanut butter'：

test('the data is peanut butter', done => {  function callback(data) {    try {      expect(data).toBe('peanut butter');      done();    } catch (error) {      done(error);    }  }  fetchData(callback);});

使用 done() 是为了标识这个 test 执行完毕，如果没有这个 done()，在 test 执行完毕后，我们的单元测试就结束了，这不符合我们的预期，因为callback还未调用，单元测试还没走完。若 done() 函数从未被调用，将会提示超时错误。

若 expect 执行失败，它会抛出一个错误，后面的 done() 不再执行。若我们想知道测试用例为何失败，我们必须将 expect 放入 try 中，将 error 传递给 catch 中的 done 函数。否则，最后控制台将显示一个超时错误失败，不能显示我们在 expect(data) 中接收的值。

Promises

还是使用上面的例子：

test('the data is peanut butter', () => {  return fetchData().then(data => {    expect(data).toBe('peanut butter');  });});

一定不要忘记 return 结果，这样才能确保测试和功能同时结束。
如果是期望 Promise 被 reject, 则使用 catch 方法：

test('the fetch fails with an error', () => {  expect.assertions(1);  return fetchData().catch(e => expect(e).toMatch('error'));});

还可以使用 resolves 和 rejects 匹配器：

test('the data is peanut butter', () => {  return expect(fetchData()).resolves.toBe('peanut butter');});test('the fetch fails with an error', () => {  return expect(fetchData()).rejects.toMatch('error');});

Async/Await

test('the data is peanut butter', async () => {  const data = await fetchData();  expect(data).toBe('peanut butter');});test('the fetch fails with an error', async () => {  expect.assertions(1);  try {    await fetchData();  } catch (e) {    expect(e).toMatch('error');  }});

async/await 还可以和 resolves()/rejects() 结合使用：

test('the data is peanut butter', async () => {  await expect(fetchData()).resolves.toBe('peanut butter');});test('the fetch fails with an error', async () => {  await expect(fetchData()).rejects.toMatch('error');});

安装和拆卸

测试前和测试后

在某些情况下，我们开始测试前需要做一些准备工作，然后在测试完成后，要做一些清理工作，可以使用 beforeEach 和 afterEach。
例如，我们在每个test前需要初始化一些城市数据，test结束后要清理掉：

beforeEach(() => {  initializeCityDatabase();});afterEach(() => {  clearCityDatabase();});test('city database has Vienna', () => {  expect(isCity('Vienna')).toBeTruthy();});test('city database has San Juan', () => {  expect(isCity('San Juan')).toBeTruthy();});

类似的还有 beforeAll 和 afterAll，在当前spec测试文件开始前和结束后的单次执行。

测试用例分组

默认情况下，before 和 after 的块可以应用到文件中的每个测试。此外可以通过 describe 块来将测试分组。当 before 和 after 的块在 describe 块内部时，则其只适用于该 describe 块内的测试。

// Applies to all tests in this filebeforeEach(() => {  return initializeCityDatabase();});test('city database has Vienna', () => {  expect(isCity('Vienna')).toBeTruthy();});test('city database has San Juan', () => {  expect(isCity('San Juan')).toBeTruthy();});describe('matching cities to foods', () => {  // Applies only to tests in this describe block  beforeEach(() => {    return initializeFoodDatabase();  });  test('Vienna <3 sausage', () => {    expect(isValidCityFoodPair('Vienna', 'Wiener Würstchen')).toBe(true);  });  test('San Juan <3 plantains', () => {    expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);  });});

执行顺序

由于使用了 describe 进行分组，于是就有了嵌套的作用域，各生命周期的执行顺序如下：

外层作用域的 before 比内层的先执行，而 after 则相反；
同一层级 beforeAll 比 beforeEach 先执行，after 则相反；

beforeAll(() => console.log('1 - beforeAll'));afterAll(() => console.log('1 - afterAll'));beforeEach(() => console.log('1 - beforeEach'));afterEach(() => console.log('1 - afterEach'));test('', () => console.log('1 - test'));describe('Scoped / Nested block', () => {  beforeAll(() => console.log('2 - beforeAll'));  afterAll(() => console.log('2 - afterAll'));  beforeEach(() => console.log('2 - beforeEach'));  afterEach(() => console.log('2 - afterEach'));  test('', () => console.log('2 - test'));});// 1 - beforeAll// 1 - beforeEach// 1 - test// 1 - afterEach// 2 - beforeAll// 1 - beforeEach// 2 - beforeEach// 2 - test// 2 - afterEach// 1 - afterEach// 2 - afterAll// 1 - afterAll

mock 函数

jest.fn() 可以用来生成一个 mock 函数，jest 可以捕获这个函数的调用、this、返回值等，这在测试回调函数时非常有用。

测试mock

假设我们要测试函数 forEach 的内部实现，这个函数为传入的数组中的每个元素调用一次回调函数。

function forEach(items, callback) {  for (let index = 0; index < items.length; index++) {    callback(items[index]);  }}

为了测试此函数，我们可以使用一个 mock 函数，然后检查 mock 函数的状态来确保回调函数如期调用。

const mockCallback = jest.fn(x => 42 + x);forEach([0, 1], mockCallback);// 此 mock 函数被调用了两次expect(mockCallback.mock.calls.length).toBe(2);// 第一次调用函数时的第一个参数是 0expect(mockCallback.mock.calls[0][0]).toBe(0);// 第二次调用函数时的第一个参数是 1expect(mockCallback.mock.calls[1][0]).toBe(1);// 第一次函数调用的返回值是 42expect(mockCallback.mock.results[0].value).toBe(42);

mock的返回值

Mock 函数也可以用于在测试期间将测试值注入代码︰

const myMock = jest.fn();console.log(myMock());// > undefinedmyMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);console.log(myMock(), myMock(), myMock(), myMock());// > 10, 'x', true, true

模拟接口返回

假定有个从 API 获取用户的类。该类用 axios 调用 API 然后返回 data，其中包含所有用户的属性：

// users.jsimport axios from 'axios';class Users {  static all() {    return axios.get('/users.json').then(resp => resp.data);  }}export default Users;

现在，为测试该方法而不实际调用 API (使测试缓慢与脆弱)，我们可以用 jest.mock(...) 函数自动模拟 axios 模块。一旦模拟模块，我们可为 .get 提供一个 mockResolvedValue ，它会返回假数据用于测试。

// users.test.jsimport axios from 'axios';import Users from './users';jest.mock('axios');test('should fetch users', () => {  const users = [{name: 'Bob'}];  const resp = {data: users};  axios.get.mockResolvedValue(resp);  // or you could use the following depending on your use case:  // axios.get.mockImplementation(() => Promise.resolve(resp))  return Users.all().then(data => expect(data).toEqual(users));});

mock函数的匹配器

有了mock功能，就可以给函数增加一些自定义匹配器：

// The mock function was called at least onceexpect(mockFunc).toHaveBeenCalled();// The mock function was called at least once with the specified argsexpect(mockFunc).toHaveBeenCalledWith(arg1, arg2);// The last call to the mock function was called with the specified argsexpect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);// All calls and the name of the mock is written as a snapshotexpect(mockFunc).toMatchSnapshot();也可以自己通过原生的匹配器模拟，下方的代码与上方的等价：// The mock function was called at least onceexpect(mockFunc.mock.calls.length).toBeGreaterThan(0);// The mock function was called at least once with the specified argsexpect(mockFunc.mock.calls).toContainEqual([arg1, arg2]);// The last call to the mock function was called with the specified argsexpect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([  arg1,  arg2,]);// The first arg of the last call to the mock function was `42`// (note that there is no sugar helper for this specific of an assertion)expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);// A snapshot will check that a mock was invoked the same number of times,// in the same order, with the same arguments.expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);expect(mockFunc.getMockName()).toBe('a mock name');

五、Vue Test Utils

官网是这样介绍 Vue Test Utils 的：

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

以下的例子均基于 vue-cli 脚手架，包括 webpack/babel/vue-loader

测试单文件组件

Vue 的单文件组件在它们运行于 Node 或浏览器之前是需要预编译的。我们推荐两种方式完成编译：通过一个 Jest 预编译器，或直接使用 webpack。这里我们选用 Jest 的方式。

yarn add -D jest @vue/test-utils vue-jest

vue-jest 目前并不支持 vue-loader 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性，你需要用 Mocha 取代 Jest 来运行你的测试，同时用 webpack 来编译你的组件。

处理 webpack 别名

vue-cli 中默认使用 @ 作为 /src 的别名，在 Jest 也需要单独配置：

// jest.config.jsmodule.exports = {    moduleNameMapper: {        '^@/(.*)$': '/src/$1'    }}

挂载组件

被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。

// test.js// 从测试实用工具集中导入 `mount()` 方法// 同时导入你要测试的组件import { mount } from '@vue/test-utils'import Counter from './counter'// 现在挂载组件，你便得到了这个包裹器const wrapper = mount(Counter)// 你可以通过 `wrapper.vm` 访问实际的 Vue 实例const vm = wrapper.vm// 在控制台将其记录下来即可深度审阅包裹器// 我们对 Vue Test Utils 的探索也由此开始console.log(wrapper)

在挂载的同时，可以设置组件的各种属性：

const wrapper = mount(Counter, {    localVue,    data() {        return {            bar: 'my-override'        }    },    propsData: {        msg: 'abc'    },    parentComponent: Foo, // 指定父组件    provide: {        foo() {            return 'fooValue'        }    }})

测试组件渲染出来的 HTML

通过包裹器wrapper的相关方法，判断组件渲染出来的HTML是否符合预期。

import { mount } from '@vue/test-utils'import Counter from './counter'describe('Counter', () => {  // 现在挂载组件，你便得到了这个包裹器  const wrapper = mount(Counter)  test('renders the correct markup', () => {    expect(wrapper.html()).toContain('0')  })  // 也便于检查已存在的元素  test('has a button', () => {    expect(wrapper.contains('button')).toBe(true)  })})

模拟用户操作

当用户点击按钮的时候，我们的计数器应该递增。为了模拟这一行为，我们首先需要通过 wrapper.find() 定位该按钮，此方法返回一个该按钮元素的包裹器。然后我们能够通过对该按钮包裹器调用 .trigger() 来模拟点击。

it('button click should increment the count', () => {  expect(wrapper.vm.count).toBe(0)  const button = wrapper.find('button')  button.trigger('click')  expect(wrapper.vm.count).toBe(1)})

为了测试计数器中的文本是否已经更新，我们需要了解 nextTick。任何导致操作 DOM 的改变都应该在断言之前 await nextTick 函数。

it('button click should increment the count text', async () => {  expect(wrapper.text()).toContain('0')  const button = wrapper.find('button')  await button.trigger('click')  expect(wrapper.text()).toContain('1')})

组件的事件

每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录。

wrapper.vm.$emit('foo')wrapper.vm.$emit('foo', 123)/*`wrapper.emitted()` 返回以下对象：{  foo: [[], [123]]}*/

然后你可以基于这些数据来设置断言：

// 断言事件已经被触发expect(wrapper.emitted().foo).toBeTruthy()// 断言事件的数量expect(wrapper.emitted().foo.length).toBe(2)// 断言事件的有效数据expect(wrapper.emitted().foo[1]).toEqual([123])

还可以触发子组件的事件：

import { mount } from '@vue/test-utils'import ParentComponent from '@/components/ParentComponent'import ChildComponent from '@/components/ChildComponent'describe('ParentComponent', () => {  test("displays 'Emitted!' when custom event is emitted", () => {    const wrapper = mount(ParentComponent)    wrapper.find(ChildComponent).vm.$emit('custom')    expect(wrapper.html()).toContain('Emitted!')  })})

组件的data

可以使用 setData() 或 setProps 设置组件的状态数据：

it('manipulates state', async () => {  await wrapper.setData({ count: 10 })  await wrapper.setProps({ foo: 'bar' })})

模拟vue实例方法

由于Vue Test Utils 的 setMethods() 即将废弃，推荐使用 jest.spyOn() 方法来模拟Vue实例方法：

import MyComponent from '@/components/MyComponent.vue'describe('MyComponent', () => {  it('click does something', async () => {    const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')    await shallowMount(MyComponent).find('button').trigger('click')    expect(mockMethod).toHaveBeenCalled()  })})

全局插件

如果你需要安装所有 test 都使用的全局插件，可以使用 setupFiles，先在 jest.config.js 中指定 setup 文件：

// jest.config.jsmodule.exports = {    setupFiles: ['/tests/unit/setup.js']}

然后在 setup.js 使用：

// setup.jsimport Vue from 'vue'// 以下全局注册的插件在jest中不生效，必须使用localVueimport ElementUI from 'element-ui'import VueClipboard from 'vue-clipboard2'Vue.use(ElementUI)Vue.use(VueClipboard)Vue.config.productionTip = false

当你只是想在某些 test 中安装全局插件时，可以使用 localVue，这会创建一个临时的Vue实例：

import { createLocalVue, mount } from '@vue/test-utils'// 创建一个扩展的 `Vue` 构造函数const localVue = createLocalVue()// 正常安装插件localVue.use(MyPlugin)// 在挂载选项中传入 `localVue`mount(Component, {  localVue})

测试watch

假如我们有一个这样的watcher:

watch: {  inputValue(newVal, oldVal) {    if (newVal.trim().length && newVal !== oldVal) {      console.log(newVal)    }  }}

由于watch的调用是异步的，并且在下一个tick才会调用，因此可以通过检测watcher里的方法是否被调用来检测watch是否生效，使用 jest.spyOn() 方法：

describe('Form.test.js', () => {  let cmp  ...  describe('Watchers - inputValue', () => {    let spy    beforeAll(() => {      spy = jest.spyOn(console, 'log')    })    afterEach(() => {      spy.mockClear()    })    it('is not called if value is empty (trimmed)', () => {    })    it('is not called if values are the same', () => {    })    it('is called with the new value in other cases', () => {    })  })})it("is called with the new value in other cases", done => {  cmp.vm.inputValue = "foo";  cmp.vm.$nextTick(() => {    expect(spy).toBeCalled();    done();  });});

第三方插件

当我们使用一些第三方插件的时候，一般不需要关心其内部的实现，不需要测试其组件，可以使用 shallowMount 代替 mount, 减少不必要的渲染：

import { shallowMount } from '@vue/test-utils'const wrapper = shallowMount(Component)wrapper.vm // 挂载的 Vue 实例还可以通过 findAllComponents 来查找第三方组件：import { Select } from 'element-ui'test('选中总部时不显示分部和网点', async () => {    await wrapper.setProps({        value: {            clusterType: 'head-quarter-sit',            branch: '',            site: ''        }    })    // 总部不显示分部和网点    expect(wrapper.findAllComponents(Select)).toHaveLength(1)})