The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

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!).