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

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 @. 😠

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 19 (2 by maintainers)

Commits related to this issue

fix: jest path alias https://github.com/vuejs/vue-jest/issues/40#issuecomment-354721063 — committed to zhyd1997/Eorg by zhyd1997 3 years ago
fix: jest path alias https://github.com/vuejs/vue-jest/issues/40#issuecomment-354721063 — committed to zhyd1997/Eorg by zhyd1997 3 years ago
Create main.yml (#64) * fix: jest path alias https://github.com/vuejs/vue-jest/issues/40#issuecomment-354721063 * ci: added snyk github actions - renmae main.yml to unit-test.yml — committed to zhyd1997/Eorg by zhyd1997 3 years ago

Most upvoted comments

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.

+60

sinaa on Mar 13, 2018

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

from


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

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

+36

letanure on Jan 2, 2018

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

+27

eddyerburgh on Jan 2, 2018

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

+15

letanure on Mar 19, 2018

From

moduleNameMapper: { ‘^@/(.)$': ‘<rootDir>/$1’, '^~/(.)$’: ‘<rootDir>/$1’, ‘^vue$’: ‘vue/dist/vue.configs.js’ },

moduleNameMapper: { ‘^@/(.)$': ‘<rootDir>/$1’, '^~/(.)$’: ‘<rootDir>/$1’, ‘^vue$’: ‘vue/dist/vue.common.js’ },

rakibhasansabbir on Jun 9, 2021

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

karladler on Sep 15, 2020

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

darul75 on Oct 25, 2021

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';

serdarde on Jun 29, 2021

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.

eddyerburgh on Mar 18, 2018

@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.

tolumide-ng on Jul 19, 2021

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.

sinaa on Mar 13, 2018