How test JSX Vue component with Jest

Question

I've following component (I simplified code) :

const Comp = Vue.component('Comp', {
    render (h) {
        // Other stuff ...
        return (<div>
            <div style={style}>
                <div style={{ display : 'inline-block' }} />
            </div>
        </div>)
    },
})

export default Comp

I wrote following unit test :

it('should be initialized', () => {
    const addEventListener = spyOn(document, 'addEventListener')

    const { vm } = shallowMount(Comp)

    expect(addEventListener).toHaveBeenCalledWith('dragend', jasmine.any(Function))
    expect(addEventListener).toHaveBeenCalledWith('keypress', jasmine.any(Function))
})

When I run unit tests with Jest, I've an error :

ReferenceError: dom is not defined

> 96 |         return (<div>
    |         ^
97 |             <div style={style}>
98 |                 <div style={{ display : 'inline-block' }} />
99 |             </div>

My following babel.config.js file :

module.exports = (api) => {
    return {
        presets : ['@babel/preset-env', '@vue/babel-preset-jsx'],
        plugins : [
            '@babel/plugin-syntax-jsx',
            ['@babel/plugin-transform-react-jsx', { pragma : 'dom' }],
            [
                'module-resolver', {
                    root : ['./'],
                    alias : {
                        '@' : './src',
                        '~' : './examples',
                    },
                },
            ],
        ],
    }
}

And my Jest config file :

module.exports = {
    coverageReporters : ['html'],
    "transform": {
        "^.+\\.[t|j]sx?$": "babel-jest"
    },
    collectCoverageFrom : [
        "src/**/*.{js,jsx}"
    ],
    moduleNameMapper : {
        "\\.(css|less|sass|scss)$": "<rootDir>/tests/__mocks__/styleMock.js"
    },
    moduleFileExtensions : ['js', 'jsx']
}

When I build project with rollup, I've no error, only with jest.

Did i miss something ?

UPDATE

My package.json file :

{
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/plugin-syntax-jsx": "^7.0.0",
        "@babel/plugin-transform-react-jsx": "^7.0.0",
        "@babel/preset-env": "^7.1.0",
        "@rollup/plugin-alias": "^2.2.0",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
        "@vue/babel-preset-jsx": "^1.1.0",
        "@vue/test-utils": "^1.0.0-beta.31",
        "babel-core": "^7.0.0-bridge.0",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-jest": "^23.6.0",
        "babel-loader": "^8.0.4",
        "babel-plugin-module-resolver": "^3.1.1",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-vue-jsx": "^3.7.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "codemirror": "^5.48.2",
        "css-loader": "^3.2.0",
        "docdash": "^1.0.3",
        "eslint": "6.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.14.0",
        "eslint-plugin-jasmine": "^2.10.1",
        "eslint-plugin-node": "^8.0.0",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "file-loader": "^4.2.0",
        "html-loader": "^0.5.5",
        "husky": "^3.0.8",
        "jest": "^23.6.0",
        "jquery": "^3.3.1",
        "js-beautify": "^1.10.0",
        "jsdoc": "^3.5.5",
        "jsx-render": "^1.1.1",
        "lint-staged": "^9.4.2",
        "node-sass": "^4.13.0",
        "rollup": "^1.26.4",
        "rollup-plugin-babel": "^4.3.3",
        "rollup-plugin-scss": "^1.0.2",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0",
        "url-loader": "^2.1.0",
        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.11",
        "vuex": "^3.1.1",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"
    },
    "scripts": {
        "test": "jest",
        "build": "rollup -c"
    },
    "author": "",
    "license": "ISC",
    "husky": {
        "hooks": {
            "pre-push": "npm run test",
            "pre-commit": "lint-staged"
        }
    }
}

Maybe it can be useful : my project wasn't created with vue-cli. I use Vue only for two components.

Why are you using Jasmine in a Jest test suite? Did you follow the instructions in Testing Single-File Components with Jest? — Christos Lytras
– Christos Lytras, Commented Jan 21, 2020 at 20:23

Sohail Ashraf · Accepted Answer · 2020-01-26 16:02:25Z

Could you try with the below setup.

Package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest --watch"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "^1.0.0-beta.31",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^25.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "jasmine": "^3.5.0",
    "jest": "^25.1.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ]
  }
}

Component

import Vue from "vue";

const Comp = Vue.component("Comp", {

  mounted() {
      document.addEventListener("click", () => {

      });

  },

  render(h) {
    // Other stuff ...
    return (
      <div>
        <div >Hello World!</div>
        <input type="text" id="someeid"></input>
        <div id="result"></div>
      </div>
    );
  }
});

export default Comp;

babel.config.js

module.exports = api => {
  api.cache(false);
  return {
    presets: ["@babel/preset-env", "@vue/babel-preset-jsx"],
    plugins: [
      "@babel/plugin-syntax-jsx",
      ["@babel/plugin-transform-react-jsx", { pragma : 'dom' }],
      [
        "module-resolver",
        {
          root: ["./"],
          alias: {
            "@": "./src",
            "~": "./examples"
          }
        }
      ]
    ]
  };
};

test file

import { shallowMount } from "@vue/test-utils";
import Comp from "./Comp";

it("should be initialized", () => {
  const addEventListener = spyOn(document, "addEventListener");
  const { vm } = shallowMount(Comp);
  expect(addEventListener).toHaveBeenCalledWith("click", , expect.any(Function));
});

codesandbox Example

I've updated my first post and add package.json code. I'll try to check some package versions, your package.json has different versions.
So, looking code in your sandbox, error was in my babel.config.js. Thank for your help.

Collectives™ on Stack Overflow

How test JSX Vue component with Jest

UPDATE

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related