Блог

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

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

Codesandbox

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

src/components/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/components/__tests__/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
    );
  });
});