Как протестировать асинхронный метод в компоненте

Question

Я пытаюсь проверить свой checkConnection () в моем компоненте vue и не могу найти правильное решение. Первый тест всегда терпит неудачу, а второй всегда проходит ... и я не понимаю, почему. Кто-нибудь может объяснить это мне, пожалуйста?

Мой компонент: viewTopics

  <div>
    {{isConnected}}
  </div>
</template>

<script>
import db from "./firebaseInit";

export default {
  name: "viewTopics",
  data: function() {
    return {
      isConnected: "just a random value"
    };
  },
  created() {
    this.checkConnection();
  },

  methods: {
    checkConnection() {
      var promise1 = new Promise(function(resolve) {
        var connectedRef = db.database().ref(".info/connected");
        connectedRef.on("value", function(snap) {
          if (snap.val() === true) {
            console.log("Connected");
            resolve(snap.val());
          } else {
            console.log("It takes some time to connect");
          }
        });
      });
      var self = this;
      promise1.then(function(value) {
        console.log(value);
        self.isConnected = true;

        //It sets the variable right but the test is not right
      });
    }
  }
};
</script>

<style scoped>
</style>

А вот мой тестовый файл:

import { shallowMount } from "@vue/test-utils";
import viewTopics from "@/components/viewTopics";


const wrapper = shallowMount(viewTopics);

test("This test is always failing ", done => {
  wrapper.vm.$nextTick(() => {
    expect(wrapper.vm.isConnected).toEqual(true);
    done();
  });
});

test("This test is always passing", done => {
  wrapper.vm.$nextTick(() => {
    expect(wrapper.vm.isConnected).toEqual(true);
    done();
  });
});

А вот моя ошибка, когда я запускаю npm run test: unit

Microsoft Windows [Версия 10.0.18362.418] (c) 2019 Microsoft Corporation. Alle Rechte vorbehalten.

C: \ Users \ Philipp> cd ..

C: \ Users> cd ..

C:> cd firebaseforum

C: \ firebaseforum> npm run test: unit

firebaseforum@0.1.0 test: unit C: \ firebaseforum vue-cli-service тест: unit

консоль.log src / components / viewTopics.vue: 31 Для подключения

console.error node_modules / vue / dist / vue.runtime.common.dev.js: 621 требуется некоторое время [Vue warn]: ошибка вnextTick: "Ошибка: ожидается (получено) .toEqual (ожидается) // глубокое равенство

Expected: true
Received: "just a random value""

found in

---> <ViewTopics>
       <Root>

console.error node_modules / vue / dist / vue.runtime.common.dev.js: 1884 JestAssertionError: Ожидаем(получено) .toEqual (ожидается) // глубокое равенство

Expected: true
Received: "just a random value"
    at VueComponent.<anonymous> (C:\firebaseforum\tests\unit\viewTopics.spec.js:8:36)
    at Array.<anonymous> (C:\firebaseforum\node_modules\vue\dist\vue.runtime.common.dev.js:1976:12)
    at flushCallbacks (C:\firebaseforum\node_modules\vue\dist\vue.runtime.common.dev.js:1902:14)
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  matcherResult: {
    actual: 'just a random value',
    expected: true,
    message: [Function],
    name: 'toEqual',
    pass: false
  }
}

console.log src / components / viewTopics.vue: 28 подключено

console.log src / components / viewTopics.vue: 37 true

FAIL tests / unit / viewTopics.spec.js (6.694s) × Этот тест всегда не выполняется (5008 мс) √ Этот тест всегда проходит (1 мс)

● Этот тествсегда терпит неудачу

: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

  4 | const wrapper = shallowMount(viewTopics);
  5 |
> 6 | test("This test is always failing ", done => {
    | ^
  7 |   wrapper.vm.$nextTick(() => {
  8 |     expect(wrapper.vm.isConnected).toEqual(true);
  9 |     done();

  at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
  at Object.<anonymous> (tests/unit/viewTopics.spec.js:6:1)

Наборы тестов: 1 не пройден, 1 всего тестов: 1 не пройден, 1 пройден, 2 всего снимков: 0 всего Время: 7,393 с Запущены все наборы тестов. Jest не завершил работу через одну секунду после завершения тестового прогона.

Обычно это означает, что существуют асинхронные операции, которые не были остановлены в ваших тестах. Для устранения этой проблемы попробуйте запустить Jest с --detectOpenHandles.

Answer 1

Я думаю, что 2-й тест пройден, потому что к моменту его запуска 1-й тест закончен. Если вы добавите только во 2-й тест, я думаю, что он потерпит неудачу.

Я думаю, что основная проблема заключается в том, что вы не ожидаете checkConnection в созданной функции.

new Vue({
  el: '#app',
  name: "viewTopics",
  
  data () {
    return {
      isConnected: "just a random value"
    };
  },
  
  async created () {
    await this.checkConnection();
  },

  methods: {
    async checkConnection() {
      const promise1 = new Promise(function(resolve, reject) {
        const connectedRef = db.database().ref(".info/connected");
        
        connectedRef.on("value", function(snap) {
          if (snap.val() === true) {
            console.log("Connected");
            resolve(snap.val());
          } else {
            console.log("It takes some time to connect");
            reject('error msg')
          }
        });
      });
      
      try {
        const resultFromPromise = await promise1
        this.isConnected = true
        console.log('Connected') 
      } catch (error) {
        console.log(`error message: ${error}`)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ isConnected }}
</div>

Я бы также переместил shallowMount в beforeEach, чтобы новый экземпляр генерировался для каждого теста.

Лично я также нахожупроще писать тесты, используя стиль async / await:

test("This test is always passing", async () => {
  await wrapper.vm.$nextTick()
  expect(wrapper.vm.isConnected).toEqual(true)
})