564890 (5) [Avatar] Offline
#1
In 3.2's coding snippet on page 59, you check to see if the number of Item components equals the length of window.items (which you set to 3).

import { shallow } from 'vue-test-utils'
import ItemList from '../ItemList.vue'
import Item from '../../components/Item.vue'
 
describe('ItemList.vue', () => {
  test('renders an Item for each item in window.items', () => {
    window.items = [{},{},{}]
    const wrapper = shallow(ItemList)
    expect(wrapper.findAll(Item).length).toEqual(window.items.length)
  })
})


I'm curious why this works because in the real application the length of window.items is 500. Looking at the vue dev tools, there are also 500 Item components being rendered. Does this have to do with shallow rendering into JSDOM instead of the actual DOM?
564890 (5) [Avatar] Offline
#2
I figured it out. The .spec file uses the window object that is defined in the test.
Edd Yerburgh (42) [Avatar] Offline
#3
Glad you figured it out smilie

Do you think it would benefit from extra explanation?
564890 (5) [Avatar] Offline
#4
Thank you Edd! I think that would be helpful for those of us really new to testing (but of course not necessary!).