Как проверить привязку ввода формы Vue.js - PullRequest
1 голос
/ 22 апреля 2019

Я хочу проверить, имеет ли компонент, в котором для ввода формы установлено значение, правильно переданное через реквизиты с помощью vue-testing-library .

Я пытался component.vm.value, а также проверял атрибут DOM value, но он не работал.

Codesandbox

Как я могу проверить, имеет ли datepicker-input значение 2019/01/01?

SRC / компоненты / Datepicker.vue

<template>
  <div data-testid="datepicker"
    class="columns"
  >
    <div class="control">
      <input :value="value"
        type="text"
        data-testid="datepicker-input"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Datepicker',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    computedValue () {
      return this.value
    }
  }
}
</script>

SRC / компоненты / __ тесты __ / Datepicker.js

import "jest-dom/extend-expect";
import { render, cleanup } from "vue-testing-library";
import Datepicker from "../Datepicker";

describe("Datepicker.vue", () => {
  let component;
  let props = {
    value: "2019/01/01"
  };

  beforeEach(() => {
    component = render(Datepicker, {
      propsData: props
    });
  });

  afterEach(cleanup);

  it("should contain specified props", () => {
    // Cannot read property 'value' of undefined
    // expect(component.vm.value).toBe(props.value)
    expect(component.getByTestId("datepicker-input")).toHaveAttribute(
      "value",
      props.value
    );
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...