I am learning automation for work and currently a little stuck. So far stackoverflow has been a life saver :)
I am writing a test for selenium in visualstudio in javascript (nodes). I understand this is not a great combination but thats what work wants.
I have a test in the app.js file (see screenshot). It references a function in the functions.js file. I cannot get it to recognise the function though. I presume I need to reference the files containing the function. I have tried import 'import cellFromXLS from "functions.js";' and it does not work(Unexpected token import error).
Any ideas on what I can do? Anything fancy like modifying the package.json file to include all files with functions in them?
I am on the latest node.js and the latest drivers.
Also it seems intellisense does not work for javascript in visual studio. Is this right or anyway to fix it?
VisualStudio screenshot
Node doesn't support import natively just yet.
In your functions file you can do something like
function blah(){
console.log("I am blah")
}
function wah(){
console.log("Wah wah")
}
module.exports = {
blah,
wah
}
then in app.js you can do:
const functions = require('./functions.js')
functions.blah()
functions.wah()
The error already tells you what's wrong.
You need to use
const cellFromXLS = require("./functions.js");
instead of
import cellFromXLS from "functions.js"
if you want to use the import syntax, check out Babel
Related
sorry a rookie question, I am using react and typescript (via create-react-app) and if I have some totally non-UI javascript code (a module I am working on to work with some REST api), something along the lines like this:
src/lib/rest.tsx
export const getUser = async function (
username: string,
) {
let response = await fetch(`http://localhost:3000/api/auth/`, {
username
});
return response;
};
I am wondering how can I test this function locally in a REPL or browsers's dev tools, before putting it into real use. I think I have two difficulties right now:
webpack seems not even packaing this module into the code now, if I open Chrom's dev tools I can see other tsx files but not this one, simply becasue I am not importing this module anywhere I think.
even if it is packaged I dont know how to import this module in a REPL or the dev tool console because first I dont know what is the correct syntax here, Would it be import src/lib/rest.tsx? Also seems I cannot import any module in a REPL because import can only happen inside a module.
The workflow here is just I have written some simple typescript function and I want to run them in a REPL like enviorment so I can make sure they are working before using it anywhere or starting to write unit/integration tests against them.
Thanks!
1 is correct, your new module is not imported and thus not bundled by webpack.
I don't think you could use import syntax in console atm. But there are 2 ways you could try.
Just import your code in one of the bundled file, if you are using dev server, change will be reflected to browser automatically:
import { getUser } from '../../lib/rest';
getUser().then(console.log);
Or attach it to window so you could play with it in console:
import { getUser } from '../../lib/rest';
if (typeof window !== 'undefined') {
window.getUser = getUser;
}
In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"
try show all references or find all ref
I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.
Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used
checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition
I'm very sorry for asking such a beginner question, but I just learned the basics of JS without and do not completely understand the new ES6-features.
I just want to use rangy within my project and initialize the rangy object within <script></script>-Tags in my html-file (Blade-template) with the following method
rangy.init();
The rangy-library consists of six files, all of whom I included into my footer.
Chrome console tells me that rangy is undefined. What do I need to do?
I tried thousands of syntactical variants of import but the console tells me unexpected token import
I tried compiling the files down to one file with Laravel mix (mix.babel, mix.js, mix.scripts), nothing worked.
I'm pretty sure I just need to grasp the concept of how to work with ES6-Modules but not tutorial really helped. Maybe one of you can help me to figure out how to use rangy in this particular case?
Thanks in advance!
You should use the import syntax to import modules with JavaScript as this is the supported syntax which will eventually work in browsers. However, because browsers are not yet supporting this feature it means you need to enable webpack to use babel-loader.
Once that configuration is setup and working you can simply import your module like this...
import rangy from 'rangy'
Of course you also need rangy to be available either locally in your node_modules folder or installed globally so webpack and babel will know where to find it.
Thanks for your answers. I tried a few things and didn't really succeed...
So I did the following: In my webpack.mix.js (Laravel Mix) I have the files that I need:
mix.babel([
'node_modules/rangy/lib/rangy-core.js',
'node_modules/rangy/lib/rangy-classapplier.js',
], 'public/js/rangy.js');
I embed the compiled rangy.js in my footer element
<script type="text/javascript" src="{{ URL::asset('js/rangy.js')}}"></script>
Below I import and initialize rangy
<script>
import rangy from 'rangy';
rangy.init();
</script>
And chrome console gives me Uncaught SyntaxError: Unexpected token import.
Was that the wrong approach?
I build an Ionic Project using Ionic 2, Angular 2 and TypeScript to test the framework a bit. I need to include an external library (ntc.js) to my project, since I need it to name hex colors.
I know including a Javascript library to TypeScript should work, since whatever works in JS works in TS. I just don't want to include it the wrong way.
I tried to add the library to www/build/js, but it doesn't seem to work and it doesn't seem like the good way to do this. I tried to search for ways to do this but found nothing (might be because Angular 2 and Ionic 2 is still fresh).
Things like :
import * as ntc from '../../js/ntc';
doesn't seem to work as well, even if my library is located at the right place. TypeScript doesn't seem to read my file properly, if it reads it at all.
What is the good way to do this? Where should I place my .js file in my project directory?
You import it by adding it to your index.html like any other regular javascript file.
Then in your ts file you do:
declare var Tree:any;
Then in your code, you can use the Tree variable, albeit it exists in the Javascript file. this line of code is basically telling the typescript compiler there is a variable out there Tree which it should ignore.
Besides doing a declare var which tells ts that the variable exists you can use typings of typescript.
By writing
typings install libraryname
In your console you get a file that already has declare var/class and you can see all of its functions/properties when you import it.
import {lib} from 'libraryname';
I'm trying to incorporate a React component for radio buttons in my iOS app that's written in React Native, however I get an error when trying to import the component using the method that the author specified.
I first installed the component in the root directory of the app's XCode project/source code using the following statement:
npm i -S react-native-radio-buttons
Everything looked like it went through fine, so I incorporated the code for the component into the JS file for the screen that would use it, but I get an error on the very first line (which contains the import statement).
The import statement goes like this:
import { RadioButtons } from 'react-native-radio-buttons'
And the error is:
Uncaught SyntaxError: Unexpected reserved word
As far as I can tell, that should be an acceptable way of doing things in ES6. If anyone could tell me why this would happen, I'd be grateful. Thanks in advance.
react-native-radio-buttons author here,
I assumed everybody was using Babel with ES6 features enabled. I should add that to the README.
Edit: instruction and example .babelrc added to 0.4.2
Please try add this .babelrc file to your project root, as the provided example does:
{
"whitelist": [
"es6.modules"
]
}
Are you using a tool to translate from ES6? "import" is not going to work. Have you tried:
var RadioButtons = require('react-native-radio-buttons');
instead?