Setting up Cucumber to work with Vue


#1

I hope this isn’t the wrong place to ask for help on my particular issue, but i figure someone has encountered this testing a Vue application:

I installed the CucumberJs testing framework because I have a particular situation where it is the right tool. It works running simple examples, but I have issues as soon as I try to bring Vue into the picture. The problem is with importing modules or constants into Cucumber, I get SyntaxError: Unexpected token import which is because it can’t handle the ES6 imports. Requires would work, but my code uses ES6 exports.

My best guess is that Babel can help with this, but I am at a loss as to how to do it. Cucumber docs and Googling have not been helpful at all.

For what it is worth, I tried the jest-cucumber package. It works, but it appears that you can’t reuse steps in other scenarios, which is very inefficient for what I am trying to do. Maybe I am wrong.


#2

It turns out that the jest-cucumber docs do have instructions on re-using step definitions, so I will try to see if this package will fulfill my immediate needs. Still, it would be interesting to know how how to get a pure CucumberJs setup running with E6.


#3

Well, jest-cucumber’s idea of reusing steps is very limiting, so I am back to trying to figure something out.

The command to start up the cucumber-js tests is ./node_modules/.bin/cucumber-js, so I am guessing the trick here is to configure things so babel kicks in when you run this.


#4

我也遇到了同样的问题。
解决方法:
./node_modules/.bin/cucumber-js --require-module @babel/register
需要安装@babel/core@babel/register作为开发依赖。
不过有新的问题:
使用 async function将会报错。
目前我还在寻找解决方案。
希望能和你一起探索Vue和Cucumber的配合使用方法。


#5

Thanks @ikarosu. I actually was just trying to use @babel/register, but couldn’t get it to work.
I will share more details with you soon.


#6

你可能需要在babel.config.js中加上:

module.exports = {
  presets: ["@vue/app", "@babel/preset-env"]
}