The Coding Artist

I like doing test driven development in vue and jest. After doing this for a while I noticed that I don't like the fact that the unit tests live in their own directory apart from the implementation files: I always need some time to find them if I want to work on a component. Why not place the test files next to the component and javascript files as shown in the following directory listing?

- components
    - HelloWorld.spec.js
    - HelloWorld.vue
    - Home.spec.js 
    - Home.vue
- utils

As you can see it is very easy to find the test file and there is no confusion between test files and normal files due to the naming convention of tests (*.spec.js).

So how could we achieve this? It is very simple. We need to change the testMatch configuration of jest. When you created your project using the vue-cli and added jest as the unit testing framework, you will have a jest config file in the root of your project:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

The only thing you have to do is to add the proper textMatch entry to this file:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: [
    "**/src/**/*.spec.[jt]s?(x)",
  ]
}

When you now run jest, the test files next to the javascript files will be recognized. You will have to move all your tests next to the components, because with the new setting jest will ignore tests in the tests/unit directory.

How to find these settings?

I found out about this setting by examining the jest config documentation. I also had a look in the initial config by running:

npx jest --showConfig

In the output I saw the initial configuration:

 "testMatch": [
    "**/tests/unit/**/*.spec.[jt]s?(x)",
    "**/__tests__/*.[jt]s?(x)"
  ],

I copied this and just rewrote the first pattern in order to match files in the src directory. As I never use the __tests__ directory I simply deleted this line in order to have no confusion where the tests should be placed.