wemake-vue-template
  • Introduction
  • Architecture
  • FAQ
  • Development
  • Configuration
  • Editors
  • TypeScript
  • Vue
  • Styles
  • Linting
  • Testing
  • Docker
  • GitLab CI
  • QA
  • Production
Powered by GitBook
On this page
  • Unit tests
  • Snapshots
  • Mocking
  • Static files and assets
  • Security checks

Testing

PreviousLintingNextDocker

Last updated 5 years ago

We love tests. And test everything we can. In this section, we will discuss two types of tests and describe our toolset.

Everything comes configured, so you can just start using it. Run npm run test to run everything we have.

We use as our test runner for unit tests. We configure jest inside .

We have two types of test: unit and end-to-end. They differ in complexity, tools, and reasoning.

Are you new to testing? Read the .

Unit tests

Unit tests are considered much easier to write, but harder to maintain. Because they are simple and there should be a lot of them.

To make our lives easier we use to mount and check our test components.

Use npm run test:unit to run unit tests.

Snapshots

We use to be sure that our components rendering did not change without notice. It saved us million times!

// An example from 'tests/unit/pages/index.spec.js':
const wrapper = mount(Index, { store, localVue, propsData })
expect(wrapper.html()).toMatchSnapshot()

These two lines will create fake Index component, mount it to the page, then render it to string, and serialize to the text file inside __snapshots__ folder near the test itself. There can be multiple snapshots for different component states.

Run npm run test:unit -u to update existing snapshots with the updated state.

Mocking

Unit tests should not go into the wild and request data. We leave this controversial topic to you.

However, we are using axios-mock-adapter to illustrate the point. You are free to use any kind of mocks you want.

Static files and assets

We can use different assets and static files like fonts, images, svg icons. At some point jest might fail to load and transform them.

So, we provide jest-svg-transformer and jest-transform-stub that will help you in this field.

  • jest-svg-transformer will load svg as fake component

  • jest-transform-stub will just stub all static files with no-ops

Security checks

We also run security checks on each CI step. We use npm audit to fail your CI when bad packages are found.

This way you can lower the risks.

Consider jest for .

manual mocking
jest
Vue testing full guide
vue-test-utils
jest snapshots
our package.json