(CLI 3.0 BETA) Allow option to place test files alongside source files instead of separate "tests/unit" folder

What problem does this feature solve?

There are many advantages to having test files live alongside your source files instead of placing all test files in a separate folder. When creating a new Vue project via the CLI, it would be fantastic to be able to choose placing all unit tests inside of a separate “tests/unit” folder OR place unit test files alongside source in “src/**/*.spec.js”.

The “test” command in the package.json that is generated can be easily tweaked to make this work:

"test": "vue-cli-service test 'src/**/*.spec.js'"

This allows for a project structure like so:

./src ./src/components ./src/components/my-component.vue ./src/components/my-component.spec.js

What does the proposed API look like?

When running vue create, I’d imagine a question asking where you’d like your unit tests to live. Either a separate test folder, or alongside source.

Thanks for all the amazing work!

[calebjacob]

Fair enough - thanks for the feedback!

For any others who might come across this in the future, here’s how you can move your unit tests to live alongside your source (the solution is different based on using Mocha vs. Jest):

Mocha

In your package.json file, modify the test script to be:

"vue-cli-service test 'src/**/*.spec.js'"

Then enable the mocha env in your root .eslintrc.js file:

env: {
  mocha: true
}

Jest

In your jest.config.js file, modify the testMatch config to be:

['<rootDir>/(src/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))']

Then enable the Jest env in your root .eslintrc.js file:

env: {
  jest: true
}

[NathanStrutz]

I have my configuration all in my package.json file. I changed my “jest” section to this and it looks like it’s working perfectly:

  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "testMatch": [
      "<rootDir>/src/**/*.(spec|test).(ts|js)"
    ]
  },