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

[calebjacob]

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!

[LinusBorg]

I understand that not everyone wants to keep tests in a separate folder. But the fact that this can be tweaked with one line makes we doubt that it'S woprth asking people about that, forcing another choice on them during project initialization.

[yyx990803]

Yeah, I don't think such a simple change warrants an additional prompt for every user.

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

[RehanSaeed]

@iamceege I'm a bit confused by the env setting in the .eslintrc.js file. I already have one of those files in the root which has env set to node: true. I suspect this is not as simple as just changing a path.

[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)"
    ]
  },

[gregveres]

@iamceege I think there is more to it than what you guys outlined above. I am following the pattern of having the unit tests stored. What I am finding is that webpack is picking up the unit tests and compiling them when I do yarn run serve. I think webpack needs to be configured to ignore the unit test files when building for serve or build, but then include them when building for jest.

I think jest has its own webpack config so I think that will get taken care of automatically. So I think it just means I have to exclude those files from the build.