-1

i am wrighting test cases for LoginNew.vue component , when i am trying to import that component inside the spec.js file i am getting shallowMount error [check my error here] ,i don't know why i am getting this error please help me to fix this issue jest.config.js

module.exports = {
    moduleNameMapper:{
    "~(.*)$": "<rootDir>/resources/js/$1",
    },
    setupFilesAfterEnv: ['<rootDir>resources/src/tests/setup.js'],
    resolver: require.resolve(`jest-pnp-resolver`),
    testEnvironment: `node`,
};

LoginNew.vue

<template>
    <div>
        <h1 id="title">Login</h1>
        <input type="text" id="input-username"/>
        <input type="password" id="input-password"/>
        <button id="btn-sign-in">Sign In</button>

        </div>
</template>
<script>

    export default {
        name: 'LoginNew'
    }
</script>

Login.spec.js

import  LoginNew from '../../src/Pages/LoginNew.vue';
import{shallowMount} from '@vue/test-utils';
describe('LoginNew.vue',()=>{
    describe('When Loaded',()=>{
        it('has the required elements',()=>{
            const wrapper =shallowMount(LoginNew);
            expect(wrapper.find('#input-username').exists()).toBe(false);
            expect(wrapper.find('#input-password').exists()).toBe(false);
        });
    });
});

package.json

{
  "name": "vue-fundoo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "@vue/composition-api": "^1.0.0-rc.9",
    "@vuelidate/core": "^2.0.0-alpha.18",
    "@vuelidate/validators": "^2.0.0-alpha.15",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "core-js": "^3.6.5",
    "dotenv": "^10.0.0",
    "jquery": "^3.6.0",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/test-utils": "^1.2.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^27.0.3",
    "node-sass": "^5.0.0",
    "sass": "^1.19.0",
    "sass-loader": "^10.1.1",
    "vue-jest": "^3.0.7",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^4.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "transform": {
      "^.+\\.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  }
}
Sravani
  • 367
  • 1
  • 3
  • 17
  • What is the content of your `jest.config.js` file? Do you have one in the project ? – Michal Levý Jun 22 '21 at 12:40
  • Hello @MichalLevý, i added my jest.config.js in my code please check it once – Sravani Jun 22 '21 at 12:47
  • Does this answer your question? [Jest test fails with window is not defined](https://stackoverflow.com/questions/46274889/jest-test-fails-with-window-is-not-defined) – Michal Levý Jun 22 '21 at 12:48
  • @MichalLevý, not this solution, i am getting shallowMount error – Sravani Jun 22 '21 at 12:49
  • Doesn't matter, error message is the same. Problem is in the `testEnvironment: 'node'` – Michal Levý Jun 22 '21 at 12:53
  • Above mentioned solution is going to work in my case na..? – Sravani Jun 22 '21 at 13:01
  • Hello @MichalLevý,I changed according what you suggested it's not working in my case getting same error – Sravani Jun 22 '21 at 14:09
  • Can you share some info from package.json? What versions are used of Jest, @vue/test-utils, vue-jest? – Kunukn Jun 22 '21 at 16:32
  • @kunukn,I updated my package.json in question section please check – Sravani Jun 22 '21 at 16:41
  • "jest": "^27.0.3", "vue-test-utils": "^1.0.0-beta.11","vue-jest": "^3.0.7", These are the versions I am using @Kunukn – Sravani Jun 22 '21 at 17:11
  • vue-test-utils should be deleted. It is deprecated in favor of @vue/test-utils which is already in package.json https://www.npmjs.com/package/vue-test-utils. – Kunukn Jun 22 '21 at 20:52
  • Can you move the "jest" with transform info in package.json into the jest.config.js? And update the tests to be truthy, e.g. `expect(wrapper.find('#input-username').exists()).toBe(true);` – Kunukn Jun 22 '21 at 21:04
  • @Kunukn,yeah i changed but getting some error means it's expect a regex things ,This is the error i am getting SyntaxError: Unexpected token '<' > 1 | import LoginNew from '../../src/Pages/LoginNew.vue'; | ^ 2 | import{shallowMount} from '@vue/test-utils'; 3 | describe('LoginNew.vue',()=>{ 4 | describe('When Loaded',()=>{ at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14) at Object. (tests/unit/Login.spec.js:1:1) – Sravani Jun 23 '21 at 02:20

1 Answers1

0

Update the jest configuration to

testEnvironment: 'jsdom'

The defaults has been changed for Jest 27 Read more about it here.

https://jestjs.io/blog/2021/05/25/jest-27

Kunukn
  • 2,136
  • 16
  • 16