0

我有一个服务，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组件还有一个名为 的 data 属性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.statsdata 属性作为 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()等待异步服务返回值，然后将其推送到statsconst。我尝试使用flush-promises来解决所有承诺，然后将异步调用结果推送到stats数组。似乎没有任何效果。stats 属性始终是一个空数组。我知道在 Vue 中测试异步性可能很棘手，所以我假设我并不完全理解某些东西。

4

1 回答 1

0

我仍然遇到上述问题，但我确实发现如果您将处理承诺的方式从标准更改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')
    });
  });
})```
于 2019-07-03T22:26:18.137 回答