I'm working on testing react-native components, however when I run mocha with babel-core transpiler and this .babelrc:
{
"presets": [ "react", "es2015", "stage-2" ]
}
I get:
let { Platform, NativeModules } = require('react-native')
SyntaxError: Unexpected token {
This line lives in react-native-i18n/index.js
I'm running mocha in harmony mode.
Related
I am unable to load an .mjs file and run tests with mocha.
I have tried mocha v.7.2.0 with flag --experimental-modules and v.10.0.0 without flag.
I am using node v.14.15.4.
The import statement that I have in my code to test is:
import * as XLSX from 'xlsx/xlsx.mjs';
NB: this import statement works 100% fine while building my app with Webpack.
The error I get when I try to run unit tests on this code with Mocha is:
(node:5452) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
C:\Users......webapp\node_modules\xlsx\xlsx.mjs:81
export { set_cptable };
^^^^^^
SyntaxError: Unexpected token 'export' at wrapSafe (internal/modules/cjs/loader.js:979:16)
My mocha invocation is a vanilla mocha \"src/**/*.spec.js\", which I call through an npm task; as I mentioned before, flag --experimental-modules does not help.
My .babelrc, which (I suspect) is used to transpile my code, is the following:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-transform-runtime",
"react-hot-loader/babel",
["module-resolver", {
"alias": {
"#src": "./src"
}
}]
],
"env": {
"coverage": {
"plugins": [
"istanbul"
]
}
}
}
What can I do to solve this problem?
I'm having trouble with using the env variable TS_NODE_PROJECT when ts-node is used for testing using Mocha.
The project structure looks like this:
src/
main_test.ts
tsconfig.json
package.json
In my test, I want to use an async function, which requires "lib": ["es2018"] as a compilation option.
// src/main_test.ts
describe('', () => {
it('test', () => {
(async function() {})()
});
});
// src/tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"lib": ["es2018"]
},
"exclude": [
"../node_modules"
]
}
To run the test, I use this command, but it results in an error:
TS_NODE_PROJECT='src' && mocha --require ts-node/register src/*_test.ts
# TSError: ⨯ Unable to compile TypeScript:
# error TS2468: Cannot find global value 'Promise'.
# src/main_test.ts(3,10): error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option.
This means that src/tsconfig.json is not used. According to Overriding `tsconfig.json` for ts-node in mocha
and the ts-node documentation, the command should pass the correct tsconfig.json path to ts-node.
Moving src/tsconfig.json to project directory and running the same command causes the test to succeed. How can I pass the tsconfig.json path to ts-node so that the test compiles correctly?
Oh. How embarrassing...
TS_NODE_PROJECT='src/tsconfig.json' mocha --require ts-node/register src/*_test.ts
I find very useful to move mocha setup in different files so package.json remains clean, you can use a mocharc file like this:
module.exports = {
ignore: [
'./test/helpers/**/*',
'./test/mocha.env.js'
],
require: [
'test/mocha.env', // init env here
'ts-node/register'
],
extension: [
'ts'
]
}
and then create the file test/mocha.env.js (or call it as you wish) with this content:
process.env.NODE_ENV = 'test'
process.env.TS_NODE_PROJECT = 'src/tsconfig.json'
I'm using Nightwatch JS to run my e2e tests with the Mocha runner.
I want to integrate an HTML reporter that with the suite.
I'm trying to use the nightwatch-html-reporter package. But as far as I understand there is a problem with the CLI commands (it's written in the Nightwatch docs that --reporter will not work when using mocha).
I also copied the code sample from nightwatch-html-reporter to my globals.js but it doesn't seem to work either.
The tests run but there is no output anywhere.
Here is my folder structure:
project
src
spec
e2e
globals
globals.js
tests
smoke
testFile.js
nightwatch.conf.js
Here is my conf file:
const seleniumServer = require('selenium-server-standalone-jar');
const chromeDriver = require('chromedriver');
module.exports = {
src_folders: ['src/spec/e2e/tests'],
output_folder: 'report',
page_objects_path: [
'src/spec/e2e/pageObjects'
],
globals_path: 'src/spec/e2e/globals/globals.js',
custom_commands_path: 'src/spec/e2e/customCommands',
selenium: {
start_process: true,
server_path: seleniumServer.path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': chromeDriver.path
}
},
test_runner: {
type: 'mocha',
options: {
ui: 'bdd',
reporter: 'list'
}
},
test_settings: {
default: {
launch_url: 'http://URL',
silent: true,
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
args: [
"--no-sandbox",
"start-fullscreen"
]
}
}
}
}
};
And here is my global.js file:
var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
openBrowser: true,
reportsDirectory: __dirname + '/reports'
});
module.exports = {
reporter: reporter.fn
};
I don't think it will work with nightwatch-html-reporter as it is probably not a mocha reporter (but correct me if I'm wrong).
You want to use built in or custom mocha reporters when using nightwatch with mocha.
You can use a custom mocha html reporter like mochawesome but you'll have to hack around a bit and I offer no guarantees as I only tested those hacks lightly.
Here are the instructions to use mochawesome
(tested with
"mocha": "^5.2.0",
"mochawesome": "^3.1.1",
"nightwatch": "^0.9.21")
npm install mochawesome
Modify mochawesome node_modules\mochawesome *.js files to require mocha-nightwatch instead of mocha. (See instructions/explanations towards the end of the answer)
Presuming you're using a nightwatch.conf.js, configure your test runner to the equivalent of
test_runner : {
type : "mocha",
options : {
ui : "bdd",
reporter : require("mochawesome") // Please observe that you can pass a custom report constructor function here, not just reporter names
}
}
Run tests and observe that you still see the default console reporter (spec) but that at the end of the run you also see an output like:
[mochawesome] Report HTML saved to C:\projects\myWebApp\mochawesome-report\mochawesome.html
Open the html report.
This solution is hackish and fragile because nightwatch comes with it's own version of mocha.
When you install nightwatch you will see in your node_modules a mocha-nightwatch folder. This is the mocha that is being used by nightwatch.
However mochawesome doesn't use mocha-nightwatch. If you look at node_modules\mochawsome\dist\mochawesome.js you will see lines of code like:
var Base = require('mocha/lib/reporters/base');
var Spec = require('mocha/lib/reporters/spec');
This means is requires mocha, not mocha-nightwatch.
Those lines should ideally be: require('mocha-nightwatch/...).
So please change them in all *.js files that need fixing.
You could also fork mochawesome and make them like that ;)
Debugging notes:
Try putting some additional console.logs in node_modules\mocha-nightwatch\lib\mocha.js in the Mocha.prototype.reporter function. That's how I figured out what's going on.
If you use Mocha you can always go with mochawsome: https://www.npmjs.com/package/mochawesome
I haven't tried it myself but it looks pretty neat.
I am trying to set up Browserify with Elixir and Browserify Shim on Laravel 5.2 to use Gulp with my JavaScript files, but I didn't have much luck so far. This should be pretty straightforward to do, but it isn't.
Here is my package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"browserify-shim": "^3.8.12",
"jquery": "^2.2.0",
"jquery-ui": "^1.10.5",
"laravel-elixir": "^4.0.0"
},
"browser": {
"app": "./resources/assets/js/app.js",
"utils": "./resources/assets/js/utils.js",
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"app": {
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"depends": [
"jquery:$"
]
},
}
}
gulpfile.js
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.browserify('main.js', './public/js/bundle.js');
});
Entry script main.js looks like this:
var $ = require('jquery');
var Utils = require('utils');
var App = require('app');
app.js
var App = {
init: function(){
console.log(Utils);
Utils.doSomething();
}
//other methods
};
In short: Utils depends on $, and App depends on both $ and Utils.
When I hit gulp from terminal, bundle.js is correctly created. All scripts are wrapped up in Browserify code (as expected). Each script has all included dependencies, like I configured in package.json so this part looks good as well.
The problem is that all my included dependencies are empty objects. For example, Utils in app.js is empty, and I get an error when I try to call its method "doSomething". Console log prints out an empty object "{}" instead of real object. The only correctly included script is jQuery and it's not an empty object.
What could be wrong here? Do I need to make some changes in my JS files or in configuration to make this work? It looks like I'm pretty close to the solution, but it still does not work and I can't use it at all.
It is the easiest solution to directly use 'exports' from browserify-shim property:
"browserify-shim": {
"app": {
"exports": "App",
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"exports": "Utils",
"depends": [
"jquery:$"
]
},
}
Take a look at this repo which I believe shows the fixed version of your app. The issue is that your app.js and utils.js modules aren't exporting anything to their respective require calls. One option is to add a line like:
module.exports = App;
to the bottom of your app.js file, and the equivalent to the bottom of your utils.js file. You'll see if you test the repo that badapp doesn't have this line and produces the exact behavior you're describing.
See this answer for an explanation of the issue.
I'm currently trying to evaluate different testing frameworks that work with React, and it turns out that Jest is on my list. However, I'm trying to use static properties outlined here: https://github.com/jeffmo/es-class-fields-and-static-properties.
So, I took the tutorial that is given on the Jest homepage, and added a static propTypes property, my code looks like this:
import React from 'react';
class CheckboxWithLabel extends React.Component {
static defaultProps = {}
constructor(props) {
super(props);
this.state = {isChecked: false};
// since auto-binding is disabled for React's class model
// we can prebind methods here
// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({isChecked: !this.state.isChecked});
}
render() {
return (
<label>
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.onChange}
/>
{this.state.isChecked ? this.props.labelOn : this.props.labelOff}
</label>
);
}
}
module.exports = CheckboxWithLabel;
When I run the tests (npm test or jest), It throws the following error:
➜ jest
Using Jest CLI v0.8.2, jasmine1
FAIL __tests__/CheckboxWithLabel-test.js
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)
My package.json file looks like this:
{
"dependencies": {
"react": "~0.14.0",
"react-dom": "~0.14.0"
},
"devDependencies": {
"babel-jest": "*",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "*",
"react-addons-test-utils": "~0.14.0"
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs"
],
"modulePathIgnorePatterns": [
"<rootDir>/node_modules/"
]
}
}
Any ideas on what I'm missing here?
Thanks.
Any ideas on what I'm missing here?
Class properties are neither part of the es2015 nor the react preset.
You have to load the plugins that handles class properties:
npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties
And in your .babelrc file (next to existing plugins or presets):
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
This error occurs since Standard ES2015(ES6) classes can only have methods, not properties.
For me, it was resolved by installing babel-preset-stage-0 which adds support for class properties.
npm install babel-preset-stage-0 --save-dev
Then configure Webpack (or .babelrc) to use this preset:
//...
presets: ['react', 'es2015', 'stage-0']
//...
UPDATE:
As of Mid-2018, Babel env preset supports ES2015, ES2016 and ES2017.
So, you can skip stage-0 preset and instead use the env preset
npm install babel-preset-env --save-dev
And then update your .babelrc to
//...
presets: ['env', 'xyz']
//...
To support latest ES2018 features like spread operator/async functions, you can add stage-3 preset.
Reference tutorial