how to set babel plugins and presets - react-app-rewired - babeljs

i am new to babel and testing stuff in react so it would be really great if you can provide a little more context for the approaches you can suggest.
Thank you
The app was created using react-app-rewired everything works fine but when i run my test script react-app-rewired test it throws this error
SyntaxError: C:\Users\kishan\Documents\GitHub\kp\client\src\components\DateTest\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (219:5):
217 |
218 | return (
> 219 | <div className="date-test-container">
| ^
220 | <input
221 | ref={inputRef}
222 | type="text"
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
Test file:
const React = require('react');
const {shallow} = require('enzyme')
const DateTest = require('./') // component needs to be tested
it('should render date test component and check current month',()=>{
// const wrapper = shallow(<DateTest />);
// const month = wrapper.find('span.monthName').text();
// expect(text).toEqual("March");
})
what i tried:
useBabelRc() from customize-cra can see the documentation here
Causes your .babelrc (or .babelrc.js) file to be used, this is especially useful if you'd rather override the CRA babel configuration and make sure it is consumed both by yarn start and yarn test (along with yarn build).
//inside my config-overrides.js
module.exports = override(
useBabelRc()
);
// inside my .babelrc
{
"presets": [ "#babel/preset-react"]
}
But getting the same error as above
please let me know if more information required

Related

How add Build Phases Run Script Phase in Ionic Appflow

I need to run a native Xcode build script during the iOS build in Ionic Appflow.
For e.g I am using cordova-plugin-salesforce-snapins plugin and as per their documentation we need to run these scripts:
select Build Phases
create Run script
paste this line of code $PODS_ROOT/ServiceSDK/Frameworks/ServiceCore.framework/prepare-framework
It is possible in Xcode but there is no such way to achieve this in ionic Appflow.
Please help me to configure this.
I use the npm plugin cordova-node-xcode, which allows you to write the build phase to the generated Xcode project file. Add "xcode": "^3.0.1" to your devDependencies in package.json.
Call a .js script AddBuildScript.js from a Cordova "after_build" hook in your config.xml:
<platform name="ios">
<hook src="AddBuildScript.js" type="after_build" />
Script AddBuildScript.js:
var xcode = require('xcode'),
fs = require('fs'),
projectPath = 'platforms/ios/MyProj.xcodeproj/project.pbxproj',
proj = xcode.project(projectPath);
proj.parse(function (err) {
var scriptName = 'My Script';
var buildPhases = proj.getPBXObject('PBXShellScriptBuildPhase');
if (JSON.stringify(buildPhases).match(scriptName)) {
console.log('Xcode project not updated - ' + scriptName + ' already exists')
} else {
var options = {shellPath: '/bin/sh', shellScript: '$PODS_ROOT/ServiceSDK/Frameworks/ServiceCore.framework/prepare-framework'};
proj.addBuildPhase([], 'PBXShellScriptBuildPhase', scriptName, proj.getFirstTarget().uuid, options);
fs.writeFileSync(projectPath, proj.writeSync());
console.log('Xcode project updated - added ' + scriptName);
}
});

How can I setup Jest with a transpiler so that I can have automatically mocked DOM and canvas?

I have a small, browser-based game that I'm trying to get Jest up and running with.
My goal is to be able to write tests, and to have them run with Jest, and not to have any extra DOM- or browser API-related error messages.
As the game makes use of DOM and canvas, I need a solution where I can either mock those manually, or have Jest take care of it for me. At a minimum, I'd like to verify that the 'data model' and my logic is sane.
I'm also making use of ES6 modules.
Here's what I've tried so far:
Tried running jest:
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/dingo/code/game-sscce/game.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Game } from './game';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I understood here that I can experimentally enable ES module support, or use a transpiler to output ES5 that Jest can recognize and run.
So my options are:
Enable experimental ES module support
Transpile using Babel
Transpile using Parcel
Transpile using Webpack
I decided to try Babel and looked here for instructions: https://jestjs.io/docs/en/getting-started#using-babel
I created a babel.config.js file in the root directory.
After installing babel and creating a config file, here's an SSCCE:
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env'
]
],
};
game.js
export class Game {
constructor() {
document.getElementById('gameCanvas').width = 600;
}
}
new Game();
game.spec.js
import { Game } from './game';
test('instantiates Game', () => {
expect(new Game()).toBeDefined();
});
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="game.js" defer></script>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas" />
</div>
</body>
</html>
package.json
{
"name": "game-sscce",
"version": "1.0.0",
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.12.13",
"#babel/preset-env": "^7.12.13",
"babel-jest": "^26.6.3",
"jest": "^26.6.3"
}
}
Now when I try running Jest again, I get:
FAIL ./game.spec.js
● Test suite failed to run
TypeError: Cannot set property 'width' of null
1 | export class Game {
2 | constructor() {
> 3 | document.getElementById('gameCanvas').width = 600;
| ^
4 | }
5 | }
6 |
at new Game (game.js:3:5)
at Object.<anonymous> (game.js:7:1)
at Object.<anonymous> (game.spec.js:1:1)
...and now, I'm not sure what to do. If document is not being recognized, then I suspect Jest is not making use of jsdom properly. Am I supposed to configure anything else?
Investigation:
Jest runs with jsdom by default.
document actually exists:
However, since it's mocked, getElementById() just returns null.
In this situation, it's not possible to return an existing canvas defined in the HTML document. Rather, one can create the canvas programmatically:
game.js
export class Game {
constructor() {
const canvas = document.createElement('canvas');
canvas.setAttribute('id', 'gameCanvas');
document.getElementById('gameContainer').append(canvas);
canvas.width = 600;
}
}
new Game();
getElementById() will, however, still return null, so this call must be mocked:
game.spec.js
import { Game } from './game';
test('instantiates Game', () => {
jest.spyOn(document, 'getElementById').mockReturnValue({})
expect(new Game()).toBeDefined();
});
The test still fails to run:
FAIL ./game.spec.js
● Test suite failed to run
TypeError: Cannot read property 'append' of null
3 | const canvas = document.createElement('canvas');
4 | canvas.setAttribute('id', 'gameCanvas');
> 5 | document.getElementById('gameContainer').append(canvas);
| ^
6 |
7 | canvas.width = 600;
8 |
at new Game (game.js:5:5)
at Object.<anonymous> (game.js:16:1)
at Object.<anonymous> (game.spec.js:1:1)
This is because Game is instantiating itself as soon as Jest imports it due to the new Game() call on the last line. Once rid of that:
game.js
export class Game {
constructor() {
const canvas = document.createElement('canvas');
canvas.setAttribute('id', 'gameCanvas');
document.getElementById('gameContainer').append(canvas);
canvas.width = 600;
}
}
We get:
FAIL ./game.spec.js
✕ instantiates Game (7 ms)
● instantiates Game
TypeError: document.getElementById(...).append is not a function
3 | const canvas = document.createElement('canvas');
4 | canvas.setAttribute('id', 'gameCanvas');
> 5 | document.getElementById('gameContainer').append(canvas);
| ^
6 |
7 | canvas.width = 600;
8 |
at new Game (game.js:5:46)
at Object.<anonymous> (game.spec.js:5:10)
One step closer, but the append() call must also be mocked out:
game.spec.js
import { Game } from './game';
test('instantiates Game', () => {
jest.spyOn(document, 'getElementById').mockReturnValue({
append: jest.fn().mockReturnValue({})
});
expect(new Game()).toBeDefined();
});
...and now the test passes:
PASS ./game.spec.js
✓ instantiates Game (9 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
It's interesting that jsdom returns an HTMLCanvasElement when created programmatically and mocked:
However, it can't really be used for anything:
game.js
export class Game {
constructor() {
const canvas = document.createElement('canvas');
canvas.setAttribute('id', 'gameCanvas');
document.getElementById('gameContainer').append(canvas);
canvas.width = 600;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
}
}
As shown by the failing test:
FAIL ./game.spec.js
✕ instantiates Game (43 ms)
● instantiates Game
TypeError: Cannot set property 'fillStyle' of null
10 | var ctx = canvas.getContext('2d');
11 |
> 12 | ctx.fillStyle = 'rgb(200, 0, 0)';
| ^
13 | ctx.fillRect(10, 10, 50, 50);
14 |
15 | ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
at new Game (game.js:12:5)
at Object.<anonymous> (game.spec.js:7:10)
console.error
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
at module.exports (/home/dingo/code/game-sscce/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at HTMLCanvasElementImpl.getContext (/home/dingo/code/game-sscce/node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
at HTMLCanvasElement.getContext (/home/dingo/code/game-sscce/node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:130:58)
at new Game (/home/dingo/code/game-sscce/game.js:10:22)
at Object.<anonymous> (/home/dingo/code/game-sscce/game.spec.js:7:10)
at Object.asyncJestTest (/home/dingo/code/game-sscce/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
at /home/dingo/code/game-sscce/node_modules/jest-jasmine2/build/queueRunner.js:45:12
at new Promise (<anonymous>)
at mapper (/home/dingo/code/game-sscce/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
at /home/dingo/code/game-sscce/node_modules/jest-jasmine2/build/queueRunner.js:75:41 undefined
8 | canvas.width = 600;
9 |
> 10 | var ctx = canvas.getContext('2d');
| ^
11 |
12 | ctx.fillStyle = 'rgb(200, 0, 0)';
13 | ctx.fillRect(10, 10, 50, 50);
To be able to test further, either of the following two conditions must be fulfilled:
canvas has to be installed as a peer dependency of jsdom,
jest-canvas-mock has to be installed.

`nixos-rebuild switch` gets stuck when using `builtins.fetchGit`

I'm trying to download a package with a version that is not on nixpkgs. To do so, I'm using builtins.fetchGit. Here's a summary of the file where I use fetchGit (/etc/nixos/home/core.nix) for a better idea:
{ pkgs, username, homeDirectory }:
############################
# Custom package snapshots #
############################
let custom-ver-pkgs = {
# Haskell Language Server
hls = let pkgsSnapshot = import (builtins.fetchGit {
name = "custom hls version";
url = "https://github.com/nixos/nixpkgs-channels/";
ref = "refs/heads/nixpkgs-unstable";
rev = "2c162d49cd5b979eb66ff1653aecaeaa01690fcc";
}) {}; in pkgsSnapshot.haskellPackages.haskell-language-server;
};
in
{
# Actual config
}
And here's the point where I use the hls keyword defined above:
# Packages
home.packages = with pkgs; [
... # Normal packages
] ++
# Packages with custom version (See start of file)
(with custom-ver-pkgs; [
hls
]);
As you can see, I also use home-manager. The above-mentioned .../core.nix file is imported directly into /etc/nixos/configuration.nix.
As the title says, if I run sudo nixos-rebuild switch, the terminal freezes (in the sense that the command goes on forever without doing anything). What could my problem be?

Within a gimp python-fu plug-in can one create/invoke a modal dialog (and/or register a procedure that is ONLY to be added as a temp procedure?)

I am trying to add a procedure to pop-up a modal dialog inside a plug-in.
Its purpose is to query a response at designated steps within the control-flow of the plug-in (not just acquire parameters at its start).
I have tried using gtk - I get a dialog but it is asynchronous - the plugin continues execution. It needs to operate as a synchronous function.
I have tried registering a plugin in order to take advantage of the gimpfu start-up dialogue for same. By itself, it works; it shows up in the procedural db when queried. But I never seem to be able to actually invoke it from within another plug-in - its either an execution error or wrong number of arguments no matter how many permutations I try.
[Reason behind all of this nonsense: I have written a lot of extension Python scripts for PaintShopPro. I have written a App package (with App.Do, App.Constants, Environment and the like that lets me begin to port those scripts to GIMP -- yes it is perverse, and yes sometimes the code just has to be rewritten, but for a lot of what I actual use in the PSP.API it is sufficient.
However, debugging and writing the module rhymes with witch. So. I am trying to add emulation of psp's "SetExecutionMode" (ie interactive). If
set, the intended behavior is that the App.Do() method will "pause" after/before it runs the applicable psp emulation code by popping up a simple message dialog.]
A simple modal dialogue within a gimp python-fu plug-in can be implemented via gtk's Dialog interface, specifically gtk.MessageDialog.
A generic dialog can be created via
queryDialogue = gtk.MessageDialog(None, gtk.DIALOG_DESTROY_WITH_PARENT \
gtk.MESSAGE_QUESTION, \
gtk.BUTTONS_OK_CANCEL, "")
Once the dialog has been shown,
a synchronous response may be obtained from it
queryDialogue.show()
response = queryDialogue.run()
queryDialogue.hide()
The above assumes that the dialog is not created and thence destroyed after each use.
In the use case (mentioned in the question) of a modal dialog to manage single stepping through a pspScript in gimp via an App emulator package, the dialogue message contents need to be customized for each use. [Hence, the "" for the message argument in the Constructor. [more below]]
In addition, the emulator must be able to accept a [cancel] response to 'get out of Dodge' - ie quit the entire plug-in (gracefully). I could not find a gimpfu interface for the latter, (and do not want to kill the app entirely via gimp.exit()). Hence, this is accomplished by raising a custom Exception class [appTerminate] within the App pkg and catching the exception in the outer-most scope of the plugin. When caught, then, the plug-in returns (exits).[App.Do() can not return a value to indicate continue/exit/etc, because the pspScripts are to be included verbatim.]
The following is an abbreviated skeleton of the solution -
a plug-in incorporating (in part) a pspScript
the App.py pkg supplying the environment and App.Do() to support the pspScript
a Map.py pkg supporting how pspScripts use dot-notation for parameters
App.py demonstrates creation, customization and use of a modal dialog - App.doContinue() displays the dialogue illustrating how it can be customized on each use.
App._parse() parses the pspScript (excerpt showing how it determines to start/stop single-step via the dialogue)
App._exec() implements the pspScript commands (excerpt showing how it creates the dialogue, identifies the message widget for later customization, and starts/stops its use)
# App.py (abbreviated)
#
import gimp
import gtk
import Map # see https://stackoverflow.com/questions/2352181/how-to- use-a-dot-to-access-members-of-dictionary
from Map import *
pdb = gimp.pdb
isDialogueAvailable = False
queryDialogue = None
queryMessage = None
Environment = Map({'executionMode' : 1 })
_AutoActionMode = Map({'Match' : 0})
_ExecutionMode = Map({'Default' : 0}, Silent=1, Interactive=2)
Constants = Map({'AutoActionMode' : _AutoActionMode}, ExecutionMode=_ExecutionMode ) # etc...
class appTerminate(Exception): pass
def Do(eNvironment, procedureName, options = {}):
global appTerminate
img = gimp.image_list()[0]
lyr = pdb.gimp_image_get_active_layer(img)
parsed = _parse(img, lyr, procedureName, options)
if eNvironment.executionMode == Constants.ExecutionMode.Interactive:
resp = doContinue(procedureName, parsed.detail)
if resp == -5: # OK
print procedureName # log to stdout
if parsed.valid:
if parsed.isvalid:
_exec(img, lyr, procedureName, options, parsed, eNvironment)
else:
print "invalid args"
else:
print "invalid procedure"
elif resp == -6: # CANCEL
raise appTerminate, "script cancelled"
pass # terminate plugin
else:
print procedureName + " skipped"
pass # skip execution, continue
else:
_exec(img, lyr, procedureName, options, parsed, eNvironment)
return
def doContinue(procedureName, details):
global queryMessage, querySkip, queryDialogue
# - customize the dialog -
if details == "":
msg = "About to execute procedure \n "+procedureName+ "\n\nContinue?"
else:
msg = "About to execute procedure \n "+procedureName+ "\n\nDetails - \n" + details +"\n\nContinue?"
queryMessage.set_text(msg)
queryDialogue.show()
resp = queryDialogue.run() # get modal response
queryDialogue.hide()
return resp
def _parse(img, lyr, procedureName, options):
# validate and interpret App.Do options' semantics vz gimp
if procedureName == "Selection":
isValid=True
# ...
# parsed = Map({'valid' : True}, isvalid=True, start=Start, width=Width, height=Height, channelOP=ChannelOP ...
# /Selection
# ...
elif procedureName == "SetExecutionMode":
generalOptions = options['GeneralSettings']
newMode = generalOptions['ExecutionMode']
if newMode == Constants.ExecutionMode.Interactive:
msg = "set mode interactive/single-step"
else:
msg = "set mode silent/run"
parsed = Map({'valid' : True}, isvalid=True, detail=msg, mode=newMode)
# /SetExecutionMode
else:
parsed = Map({'valid' : False})
return parsed
def _exec(img, lyr, procedureName, options, o, eNvironment):
global isDialogueAvailable, queryMessage, queryDialogue
#
try:
# -------------------------------------------------------------------------------------------------------------------
if procedureName == "Selection":
# pdb.gimp_rect_select(img, o.start[0], o.start[1], o.width, o.height, o.channelOP, ...
# /Selection
# ...
elif procedureName == "SetExecutionMode":
generalOptions = options['GeneralSettings']
eNvironment.executionMode = generalOptions['ExecutionMode']
if eNvironment.executionMode == Constants.ExecutionMode.Interactive:
if isDialogueAvailable:
queryDialogue.destroy() # then clean-up and refresh
isDialogueAvailable = True
queryDialogue = gtk.MessageDialog(None, gtk.DIALOG_DESTROY_WITH_PARENT, gtk.MESSAGE_QUESTION, gtk.BUTTONS_OK_CANCEL, "")
queryDialogue.set_title("psp/APP.Do Emulator")
queryDialogue.set_size_request(450, 180)
aqdContent = queryDialogue.children()[0]
aqdHeader = aqdContent.children()[0]
aqdMsgBox = aqdHeader.children()[1]
aqdMessage = aqdMsgBox.children()[0]
queryMessage = aqdMessage
else:
if isDialogueAvailable:
queryDialogue.destroy()
isDialogueAvailable = False
# /SetExecutionMode
else: # should not get here (should have been screened by parse)
raise AssertionError, "unimplemented PSP procedure: " + procedureName
except:
raise AssertionError, "App.Do("+procedureName+") generated an exception:\n" + sys.exc_info()
return
A skeleton of the plug-in itself. This illustrates incorporating a pspScript which includes a request for single-step/interactive execution mode, and thus the dialogues. It catches the terminate exception raised via the dialogue, and then terminates.
def generateWebImageSet(dasImage, dasLayer, title, mode):
try:
img = dasImage.duplicate()
# ...
bkg = img.layers[-1]
frameWidth = 52
start = bkg.offsets
end = (start[0]+bkg.width, start[1]+frameWidth)
# pspScript: (snippet included verbatim)
# SetExecutionMode / begin interactive single-step through pspScript
App.Do( Environment, 'SetExecutionMode', {
'GeneralSettings': {
'ExecutionMode': App.Constants.ExecutionMode.Interactive
}
})
# Selection
App.Do( Environment, 'Selection', {
'General' : {
'Mode' : 'Replace',
'Antialias' : False,
'Feather' : 0
},
'Start': start,
'End': end
})
# Promote
App.Do( Environment, 'SelectPromote' )
# und_so_weiter ...
except App.appTerminate:
raise AssertionError, "script cancelled"
# /generateWebImageSet
# _generateFloatingCanvasSetWeb.register -----------------------------------------
#
def generateFloatingCanvasSetWeb(dasImage, dasLayer, title):
mode="FCSW"
generateWebImageSet(dasImage, dasLayer, title, mode)
register(
"generateFloatingCanvasSetWeb",
"Generate Floating- Frame GW Canvas Image Set for Web Page",
"Generate Floating- Frame GW Canvas Image Set for Web Page",
"C G",
"C G",
"2019",
"<Image>/Image/Generate Web Imagesets/Floating-Frame Gallery-Wrapped Canvas Imageset...",
"*",
[
( PF_STRING, "title", "title", "")
],
[],
generateFloatingCanvasSetWeb)
main()
I realize that this may seem like a lot of work just to be able to include some pspScripts in a gimp plug-in, and to be able to single-step through the emulation. But we are talking about maybe 10K lines of scripts (and multiple scripts).
However, if any of this helps anyone else with dialogues inside plug-ins, etc., so much the better.

Broccoli-compass and ember-cli 0.39

I recently upgraded ember-cli to .39, and something changed to cause my broccoli-compass code to break.
Here's the code:
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
compassCommand: 'bundle exec compass',
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets'
});
};
I get this error:
[broccoli-compass] Error: Command failed: Errno::ENOENT on line ["155"] of ~/.rvm/gems/ruby-2.1.1/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory # rb_sysopen - ~/campaign-designer/ember/tmp/tree_merger-tmp_dest_dir-pSk32Zuy.tmp/campaign-designer/styles/app.scss
Run with --trace to see the full backtrace
arguments: `bundle exec compass compile campaign-designer/styles/app.scss --relative-assets --sass-dir campaign-designer/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_cache_dir-8Yu97OaF.tmp/assets"`
Has app.styles or this.appAndDependencies() changed? I've tried many variants of this config to no avail.
There's a similar question here, but I still couldn't get things working.
For what it's worth, something like this ended up helping me:
// Compass config in Brocfile.js
app.registry.add('css', 'broccoli-compass', 'scss', {
toTree: function(tree, inputPath, outputPath, options) {
// broccoli-compass doesn't like leading slashes
if (inputPath[0] === '/') { inputPath = inputPath.slice(1); }
// tree = mergeTrees([
// tree,
// 'public'
// ], {
// description: 'TreeMerger (stylesAndVendorAndPublic)'
// });
return compileCompass(tree, inputPath + '/app.scss', {
outputStyle: 'expanded',
// require: 'sass-css-importer', // Allows us to import CSS files with #import("CSS:path")
sassDir: inputPath,
imagesDir: 'images',
//fontsDir: 'fonts',
cssDir: outputPath
});
}
});
Ultimately I removed compass from my project (I just had to write a few SASS mixins myself) to avoid the troubles with the config + attempt to get faster build speeds.
Update: You may now want to check out the ember-cli-compass-compiler ember-cli addon, which makes it easier to get started with Compass in your ember-cli project.