Unit Testing - AmericanWhitewater/wh2o-vue GitHub Wiki

We use Jest and @vue/test-utils for our unit testing. Unit tests help us be sure that our components work as intended.

Factory

A factory function is available to help us reduce boilerplate and write cleaner tests.

// src/utils/unit-test-helpers/create-wrapper.js

const createWrapper = (component, options = {}) => {
  const localVue = createLocalVue()
  localVue.use(CarbonComponents)
  localVue.directive('view', view)

  const wrapper = mount(component, {
    localVue,
    stubs: {
      Layout,
      LayoutTwoThirds,
      LayoutFullWidth,
      LayoutFiftyFifty
    },
    ...options
  })
  return wrapper
}

In the function above, we pass in the component we want to test as our first argument. Then we can provide any other options like mocks or stubs.

Example Mocks

$route

Here is an example of testing a component that uses the $route global.

const options = {
  mocks: {
    $route: {
      params: {
        id: '123
      },
      path: '/foo-bar'
    }
  }
}

const wrapper = createWrapper(MyComponent, options)

$router

Sometimes we'll need to check whether or not vue-router programmatic navigation works as intended. Here is an example of testing a component that uses the $router global.

const options = {
  mocks: {
    $router: {
      push: jest.fn(() => {
        return {
          catch: jest.fn()
        }
      })
    }
  }
}

const wrapper = createWrapper(MyComponent, options)

$store

Similar to $route, and $router, mocking a Vuex store is pretty straight forward too.

const mockStore = {
  state: {
    data: null,
    loading: false,
    error: false
  },
  dispatch: jest.fn()
}

const options = {
  mocks: {
    $store: mockStore
  }
}

const wrapper = createWrapper(MyComponent, options)

expect(mockStore.dispatch).toHaveBeenNthCalledWith(
  1,
  '[MODULE] FETCH_MY_DATA',
  '123'
)

mapbox-gl

Sometimes mapbox-gl can come through in some of the unit tests. This has been a mystery for some time. You can mock the package with the snippet below. This mock needs to be applied globally in the Jest setup file.

jest.mock('mapbox-gl/dist/mapbox-gl', () => ({
  Map: () => ({})
}))

Coverage

To get coverage reports, cd into the project directory and run npm run test:coverage. This will generate a static site in the coverage/lcov-report/ directory. Once generated, you can use the Chrome Web Server Extension or simply open the index.html file in your browser to view coverage info.

Snapshots

Jest's Snapshot Testing is a great way to check component templates to avoid any potential visual regression. It takes a snapshot of the component's markup and stores it in a very small file. These files should be committed and tracked. Any changes to the component template that are not in the snapshot file will cause the test to fail. If you are intentionally changing a component's markup and need to update your snapshots, cd to the project root then run npm run snapshot:update. This will remove obsolete snapshots and update snapshot files to the new HTML.

Resources

Official Docs

Guides

Tooling