Как выполнить модульное тестирование компонентов в vue.js, которые зависят от внешних зависимостей?

Question

Я пытаюсь написать модульный тест (с шуткой), который утверждает, что данные помещаются в job_execs. Две проблемы, с которыми я сталкиваюсь, - это издевательство над конечной точкой API и, если вообще возможно, смоделировать this.$route.params.tool в модульном тесте.

Итак, главный вопрос в том, могу ли я написать тест с компонентом ниже? Я знаю, что должна быть возможность смоделировать конечную точку API (до сих пор не выяснил, как это сделать), но меня беспокоит то, что у меня слишком много внешних зависимостей в компоненте, чтобы это можно было проверить модулем. Нужно ли переписывать мой компонент для поддержки модульных тестов?

Jobs.vue

<script>
export default {
  name: "Jobs",
  data() {
    return {
      job_execs: []
    }
  },
  created() {
    this.JobExecEndpoint = process.env.VUE_APP_UATU_URL + '/api/v1/job_execution/?tool='+this.$route.params.tool+'&job='+this.$route.params.job+'&id='+this.$route.params.id
    fetch(this.JobExecEndpoint)
    .then(response => response.json())
    .then(body => {
      this.job_execs.push({
        'code_checkouts': body[0].code_checkouts,
      })
    })
    .catch( err => {
      console.log('Error Fetching:', this.JobExecEndpoint, err);
      return { 'failure': this.JobExecEndpoint, 'reason': err };
    })
  },
};
</script>

модульный тест

import { shallowMount } from "@vue/test-utils";
import fetchMock from 'fetch-mock'
import flushPromises from 'flush-promises'
import Jobs from "../../src/components/execution_details/Jobs.vue";

const job_execs = [
{
'code_checkouts': [{'name': 'test', 'git_hash': 'test', 'git_repo': 'test'}, {'name': 'test', 'git_hash': 'test', 'git_repo': 'test'}]}]
const $route = {
  params = {
  tool: 'jenkins',
  job: 'jobname',
  id: '1',
  }
}

describe('Jobs.vue', () => {
  beforeEach(() => {
    fetchMock.get(process.env.VUE_APP_UATU_URL + '/api/v2/job_execution/?product=eBay%20Mobile&tool='+$route.params.tool+'&job='+$route.params.job+'&id='+$route.params.id, job_execs)
  })

  it('Construct a JSON object of Git Refs from job_execution API', async () => {
    const wrapper = shallowMount(GitRefs)
    await flushPromises()

    expect(wrapper.vm.job_execs).toEqual(job_execs)
  })

  afterEach(() => {
    fetchMock.restore()
  })
})

Answer 1

Вам необходимо импортировать все зависимости, используемые в компоненте, а также импортировать любые глобальные значения или свойства, используемые router, axios и т. Д.