Vue import with relative project root path in test folder

Question

I want to use a helper object/function in a Jest test with Vue test-utils, where I have a tests folder on my project root.

unitMocks.js in tests/unit/unitMocks.js

export const mockComputed = {
  products() {
    return [1, 2, 3];
  },
  activities() {
    return [4, 5, 6];
  },
  ....
};

export const mockGetterProduct = () => {
...

Dashboard.spec.js in tests/unit/views/

import Dashboard from "@/views/Dashboard.vue";
import { mockComputed } from "../unitMocks.js";
...

describe("Dashboard.vue", () => {
...

To import this, I want to avoid using a relative path (../unitMocks.js) so I was wondering how to access the relative root path.

I'm aware of the babel root import plugin and I also tried to modify the webpack alias of my vue.config.js:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        tests: "tests/"
      }
    }
  },
  ...

..but my test still won't find that file when I import it.

Isn't there a native way of accessing the root path (like @ for src)? Is this related to Webpack or Babel?

In webpack.base.conf.js, you can add another symbol that resolves to tests folder. You should add it inside resolve: {alias: {}} — Sujil Maharjan
– Sujil Maharjan, Commented Oct 19, 2018 at 14:36

tony19 · Accepted Answer · 2018-10-20 05:54:06Z

3

Webpack's resolve.alias can be accomplished in Jest configuration with moduleNameMapper. Specifically, to add a tests alias mapped to <rootDir>/tests/, add the following to jest.config.js:

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

Then, you could import tests/unit/foo.json from your test scripts like this:

// In tests/x/y/z/example.spec.js
import foo from 'tests/unit/foo.json';

answered Oct 20, 2018 at 5:54

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue import with relative project root path in test folder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related