Question

我有一个服务GetStatsService，其中包含一个异步方法，该方法调用多个api端点，然后处理数据，返回一个对象。看起来像这样：

export default() {
  async getMonthlyStats (userId) {
    const calls = [axios.get(...), axios.get(...)]
    const [stats, results, user] = await Promise.all(calls)
    const combinedStats = {}
    ...
    ...
    return combinedStats
  }
}

然后在名为getMontlyStats的组件中调用UserComparison.vue方法，在该方法中，代表用户ID的每个路由查询参数都会被多次调用。 UserComparison组件上还有一个名为stats的数据属性，它是一个数组，每个玩家的服务调用结果都在该数组中推送：

async fetch() {
  let calls = []
  this.$route.query.user.forEach((id) => {
    calls.push(this.fetchUserStats(id)
  }
  try {
    await Promise.all(calls)
  } catch (err) {
    console.log(err)
  }
}
async fetchUserStats(id){
  const call = await GetStatsService.getMonthlyStats(id)
  this.stats.push(call)
}

最后，然后将this.stats数据属性作为prop传递给子组件StatsTable.vue。

我的问题：我想对服务进行单元测试，但是以我能想到的任何方式都无法进行。我尝试为子组件创建测试。在那里，在beforeEach()方法中，我用moxios模拟了api调用。

beforeEach(() => {
  moxios.install(axios)
  moxios.stubRequest(new RegExp(`${base_api}/users/.*/stats`), {
     status: 200,
     response: SampleStats
  })
  moxios.stubRequest(new RegExp(`${base_api}/users/.*/history`), {
     status: 200,
     response: SampleHistory
  })

  const userIds = [ '123', '456', '789']
  const stats = []
  userIds.forEach(async (id) => {
    stats.push(await GetStatsService.getMonthlyStats(id))
  }

  wrapper = mount(StatsTable, {
    localVue,
    propsData: {
      stats
    },
    mocks: {
      $t: (t) => { return t }
    },
    attachToDocument: true
})

}）

我尝试使用vm.$nextTick()等待异步服务返回该值，然后将其推送到stats const。我尝试使用flush-promises解析所有的Promise，然后将异步调用结果推送到stats数组。似乎没有任何作用。 stats属性始终是一个空数组。我知道在Vue中测试异步性可能很棘手，所以我认为我还不完全了解。

Answer 1

我仍然遇到上述问题，但我确实弄清楚了，如果您将处理承诺的方式从async/ await更改为标准<promise>.then()，则能够通过测试。

这是带有示例测试的示例组件：

  <ul>
    <li 
      v-for="notification in notifications" 
      :key="notification.id"
    >
      {{notification.body}}
    </li>
  </ul>
</template>
<script>
import axios from 'axios';

export default {
  data(){
    return {
      notifications: []
    }
  },
  methods:{
    getNotifications(){
      axios.get('/notifications.json')
        .then(response =>  this.notifications = response.data.data)
    }
  },
  mounted(){
    this.getNotifications();
  }
}
</script>

import AppNotifications from '../AppNotifications';

jest.mock('axios', () => {
  return {
    get: () => Promise.resolve({
      data: {
        "data": [{
            "id": 1,
            "body": "first notification",
            "read": "true"
          },
          {
            "id": 2,
            "body": "second notification",
            "read": "false"
          }
        ]
      }
    })
  }
})

describe('AppNotification', () => {
  it('renders a list of notifications', async() => {
    let wrapper = mount(AppNotifications)
    await wrapper.vm.$nextTick(() => {    
      let items = wrapper.findAll('li');
      expect(items.at(0).text()).toContain('first notification')
      expect(items.at(1).text()).toContain('second notification')
    });
  });
})```

Vuejs使用Jest测试实用程序-卡住了测试异步服务

1 个答案: