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

[FossPrime]

@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', },

[magujun]

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

Yep, that's it. If you rename a resource in your project and the renaming only affects the casing, git will not detect the case change and treat that resource as unchanged. Thus you end up with a working local project and a 'possibly' broken repository. So if you ever rename a resource in your project changing just the casing, the solution is to immediately check and also rename the resources on you repository. :)

[rakibhasansabbir]

From

moduleNameMapper: { '^@/(.)$': '/$1', '^~/(.)$': '/$1', '^vue$': 'vue/dist/vue.configs.js' },

To

moduleNameMapper: { '^@/(.)$': '/$1', '^~/(.)$': '/$1', '^vue$': 'vue/dist/vue.common.js' },

[serdarde]

For the ones who still suffers, because of this problem and uses TypeScript: Be sure that you import your TS definitions correctly.

In my case, import was like this (without .d): import * from '@/modules/connector/type-definitions';

but it has to be import * from '@/modules/connector/type-definitions.d';

[tolumide-ng]

@sinaa already gave concrete information about this. If you are wondering how to make case-sensitive changes on git as it might not reflect even after changes. Try doing this:

git config core.ignorecase false

and then commit your changes.

[darul75]

For the ones who still suffers, because of this problem and uses TypeScript: Be sure that you import your TS definitions correctly.

In my case, import was like this (without .d): import * from '@/modules/connector/type-definitions';

but it has to be import * from '@/modules/connector/type-definitions.d';

I suffered

[wesleyscholl]

This worked for me:

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

[asos-alexhaigh]

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

You need to rename it through a git command for Git to register change in case, then you can commit the change.

git mv --force myfile MyFile