We Keep Coding

How to use class when testing with Vue, Cypress and Cucumber?

I am trying to implement something simple: I want my e2e tests run with Cypress and cucumber.
I have an application created with Vue CLI 4.1.1. I added with NPM the package: cypress-cucumber-preprocessor (V1.19.0)
Edit:
After a lot of research and tests, I think I found where the problem comes from, but I don't know how to fix it yet:
The '#vue/cli-plugin-babel/preset' does not seem to be working with
.feature file...
My babel.config.js file is:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Any idea how I can make cli-plugin-babel working with cucumber cypress?
Original message :
I have a Test.feature file, executing steps defined in test.step.js files.
Here is the content of my test.spec.js
import { When, Then } from 'cypress-cucumber-preprocessor/steps';
import { HomePage } from './pages/home.page';
When(/^I open the Home page$/, () => {
let homePage = new HomePage();
homePage.goTo();
});
Then(/^I see "([^"]*)" in the main heading$/, msg => {
cy.contains('h1', msg)
});
And the content of my PageObject home.page.js:
export class HomePage {
goTo() {
cy.visit("/");
}
}
When I run:
npm run test:e2e
I get the following error:
Oops...we found an error preparing this test file:
tests/e2e/features/Test.feature
The error was:
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
- A missing file or dependency
- A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.
These errors does not occur when I use:
export function goToHomePage() {
cy.visit("/");
}
You can checkout my project on Github: https://github.com/truar/cloudcmr-v2 (branch master for the passing case, branch pageObject_pattern for the failing case).
I am assuming this is something related to ES6 and cypress... but I clearly don't know what is going on here. Besides, everything I find on the Internet talks about cypress cucumber and Typescript, which I don't use...
What am I missing?

I found the answer. See this PR for more details : https://github.com/cypress-io/cypress/issues/2945
Basically, there is an incompatibility between Babel 7 and Cypress 3. I had to change the babel.config.js file :
module.exports = process.env.CYPRESS_ENV
? {}
: {
presets: ["#vue/cli-plugin-babel/preset"]
};
It is just a workaround, not a real fix. We have to disable babel when running cypress.
Hope will help you !

jest.setMock not working for installed dependencies

I am having trouble using jest.setMock with installed dependencies
So, I have a feature to test which requires my-module dependency:
// my-module/index.js
import { hello } from 'my-dep';
export const doSomething = () => {
return hello();
};
// my-dep
// location: my-module/node_modules/my-dep/index.js
export const hello = () => {
return 'dude';
};
I have "npm linked" the my-module in my app:
cd my-module
npm link
cd app
npm link my-module
I wrote a test file as follows:
// app/feature.test.js
jest.setMock('my-dep', {
hello: () => 'world'
});
const { doSomething } = require('my-module');
it('should return dude', () => {
expect(doSomething()).toBe('dude');
});
I don't understand why mocking my-dep did not work and called the actual hello() function.
When I tried using the my-module file as relative import & installed my-dep dependency, the mocking worked:
// app/feature.test.js
jest.setMock('my-dep', {
hello: () => 'world'
});
const { doSomething } = require('./my-module');
it('should return world', () => {
expect(doSomething()).toBe('world');
});
What am I missing here?
Environment:
Binaries:
Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0
npmPackages:
jest: ^22.4.3 => 22.4.3
Some related issues:
https://github.com/facebook/jest/issues/701
https://github.com/facebook/jest/issues/796

Your problem is likely caused by the module loading order, but I'm not sure how changing from my-module to ./my-module changes it. I'd love to see the console output after adding console.log(require('path').join(__dirname, __filename)) to the top of my-module and my-dep.
This comment in the Jest issue you shared indicates that jest.setMock isn't hoisted before your import statements. If you switch it to use jest.mock that is hoisted, does it work?
jest.mock('my-dep', () => ({
hello: () => 'world'
}));
The Jest docs on manual mocks mention hoisting in this note:
If you're using ES module imports then you'll normally be inclined to put your import statements at the top of the test file. But often you need to instruct Jest to use a mock before modules use it. For this reason, Jest will automatically hoist jest.mock calls to the top of the module (before any imports).
For more about hoisting in JavaScript, refer to You Don't Know JS: Scope & Closures - Chapter 4: Hoisting

"fetch is not found globally and no fetcher passed" when using spacejam in meteor

I'm writing unit tests to check my api. Before I merged my git test branch with my dev branch everything was fine, but then I started to get this error:
App running at: http://localhost:4096/
spacejam: meteor is ready
spacejam: spawning phantomjs
phantomjs: Running tests at http://localhost:4096/local using test-in-console
phantomjs: Error: fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/unfetch.
For example:
import fetch from 'unfetch';
import { createHttpLink } from 'apollo-link-http';
const link = createHttpLink({ uri: '/graphql', fetch: fetch });
Here's a part of my api.test.js file:
describe('GraphQL API for users', () => {
before(() => {
StubCollections.add([Meteor.users]);
StubCollections.stub();
});
after(() => {
StubCollections.restore();
});
it('should do the work', () => {
const x = 'hello';
expect(x).to.be.a('string');
});
});
The funniest thing is that I don't even have graphql in my tests (although, I use it in my meteor package)
Unfortunately, I didn't to find enough information (apart from apollo-link-http docs that has examples, but still puzzles me). I did try to use that example, but it didn't help and I still get the same error

I got the same error importing a npm module doing graphql queries into my React application. The app was compiling but tests were failing since window.fetch is not available in the Node.js runtime.
I solved the problem by installing node-fetch https://www.npmjs.com/package/node-fetch and adding the following declarations to jest.config.js:
const fetch = require('node-fetch')
global.fetch = fetch
global.window = global
global.Headers = fetch.Headers
global.Request = fetch.Request
global.Response = fetch.Response
global.location = { hostname: '' }
Doing so we instruct Jest on how to handle window.fetch when it executes frontend code in the Node.js runtime.

If you're using nodejs do the following:
Install node-fetch
npm install --save node-fetch
Add the line below to index.js:
global.fetch = require('node-fetch');

The problem is this: fetch is defined when you are in the browser, and is available as fetch, or even window.fetch
In the server it is not defined, and either needs to be imported explicity, or a polyfill like https://www.npmjs.com/package/unfetch (as suggested in the error message) needs to be imported by your test code to make the problem go away.

babel generated code breaking istanbul coverage

I'm using babel to enable ES6 imports in a node project. Also using mocha for testing, and istanbul for coverage. I end up with less than full coverage because babel generates code something like the following:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _promise = require('babel-runtime/core-js/promise');
var _promise2 = _interopRequireDefault(_promise);
var _koa = require('koa');
var _koa2 = _interopRequireDefault(_koa);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Specifically, the generated function _interopRequireDefault is copied into every code file, and the branches are not necessarily always executed, which skews the branch coverage number emitted for istanbul. Is there any way around this issue?

If you're using gulp, I have a gist with a gulpfile here that sets up the necessary hooks and filters. The relevant chunk is to load isparta, hook require, and let the tests run:
gulp.task('test:cover', (cb) => {
gulp.src('src/main/**/*.js')
.pipe(istanbul({
instrumenter: require('isparta').Instrumenter,
includeUntested: true
}))
.pipe(babel())
.pipe(gulp.dest('target/cover'))
.pipe(istanbul.hookRequire())
.on('finish', cb);
});
gulp.task('test:mocha', (cb) => {
gulp.src('target/test/**/Test*')
.pipe(mocha())
.pipe(istanbul.writeReports())
.on('end', cb);
});
gulp.task('test', (cb) => {
return runSequence('test:cover', 'test:mocha', cb);
});
The only frustrating part is that your tests must use the covered code:
import {
LinearInterpolator,
CosineInterpolator
} from '../../cover/random/Interpolators';
I haven't found a way to work around that yet without also covering the test scripts and skewing coverage, although you should be able to do that by merging streams:
gulp.task('test:cover', (cb) => {
const src = gulp.src('src/main/**/*.js')
.pipe(istanbul({
instrumenter: require('isparta').Instrumenter,
includeUntested: true
}));
const test = gulp.src('src/test/**/*.js');
merge(src, test)
.pipe(babel())
.pipe(gulp.dest('target/cover'))
.pipe(istanbul.hookRequire())
.on('finish', cb);
});

You need to combine it with isparta - https://github.com/douglasduteil/isparta - to get the coverage working correctly. I warn you its a bit trial and error at the moment! My npm script looks like -
"coverage": "node_modules/.bin/babel-node node_modules/.bin/isparta cover --include-all-sources --report html node_modules/.bin/_mocha -- --reporter $npm_package_config_bdd_reporter",

We've run into this and I finally got fed up and looked into what causes this line. It turns out that every time to use an import like:
import chai from 'chai';
this babel fill gets added to allow sane interaction with older export styles. The trouble is that none of the common libraries exhibit the "true" branch of the ternary. I build the following file coverInterrop.js that artificially trips the first branch using old-school exports:
module.exports = {
__esModule: true
};
and I include in any file where I want to use an undestructured import:
// eslint-disable-next-line no-unused-vars
import coverInterrop from 'coverInterrop';
Note that it has to assign to a variable to trip the coverage and good eslint rules won't like that

How can I mock Webpack's require.context in Jest?

Suppose I have the following module:
var modulesReq = require.context('.', false, /\.js$/);
modulesReq.keys().forEach(function(module) {
modulesReq(module);
});
Jest complains because it doesn't know about require.context:
FAIL /foo/bar.spec.js (0s)
● Runtime Error
- TypeError: require.context is not a function
How can I mock it? I tried using setupTestFrameworkScriptFile Jest configuration but the tests can't see any changes that I've made in require.

I had the same problem, then I've made a 'solution'.
I'm pretty sure that this is not the best choice. I ended up stopping using it, by the points answered here:
https://github.com/facebookincubator/create-react-app/issues/517
https://github.com/facebook/jest/issues/2298
But if you really need it, you should include the polyfill below in every file that you call it (not on the tests file itself, because the require will be no global overridden in a Node environment).
// This condition actually should detect if it's an Node environment
if (typeof require.context === 'undefined') {
const fs = require('fs');
const path = require('path');
require.context = (base = '.', scanSubDirectories = false, regularExpression = /\.js$/) => {
const files = {};
function readDirectory(directory) {
fs.readdirSync(directory).forEach((file) => {
const fullPath = path.resolve(directory, file);
if (fs.statSync(fullPath).isDirectory()) {
if (scanSubDirectories) readDirectory(fullPath);
return;
}
if (!regularExpression.test(fullPath)) return;
files[fullPath] = true;
});
}
readDirectory(path.resolve(__dirname, base));
function Module(file) {
return require(file);
}
Module.keys = () => Object.keys(files);
return Module;
};
}
With this function, you don't need to change any require.context call, it will execute with the same behavior as it would (if it's on webpack it will just use the original implementation, and if it's inside Jest execution, with the polyfill function).

After spending some hours trying each of the answers above. I would like to contribute.
Adding babel-plugin-transform-require-context plugin to .babelrc for test env fixed all the issues.
Install - babel-plugin-transform-require-context here https://www.npmjs.com/package/babel-plugin-transform-require-context (available with yarn too)
Now add plugin to .babelrc
{
"env": {
"test": {
"plugins": ["transform-require-context"]
}
}
}
It will simply transform require-context for test env into dummy fn calls so that code can run safely.

If you are using Babel, look at babel-plugin-require-context-hook. Configuration instructions for Storybook are available at Storyshots | Configure Jest to work with Webpack's require.context(), but they are not Storyshots/Storybook specific.
To summarise:
Install the plugin.
yarn add babel-plugin-require-context-hook --dev
Create a file .jest/register-context.js with the following contents:
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();
Configure Jest (the file depends on where you are storing your Jest configuration, e.g. package.json):
setupFiles: ['<rootDir>/.jest/register-context.js']
Add the plugin to .babelrc
{
"presets": ["..."],
"plugins": ["..."],
"env": {
"test": {
"plugins": ["require-context-hook"]
}
}
}
Alternatively, add it to babel.config.js:
module.exports = function(api) {
api.cache(true)
const presets = [...]
const plugins = [...]
if (process.env.NODE_ENV === "test") {
plugins.push("require-context-hook")
}
return {
presets,
plugins
}
}
It may be worth noting that using babel.config.js rather than .babelrc may cause issues. For example, I found that when I defined the require-context-hook plugin in babel.config.js:
Jest 22 didn't pick it up;
Jest 23 picked it up; but
jest --coverage didn't pick it up (perhaps Istanbul isn't up to speed with Babel 7?).
In all cases, a .babelrc configuration was fine.
Remarks on Edmundo Rodrigues's answer
This babel-plugin-require-context-hook plugin uses code that is similar to Edmundo Rodrigues's answer here. Props to Edmundo! Because the plugin is implemented as a Babel plugin, it avoids static analysis issues. e.g. With Edmundo's solution, Webpack warns:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Despite the warnings, Edmundo's solution is the most robust because it doesn't depend on Babel.

Extract the call to a separate module:
// src/js/lib/bundle-loader.js
/* istanbul ignore next */
module.exports = require.context('bundle-loader?lazy!../components/', false, /.*\.vue$/)
Use the new module in the module where you extracted it from:
// src/js/lib/loader.js
const loadModule = require('lib/bundle-loader')
Create a mock for the newly created bundle-loader module:
// test/unit/specs/__mocks__/lib/bundle-loader.js
export default () => () => 'foobar'
Use the mock in your test:
// test/unit/specs/lib/loader.spec.js
jest.mock('lib/bundle-loader')
import Loader from 'lib/loader'
describe('lib/loader', () => {
describe('Loader', () => {
it('should load', () => {
const loader = new Loader('[data-module]')
expect(loader).toBeInstanceOf(Loader)
})
})
})

Alrighty! I had major issues with this and managed to come to a solution that worked for me by using a combination of other answers and the Docs. (Took me a good day though)
For anyone else who is struggling:
Create a file called bundle-loader.js and add something like:
module.exports = {
importFiles: () => {
const r = require.context(<your_path_to_your_files>)
<your_processing>
return <your_processed_files>
}
}
In your code import like:
import bundleLoader from '<your_relative_Path>/bundle-loader'
Use like
let <your_var_name> = bundleLoader.importFiles()
In your test file right underneath other imports:
jest.mock('../../utils/bundle-loader', () => ({
importFiles: () => {
return <this_will_be_what_you_recieve_in_the_test_from_import_files>
}
}))

Installing
babel-plugin-transform-require-context
package and adding the plugin in the .babelrc resolved the issue for me.
Refer to the documentation here:
https://www.npmjs.com/package/babel-plugin-transform-require-context

The easiest and fastest way to solve this problem will be to install require-context.macro
npm install --save-dev require-context.macro
then just replace:
var modulesReq = require.context('.', false, /\.js$/);
with:
var modulesReq = requireContext('.', false, /\.js$/);
Thats it, you should be good to go!
Cheers and good luck!

Implementation problems not mentioned:
Jest prevents out-of-scope variables in mock, like __dirname.
Create React App limits Babel and Jest customization. You need to use src/setupTests.js which is run before every test.
fs is not supported in the browser. You will need something like browserFS. Now your app has file system support, just for dev.
Potential race condition. Export after this import. One of your require.context imports includes that export. I'm sure require takes care of this, but now we are adding a lot of fs work on top of it.
Type checking.
Either #4 or #5 created undefined errors. Type out the imports, no more errors. No more concerns about what can or can't be imported and where.
Motivation for all this? Extensibility. Keeping future modifications limited to one new file. Publishing separate modules is a better approach.
If there's an easier way to import, node would do it. Also this smacks of premature optimization. You end up scrapping everything anyways because you're now using an industry leading platform or utility.

If you're using Jest with test-utils in Vue.
Install these packages:
#vue/cli-plugin-babel
and
babel-plugin-transform-require-context
Then define babel.config.js at the root of the project with this configuration:
module.exports = function(api) {
api.cache(true);
const presets = [
'#vue/cli-plugin-babel/preset'
];
const plugins = [];
if (process.env.NODE_ENV === 'test') {
plugins.push('transform-require-context');
}
return {
presets,
plugins
};
};
This will check if the current process is initiated by Jest and if so, it mocks all the require.context calls.

I faced the same issue with an ejected create-react-app project
and no one from the answers above helped me...
My solution were to copy to config/babelTransform.js the follwoing:
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
plugins:["transform-require-context"],
babelrc: false,
configFile: false,
});

Simpleset Solution for this
Just Do
var modulesReq = require.context && require.context('.', false, /\.js$/);
if(modulesReq) {
modulesReq.keys().forEach(function(module) {
modulesReq(module);
});
}
So Here I have added extra check if require.context is defined then only execute By Doing this jest will no longer complain