Модульное тестирование VueJS с помощью axios, шаблона TypeScript и асинхронных функций - PullRequest
Новая
       54

Модульное тестирование VueJS с помощью axios, шаблона TypeScript и асинхронных функций

0 голосов
/ 14 ноября 2018

Я пытаюсь выполнить модульное тестирование компонента, который выполняет HTTP-вызов в своем mounted() хуке. Я использую шаблон, созданный CLI, используя Typescript и Jest. Мой компонент выглядит примерно так: 

export default class UsrUsers extends Vue {
  private error: string = '';
  private users: User[] | null = null;

  private async mounted() {
    const url = process.env.VUE_APP_SERVICE_URL;

    try {
      const res = await axios.get<User[]>(`${url}/api/users`);
      this.users = res.data;

    } catch (ex) {
      this.error = (ex as AxiosError).message;
    }
  }
}

Я нашел axios-mock-adapter пакет, и у меня есть тестовая установка, подобная этой: 

describe('Users Container', () => {
  const axiosMock = new MockAdapter(axios);
  const baseUrl = process.env.VUE_APP_SERVICE_URL;

  it('should display no user when user list is empty', async () => {
    axiosMock.onGet(`${baseUrl}/api/users`).reply(200, []);

    const wrapper = await shallowMount(UsrUsers);
    expect(wrapper.text()).toMatch('no user');
  });
});

Но это не работает (я тоже пытался с jest.mock('axios')), и я получаю пустую строку как wrapper.text().

Я также пытался использовать $nextTick так: 

it('should display no user', done => {
  // Set up axiosMock
  const wrapper = shallowMount(UsrUsers);

  wrapper.vm.$nextTick(() => {
    expect(wrapper.text()).toMatch('no user');
    done();
  });
});

Но это время ожидания с сообщением Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout

Итак, как мне правильно протестировать этот компонент? Я пытался найти что-то в интернете, но ничего не нашел.

1 Ответ

0 голосов
/ 15 ноября 2018

Вы не отвечаете ни с чем на 200 с макетами axios. axiosMock.onGet('${baseUrl}/api/users').reply(200, []); должно быть axiosMock.onGet('${baseUrl}/api/users').reply(200, {data: 'no user'}); или что-то в этом роде. Но вы должны ответить некоторыми данными, чтобы ваш компонент использовал их для обновления, как в вашем примере.

...