Использование Vue test-utils и jest для проверки значения указанного элемента ввода c - PullRequest
Новая
       123

Использование Vue test-utils и jest для проверки значения указанного элемента ввода c

0 голосов
/ 05 августа 2020

Используя Vue test-utils, мне нужно проверить значение заданного элемента ввода c, который заполняется через свойство. Я выяснил, как найти элемент, используя его идентификатор: 

  it("Address should render Street 1", () => {
     const street1 = wrapper.find('#street1')              // this works
     expect(street1).toEqual('223 Some Street Rd')         // nope
     expect(street1.text()).toEqual('223 Some Street Rd')  // seemed good at the time
     expect(street1.value()).toEqual('223 Some Street Rd') // grasping at straws - no love 
  });

, но я не смог понять, как получить доступ к «значению» ввода.

Любая помощь приветствуется заранее

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Я предполагаю, что ваш компонент выглядит примерно так: 

 <input id="street1" type="text" v-model="street1" >

, тогда вы можете попробовать 

   expect(street1.element.value).toEqual('223 Some Street Rd');

Например 

import { mount } from "@vue/test-utils";
import Input from "./Input";

describe("Input", () => {
  const mountInput = (propsData = {}) => {
    return mount(Input, {
      propsData
    });
  };

  it("Address should render Street 1", () => {
    const wrapper = mountInput();
    const street1 = wrapper.find('#street1') 
    expect(street1.element.value).toEqual('223 Some Street Rd');
  });
});
0 голосов
/ 05 августа 2020

Согласно документации vue -test-utils , вы можете добавлять свойства к компоненту, используя propsData или setProps 

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo, {
  propsData: {
    myProp: '223 Some Street Rd' // I am assuming the prop's value is '223 Some Street Rd'
  }
})
const street1 = wrapper.find('#street1') 
expect(street1.text()).toBe('223 Some Street Rd'); //.toEqual should also work

Или альтернативно 

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

const wrapper = mount(Foo);
wrapper.setProps({ myProp: '223 Some Street Rd' }) // I am assuming the prop's value is '223 Some Street Rd'
const street1 = wrapper.find('#street1') 
expect(street1.text()).toBe('223 Some Street Rd'); //.toEqual should also work
...