Question

我正在尝试对在其mounted()挂钩中进行HTTP调用的组件进行单元测试。我正在使用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

那么，如何正确测试此组件？我试图在互联网上找到一些东西，但没有找到任何东西。

Answer 1

您没有使用axios模拟回复200。 axiosMock.onGet('${baseUrl}/api/users').reply(200, []);应该是axiosMock.onGet('${baseUrl}/api/users').reply(200, {data: 'no user'});或类似的名称。但是您必须回复一些数据，以便您的组件像示例中一样使用它来更新自身。

使用axios，TypeScript模板和异步功能对VueJS进行单元测试

1 个答案: