Vue-jest: Build test with Jest fails with `Could not locate module @/something`

[eddyerburgh]

I'm building an app with vuejs and testing with jest and running the tests locally works, but on circleci fails with the error

FAIL  test/unit/specs/components/ui/MessageUI.spec.js
   Test suite failed to run
    Configuration error:
    Could not locate module @/components/ui/MessageUi (mapped as /home/circleci/repo/src/components/ui/MessageUi)
    Please check:
    "moduleNameMapper": {
      "/^@\/(.*)$/": "/home/circleci/repo/src/$1"
    },
    "resolver": undefined

is not finding the component with the alias @. :angry:

the failing component require:

import Component from '@/components/ui/MessageUi'

in the same folder I have another test, working, with:

import Component from '@/components/ui/TabsUi'

build: #39
repo: poc-cms
test: MessageUI.spec.js#L3
component MessageUI.vue
jest config for the _@_ alias : jest.conf.js#L11

the closest issue related, on jest: https://github.com/facebook/jest/issues/1290

[eddyerburgh]

Can you SSH into circle and check that this path is correct: /home/circleci/repo/src

[letanure]

Hi @eddyerburgh

I checked the repo using ssh

➜  poc-cms git:(dev) ✗ ssh -p 64545 54.89.190.213
circleci@ad54f03a7c92:~$ cd
.bash_history  .bashrc        .config/       .npm/          .ssh/
.bash_logout   .cache/        .gitconfig     .profile       repo/
circleci@ad54f03a7c92:~$ cd repo/src/components/ui/
circleci@ad54f03a7c92:~/repo/src/components/ui$ ls -l
total 12
-rw-r--r-- 1 circleci circleci 2130 Jan  2 08:15 MessageUI.vue
-rw-r--r-- 1 circleci circleci 2309 Jan  2 08:15 TabsUi.vue
-rw-r--r-- 1 circleci circleci   74 Jan  2 08:15 index.js
circleci@ad54f03a7c92:~/repo/src/components/ui$

looks ok.

the error

Could not locate module @/src/components/ui/MessageUi (mapped as /home/circleci/repo/src/src/components/ui/MessageUi)

the path, on ssh
/home/circleci/repo/src/components/ui/MessageUi

so, I have this duplicated src/src for this test only. the only difference is that I have another component using this component

what is strange is only this component is failing and I have another test with the same structure, for a component in the same folder, and everything is ok

[letanure]

changing the moduleNameMapper on jest.conf.js to remove the src breaks all tests

from

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },

to

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1'
  },

[sinaa]

We faced the same issue which surprisingly passed on Windows and not on Linux (or circleci).

It turned out to be a simple file-name case sensitivity. The component's filename was by mistake componentName rather than ComponentName.

[sinaa]

A quick look at the reported issue seems to show that it's due to the same problem we were facing.

E.g., The file is called MessageUI: https://github.com/letanure/poc-cms/blob/master/src/components/ui/components/MessageUI/MessageUI.vue

While you're trying to load from from '@/components/ui/MessageUi'

Capitalising the i in the import will fix the problem.

[eddyerburgh]

Ah yes, I've been stung by this issue when a linux CI server is case sensitive, but my local OSX is not.

Thanks for your help @sinaa 😀

I'm closing this as it's not related to vue-jest.

[letanure]

I found the solution but posted only there. sorry, my mistake

[letanure]

just for history, if you change the name, git will ignore, so you have to change for something completely different, and after this for the right name

[rayfoss]

@eddyerburgh make sure to use APFS for git if you can... I made a drive for linuxy things and then just symbolically a folder in it, such as "git" to your home. If you have one of those Mac's with a fusion drive, wait till Mojave hits.

[ghost]

Ok I had the same problem and the issue was I had a typo in of the modules I was trying to import. Running:
rm -rf node_modules && npm i

didn't solve the issue for me. What did was making sure all the imports were correct.

import React from 'react';
import ComponentToTest from './../index.js';
import MisspelledImport from 'react-test-context-provider';
Cannot find module 'react' from....

The top import (React) was the one 'failing' according the the error message. Obviously the error message didn't point the the actual problem so I had to check all of my imports. This seems trivial but took me a while to figure out what was wrong

[violettomsk]

Because this works on local but fails on circleCI, so i think you should check the config file to make sure the module could be reached in the test environment.
I got into the same trouble on Gitlab CI because of unloaded modules/internal submodule and got rid of it by reconfiguring the script in gitlab_ci config file to guarantee that module could be reached.

[karladler]

For me the mistake was a missing svg file ending here:

moduleNameMapper: { '^.+\\.(css|style|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub', },