Appendix C. Exercise answers

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

Chapter 2

1

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

2

shallowMount

Chapter 3

1

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)
})

2

import Child from 'child'

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

3

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

4

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

Chapter 4

1

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')
})

2

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%')
})

3.  

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

1

Using the wrapper trigger method

2

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

Chapter 7

1

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.

2

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.

3

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

Chapter 8

1

Don’t repeat yourself.

2

Factory functions avoid repetition and provide a pattern to follow.

Chapter 10

1

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)
})

2

vuex-router-sync

Chapter 11

1

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

2

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

3

// 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

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

2

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.

3

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

Chapter 13

1

/**
 * @jest-environment node
 */

2

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