Appendix C. Exercise answers

published book

This appendix provides the answers to the end-of-chapter exercises.

Chapter 2

test('renders Hello, World!', () => {
  const wrapper = shallowMount(TestComponent)
  expect(wrapper.text()).toContain('Hello, World!')
})

shallowMount

Chapter 3

test('renders item.author, () => {
  const item = {
    author: 10
  }
  const wrapper = shallowMount(Item, {
    propsData: { item }
  })
  expect(wrapper.text()).toContain(item.author)
})

test('renders item.score, () => {
  const item = {
    score: 10
  }
  const wrapper = shallowMount(Item, {
    propsData: { item }
  })
  expect(wrapper.text()).toContain(item.score)
})

import Child from 'child'

test('renders Child', () => {
  const wrapper = shallowMount(TestComponent)
  expect(wrapper.find(Child).props().testProp).toBe('some-value')
})

test('renders a tag with correct href', () => {
 const wrapper = shallowMount(TestComponent)
 expect(wrapper.find('a').attributes().href).toBe('https://google.com')
})

test('renders p tag with correct style', () => {
  const wrapper = shallowMount(TestComponent)
  expect(wrapper.find('p').element.style.color).toBe('red')
})

Chapter 4

test('styles the bar correctly when fail is called', () => {
  const wrapper = shallowMount(ProgressBar)
  expect(wrapper.classes()).not.toContain('error')
  wrapper.vm.fail()
  expect(wrapper.classes()).toContain('error')
})

test('sets the bar to 100% width when fail is called', () => {
  const wrapper = shallowMount(ProgressBar)
  wrapper.vm.fail()
  expect(wrapper.element.style.width).toBe('100%')
})

test('calls $bar.fail when load unsuccessful', async () => { const $bar = { start: () => {}, fail: jest.fn() } fetchListData.mockImplementation(() => Promise.reject()) shallowMount(ItemList, { mocks: { $bar }}) await flushPromises() expect($bar.fail).toHaveBeenCalled() })

Chapter 5

Using the wrapper trigger method

By emitting an event on the child component instance with the $emit method

Chapter 7

You need to mock lots of Vuex functions. This can lead to tests that pass but are incorrect due to the mock behaving differently than the real function.

The tests are less specific. If a test fails, it can be difficult to find out where the test failed and how to fix it.

test('mounts correctly', () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  const store = new Vuex.Store(storeConfig)
  shallowMount(TestComponent, {
    localVue,
    store
  })
})

Chapter 8

Don’t repeat yourself.

Factory functions avoid repetition and provide a pattern to follow.

Chapter 10

test('calls injectedMethod with the route path', () => {
  const $route = { path: '/some/path' }
  const injectedMethod = jest.fn()
  shallowMount(TestComponent, { mocks: { $route, injectedMethod } })
  expect(injectedMethod).toHaveBeenCalledWith($route.path)
})

vuex-router-sync

Chapter 11

test('calls myMethod beforeMount', () => {
  const Component = {
    methods: {
      myMethod: jest.fn()
    },
    mixins: [testMixin]
  }
  shallowMount(Component)
  expect(Component.methods.myMethod).toHaveBeenCalled()
})

function capitalize (string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// test-setup.js
import Vue from 'vue'
import uppercase from './uppercase'

Vue.filter('uppercase', uppercase)

// TestComponent.spec.js
test('renders a capitalized name', () => {
  const wrapper = shallowMount(TestComponent, {
    propsData: {name: 'edd'}
  })
  expect(wrapper.text()).toContain('Edd')
})

Chapter 12

1, because a static component has only one branch of logic

Because the date changes over time, which will cause your snapshot test to fail even if the code hasn’t been changed. A snapshot test must be deterministic.

test('renders correctly', () => {
 const wrapper = shallowMount(TestComponent)
  expect(wrapper.element).toMatchSnapshot()
})

Chapter 13

/**
 * @jest-environment node
 */

render returns a Cheerio wrapper object; renderToString returns a string.