Question

我的组件模板正确

    <v-radio-group row :mandatory="false" v-model="gender" name="gender">
      <v-radio :label="genderLabels.f" value="f" name="female"></v-radio>
      <v-radio :label="genderLabels.m" value="m" name="male"></v-radio>
    </v-radio-group>

genderLabels是在mount（）上正确设置的

 mounted() {
    this.contactLang = this.language;
    // eslint-disable-next-line
    this.customDico = this.$validator.dictionary.container[this.language].custom;
    this.genderLabels.f = this.customDico.gender.f;
    this.genderLabels.m = this.customDico.gender.m;
  }

执行喂纱时没有问题，可以看到无线电标签属性。

但是当我测试它时，它们不存在...

ContactForm.spec.js

 ....
    wrapper = mount(ContactForm, options);
    console.log(wrapper.vm.genderLabels.f);
    const radio = wrapper.find('[name="female"]');
    console.log("radio: ", radio.html())
    // then
    console.log("radioLabels attributes: ", radio.attributes());
    expect(radio.attributes("label")).toEqual("Mrs");

consolelog

    wrapper = mount(ContactForm, options);
    console.log(wrapper.vm.genderLabels.f);
    const radio = wrapper.find('[name="female"]');
    console.log("radio: ", radio.html())
    // then
    console.log("radioLabels attributes: ", radio.attributes());
    expect(radio.attributes("label")).toEqual("Mrs");

  ● ContactForm.vue › uses the default form language

    expect(received).toEqual(expected)

    Expected value to equal:
      "Mrs"
    Received:
      undefined

    Difference:

      Comparing two different types of values. Expected string but received undefined.

      110 |     // then
      111 |     console.log("radioLabels attributes: ", radio.attributes());
    > 112 |     expect(radio.attributes("label")).toEqual("Mrs");
          |                                       ^
      113 |   });
      114 | /*
      115 |   it("change the form language when locale changed in store", async () => {

      at Object.toEqual (tests/unit/ContactForm.spec.js:112:39)

  console.log tests/unit/ContactForm.spec.js:107
    Mrs

  console.log tests/unit/ContactForm.spec.js:109
    radio:  <input aria-checked="false" role="radio" type="radio" value="f" name="female">

  console.log tests/unit/ContactForm.spec.js:111
    radioLabels attributes:  { 'aria-checked': 'false',
      role: 'radio',
      type: 'radio',
      value: 'f',
      name: 'female' }

Test Suites: 1 failed, 1 total

我的测试代码在哪里出错？

感谢您的反馈

====更新1 ====

使用shallowMount，我在console.log（wrapper.html（））;中添加了以下内容：：

<vradiogroup-stub column="true" height="auto" name="gender" row="true" value="f">
<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="f" name="female"></vradio-stub> 
<vradio-stub color="accent" onicon="$vuetify.icons.radioOn" officon="$vuetify.icons.radioOff" value="m" name="male"></vradio-stub>
</vradiogroup-stub>

使用mount（），我在wrapper.html（）中得到关注

        <input aria-checked="false" role="radio" type="radio" value="f" name="female">
        <div role="radiogroup" class="v-input--radio-group__input">

          <div class="v-radio theme--light">
          <div class="v-input--selection-controls__input">
          <input aria-checked="false" role="radio" type="radio" value="f" name="female">
          <div class="v-input--selection-controls__ripple">
          </div><i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i></div>
          <label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>
          </div> 

          <div class="v-radio theme--light">
          <div class="v-input--selection-controls__input">
          <input aria-checked="false" role="radio" type="radio" value="m" name="male">
          <div class="v-input--selection-controls__ripple">
          </div>
          <i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>
          </div>
          <label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: relative;"></label>
          </div>

        </div>

这很奇怪...标签中没有文字...

Answer 1

已解决...

我还不明白为什么...但是我需要将测试设置为异步：然后我可以将label属性设置为正确的值...

it("uses the default form language", async () => {
...
wrapper = shallowMount(ContactForm, options);
await wrapper.vm.$nextTick();
const radioInput = wrapper.find('[name="female"]');
console.log(radioInput.html());

console.log tests / unit / ContactForm.spec.js：110

<vradio-stub color="accent" onicon="$vuetify.icons.radioOn"
 officon="$vuetify.icons.radioOff" 
 value="f" name="female" label="Mrs"></vradio-stub>

Vue.js vuetify测试实用程序测试：单元失败

1 个答案: