Блог

Я следую руководству по Pluralsight, где я начинаю изучать модульное тестирование в Vue и Jest. Я очень новичок как в Vue, так и в Jest. Но эти тесты очень просты и должны проходить, когда они явно не проходят.

Это компонент HiChild, который мне нужно протестировать. У него есть свойство message и переменная error, которая изменяется, когда свойство message длиннее или меньше 3.

 <template>
  <div>
    <h2>The child says {{ message }}</h2>
    <div class="error" v-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  computed: {
    error() {
      return this.message.trim().length < 3
        ? " The child can say bigger words than that!"
        : "";
    },
  },
};

 

Вот мои модульные тесты, в которых я тестирую компонент HiChild. Первая тестовая попытка — проверить, правильно ли вставлено сообщение в компонент. Второй тест проверяет, изменяется ли переменная ошибки в компоненте, когда компоненту присваивается строка, которая длиннее, а строка короче 3.

 import { shallowMount } from '@vue/test-utils';
import HiChild from '@/components/HiChild.vue';

describe('HiChild.vue', () => {
  it('renders props.msg when passed', () => {
    const message = 'hello there!';
    const wrapper = shallowMount(HiChild, {
      propsData: { message },
    });
    expect(wrapper.text()).toMatch(message);
  });
});

describe('HiChild.vue', () => {
  it('renders error when message is too short', () => {
    const wrapper = shallowMount(HiChild, {
      propsData: { message: 'hi' },
    });
    expect(wrapper.find('.error').exists()).toBe(true);

    wrapper.setProps({ message: 'good day to you!' });
    expect(wrapper.find('.error').exists()).toBe(false);
  });
});
 

Это результат обоих тестов:

Найдено решение. У компонента не было a </script> в конце.