I'm using Atom and the Mocha Test Runner. I'm getting ReferenceError: DEV is not defined when I try to run a test against React-Native (0.33)
The DEV variable is referenced in various react-native core modules.
My mocha test runner options are:
--compilers js:babel-register --opts test/mocha.opts --harmony-proxies test/setup.js
My setup.js looks like this
import chai from "chai";
import fs from 'fs';
import path from 'path';
import register from 'babel-core/register';
import chaiEnzyme from 'chai-enzyme';
const modulesToCompile = [
'react-native',
'react-native-tabs',
'react-native-vector-icons',
'react-native-mock',
'react-native-parallax-scroll-view'
].map((moduleName) => new RegExp(`/node_modules/${moduleName}`));
function getBabelRC() {
var rcpath = path.join(__dirname, '..', '.babelrc');
var source = fs.readFileSync(rcpath).toString();
return JSON.parse(source);
}
var config = getBabelRC();
config.ignore = function(filename) {
if (!(/\/node_modules\//).test(filename)) {
return false;
} else {
const matches = modulesToCompile.filter((regex) => regex.test(filename));
const shouldIgnore = matches.length === 0;
return shouldIgnore;
}
}
register(config);
global.__DEV__ = true;
global.expect = chai.expect;
chai.use(chaiEnzyme());
require('react-native-mock/mock');
const React = require('react-native')
React.NavigationExperimental = {
AnimatedView: React.View
};
Any idea how to deal with this?
It looks like I had deleted a parameter in the Mocha setup, it should be
--compilers js:babel-register --opts test/mocha.opts --harmony-proxies --require test/setup.js
Related
I'm trying to run a vue ssr app on cloudflare workers.
I generated a new project using wrangler generate test
I installed vue using npm install vue#next and npm install #vue/server-renderer
I edited the index.js file like this:
const { createSSRApp } = require('vue')
const { renderToString } = require('#vue/server-renderer')
const app = createSSRApp({
data: () => ({ msg: 'hello' }),
template: `<div>{{ msg }}</div>`
})
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const html = await renderToString(app)
return new Response(html, {status: 200})
}
I then used wrangler dev to test it, but when I access the page I get this error:
ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined
at Module.<anonymous> (worker.js:8:104768)
at n (worker.js:1:110)
at Object.<anonymous> (worker.js:8:104943)
at n (worker.js:1:110)
at worker.js:1:902
at worker.js:1:912
Any help or guidance is appreciated
I faced similar issue and was able to fix it by defining a global constant (VUE_PROD_DEVTOOLS = false) during compile time.
Here is how my webpack prod config looks like:
const webpack = require('webpack');
const { merge } = require("webpack-merge");
const webpackCommon = require("./webpack.common");
const prodConfig = {
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__VUE_PROD_DEVTOOLS__: JSON.stringify(false)
}),
]
};
module.exports = merge(webpackCommon, prodConfig);
I'm trying to add Pact tests to my existing VueJS application but I'm having trouble even with the most basic test setup (using mocha with chai).
This is the basic test to see if things are working at all:
import { should } from "chai";
describe("setup", () => {
it("should work", () => {
var x = true;
x.should.be.equal(true);
});
});
Running this with the following command:
mocha --require #babel/preset-env test/pact/**/*.pact.js
This results in:
import { should } from "chai";
^
SyntaxError: Unexpected token {
From what I understood I need to transpile. After searching for similar issues I added this:
babel.config.js
module.exports = {
presets: ["#vue/app", "#babel/preset-env"]
};
Same effect.
It works when using e.g.
var should = require("chai").should();
describe("setup", () => {
it("should work", () => {
var x = true;
x.should.be.equal(true);
});
});
Please tell me in detail ..
I have an electron application and I have exe of that .. but want to automate using protractor framework.
Guide me in that .
You should try using Spectron
https://electronjs.org/spectron
Spectron is a testing tool for electron application. You can test it after packing into a exe file or straight away starting the test by mentioning the main.js
npm install --save-dev spectron
Install spectron via npm . Below example uses mocha for assertions.
To get up and running from your command line:
Install mocha locally as a dev dependency.
npm i mocha -D
create a spec file like below
const Application = require('spectron').Application
const assert = require('assert')
const electronPath = require('electron')
const path = require('path')
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
global.before(() => {
chai.should();
chai.use(chaiAsPromised);
});
describe('Application launch', function () {
this.timeout(10000)
beforeEach(function () {
const opts = {
path: './your.exe'
};
const app = new Application(opts);
return app.start().then((app) => {
chaiAsPromised.transferPromiseness = app.transferPromiseness;
return app;
})
})
afterEach(function () {
if (this.app && this.app.isRunning()) {
return this.app.stop()
}
})
it('shows an initial window', function () {
return this.app.client.getWindowCount().then(function (count) {
assert.equal(count, 1)
// Please note that getWindowCount() will return 2 if `dev tools` are opened.
// assert.equal(count, 2)
})
})
})
Run the test by:
mocha spec.js
I have several webpack configurations with very similar webpack.config files. I like to put webpack.config parts in a shared module that (I include the shared module with "npm link"), but that doesn't work as can't find dependencies, like "webpack" as it's the first dependency it encounters.
17 07 2017 14:49:32.694:ERROR [config]: Invalid config file!
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:470:15)
First webpack.config lines:
const webpack = require('webpack');
const path = require('path');
....
How can I instruct webpack to search for the included dependences in node_modules of the project that includes the webpack.config?
I tried to realise this by adding the following to the resolve webpack.config section, but that doesn't help:
modules: [path.resolve(__dirname, "node_modules"), "node_modules"]
I think it's not used by the webpack.config itself but by the JS code that is processed by webpack.config.
I solved it by passing in required root dir as argument to the common webpack config, and use that to change the __dirname variable that is used to find plugins and other stuff.
In code:
The webpack.config.js:
const path = require('path');
const loader = require('lodash/fp');
const common = require('bdh-common-js/etc/webpack/webpack.config.common');
module.exports = function (env) {
if (env === undefined) {
env = {};
}
env.rootdir = __dirname; // Add the root dir that can be used by the included webpack config.
const result = loader.compose(
function () {
return common(env)
}
// Any other "fragments" go here.
)();
// Customize the webpack config:
result.entry = {
entry: ['./src/entry.js', './src/js/utils.js'],
}
result.resolve.alias.Context = path.resolve(__dirname, 'src/js/context');
...... more stuff..
return result;
}
And the common webpack.config part that receives the argument:
module.exports = function (env) {
if (env !== undefined) {
if (env.rootdir !== undefined) {
__dirname = env.rootdir;
}
}
....
const node_modules = path.resolve(__dirname, 'node_modules');
const webpack = require(node_modules + '/webpack');
const CleanWebpackPlugin = require(node_modules + '/clean-webpack-plugin');
....
}
I'm using Gulp for my build system, with Browserify for compiling my JS. I had been using Reactify for JSX compilation, but thought I'd switch to Babelify to get some additional ES2015 features. No errors are thrown when compiling, but when I load my site in the browser I get the following error in my JS console:
Uncaught ReferenceError: Router is not defined
The line the error is referring to is:
var React = require('react');
in the main component file that is being loaded on the page.
The places where I am importing React Router are in my App.jsx file (which is the entrypoint for the application) and my routes.jsx file, where I define the routes:
App.jsx
var React = require('react'),
Router = require('react-router'),
routes = require('./routes.jsx');
Router.run(routes, function(Handler, state) {
var routeClasses = '';
for (var i = 1; i < state.routes.length; i++) {
routeClasses += state.routes[i].name + ' ';
}
React.render(<Handler classes={routeClasses.trim()} />, document.getElementById('root'));
});
routes.jsx
var React = require('react');
Router = require('react-router'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./_layout/App.jsx'),
Editor = require('./editor/Editor.jsx');
module.exports = (
<Route name="app" path="/" handler={App}>
<DefaultRoute name="editor" handler={Editor} />
</Route>
);
Everything was working fine when using Reactify rather than Babelify. I'm using Gulp for my build process:
gulp.task('js', function() {
var browserify = require('browserify'),
watchify = require('watchify'),
minifyify = require('minifyify'),
babelify = require('babelify');
function bundle() {
b.bundle()
.on('error', function(error){
gutil.log(error);
})
.pipe(source('app.js'))
.pipe(gulp.dest(paths.client.js.build))
.pipe(gulpif(!isStartup, browserSync.stream()));
isStartup = false;
}
var map = isProd ? false : 'app.map.json';
var b = browserify({
cache: {},
packageCache: {},
entries: paths.client.js.dev,
debug: true,
plugin: [watchify]
})
.transform(babelify, {presets: ['es2015', 'react']})
.plugin('minifyify', {
map: map,
output: paths.client.js.build + 'app.map.json',
});
b.on('update', function(){
bundle();
});
b.on('log', gutil.log); // output build logs to terminal
bundle();
});
The working version, using Reactify, simply omits the .transform(babelify...) line and adds transform: reactify to the browserify() initialization code, i.e.
var b = browserify({
cache: {},
packageCache: {},
entries: paths.client.js.dev,
debug: true,
transform: reactify,
plugin: [watchify]
});
It's working with es2015 import X from Y syntax, e.g.
import React from 'react'