Vue-cli: Tests are not found out of the box

[lmiller1990]

Version

3.0.0-rc.3

Reproduction link

https://would-not-be-useful.com could not find a good way to do this - I think it must be related to some other setting.

Steps to reproduce

vue create test_app -> choose babel and jest

yarn unit:test
yarn run v1.7.0
$ vue-cli-service test:unit
No tests found
In /Users/lachlanmiller/javascript/vue/qiita_post
  10 files checked.
  testMatch: /Users/lachlanmiller/javascript/vue/qiita_post/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)) - 0 matches
  testPathIgnorePatterns: /node_modules/ - 10 matches
Pattern:  - 0 matches
 ERROR  jest exited with code 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What is expected?

It runs HelloWorld.spec.js

What is actually happening?

It does not find the test

---

MacOS 10.13.2 High Sierra
Happening on another machine (not sure of the macOS version for it, but it's high sierra). I can check the version tomorrow. I tried using both npm and yarn, and jest directly.

I tried both with jest config in package.json and standalone.

Also I cannot specify either:

yarn test:unit --  --runTestsByPath tests/unit/HelloWorld.spec.js

> vue-cli-service test:unit "--runTestsByPath" "tests/unit/HelloWorld.spec.js"

No tests found
No files found in /Users/lachlanmiller/javascript/vue/qiita_post.
Make sure Jest's configuration does not exclude this directory.
To set up Jest, make sure a package.json file exists.
Jest Documentation: facebook.github.io/jest/docs/configuration.html
Files: "tests/unit/HelloWorld.spec.js"

HOWEVER git cloning a project scaffolded on another PC works somehow.

Other projects on my machine are using jest no problem. Not sure what's going on. Any ideas?

[allochi]

Hi, the same happened to me on MacOS 10.13.4 High Sierra, I removed the enclosing round brackets in jest.config.js and it works. basically, this works:

testMatch: [
    "<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)|<rootDir>/**/__tests__/*.(js|jsx|ts|tsx)"
]

[renyuanz]

@allochi not working neither, but I'm on Windows 10
Exactly the same problem as described as @lmiller1990

[lmiller1990]

Both my machines are 10.13.2 and confirmed the bug is the same.

@allochi thanks, that works for me. Are the other brackets necessary? If not, could they be removed (not sure if that would impact other systems).

Edit, looks like jest could be the culprit (see #1691 )

[hajarrashidi]

Allochi solution on mac works. but not in windows.

[allochi]

testMatch is an array, so I guess the following should work too (it did for me):

testMatch: [
    "<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)",
    "<rootDir>/**/__tests__/*.(js|jsx|ts|tsx)"
]

It runs any test in the project's /tests/unit/ directory or any test in the project as long as it's in a __tests__ directory.

[allochi]

If you plan to have all your tests in /tests/unit/, just use:

testMatch: [
    "<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)"
]

[hajarrashidi]

Not working /:

[rdsn]

The issue on windows seems to be caused by the fact that jest v23 uses micromatch v3.1.10, while jest v22 used micromatch v2.3.11.

let micromatch = require('micromatch');

let path = 'D:\\app\\tests\\unit\\HelloWorld.spec.js';
let glob= 'D:/app/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))';

console.log(micromatch([path], glob));

// with [email protected] logs
// [ 'D:/app/tests/unit/HelloWorld.spec.js' ]

// with [email protected] logs
// []

[lmiller1990]

I think the best solution would be to downgrade to jest 22, until the bug is addressed there.

[mildc055ee]

hello, I have same problem on windows 10, however, I can run test correctly in the following way

• remove testMatch block
• add transformIgnorePatterns like below

    "transformIgnorePatterns": [
      "node_modules/"
    ],

[andreydos]

On Ubuntu I have the same problem, I just add an additional path to
```
testMatch: [
"/(tests/unit//.spec.(js|jsx|ts|tsx)|/__tests__/.(js|jsx|ts|tsx))",
"/tests/unit/*.spec.(js|jsx|ts|tsx)" // match test specs directly in "unit" directory
]

[coldino]

On Windows the listed workarounds don't seem to work.

Although not idea, I found this combination means I can run tests again:

    "moduleFileExtensions": [ "ts", "js" ],
    "testMatch": [ ]

[Abbyjeet]

@mildc055ee 's solution worked for me in Windows 10

[mario-d-s]

This issue is not fixed on Windows with #1756 😞. I just re-ran vue invoke unit-jest, adjusted the regex based on what was committed, and the generated HelloWorld.spec.js is still not found...

[Akryum]

Try this one: https://github.com/vuejs/vue-cli/commit/96778b2caf873c2178caadb5a66ab6bded070e96#diff-29994942bb568c5548a12d8103751233R34

[mario-d-s]

@Akryum that one does work!

By the way I've just regenerated a project with vue-cli and strangely enough, now the test just works. I don't know what's changed. My CLI version is still 3.0.0-rc.3.

[kevinhofmaenner]

@mario-d-s

I scaffolded a vue-cli 3 app about ~2 weeks ago and my jest.config.js file looked like this:

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
  ]
};

When I scaffolded a new app today, jest.config.js now looks like

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ]
};

Note the difference between the testMatch array.

[mario-d-s]

@kevinhofmaenner that is what vue-cli-plugin-unit-jest 3.0.0-rc.5 does. Can you check the version?

[kevinhofmaenner]

@mario-d-s - correct, the sample app I spun up yesterday was using 3.0.0-rc.5

[onexdata]

For people having this issue, the latest version of Jest doesn't like the <rootdir> in testMatch. This happened in Jest 23/24, so if you built your jest.config.js file in and older version of Jest, then upgraded to Jest latest, you will have this issue.

Use something like this instead:

'testMatch': [
  '**/?(*.)(spec).js?(x)',
  '**/?(*.)(test).js?(x)'
],

Breaking changes like this would be nice if Jest warned you that the devs decided to implement a breaking change, instead of just giving cryptic errors when the developer does nothing wrong.

Stuff like this makes all Jest 22 and previous source code that includes a jest.config.js file broken, for example. How is this good for the community?

[inf3rno]

@onexdata Really it would be nice if the documentation would cover this somehow. I tried ./test/*.js, test/*.js, but only **/test/*.js worked. I wonder why processing a simple glob pattern is so hard. This should be a core feature that works flawlessly instead of a barely supported and documented thing...

edit:
Lol, I thought we are in a jest issue. :-)

[mohsenuss91]

<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)|<rootDir>/**/__tests__/*.(js|jsx|ts|tsx)

@allochi I try it now I've got this :

  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module