How to test a regular Javascript file in a React app - javascript

I'm creating a React application that also has a folder of helper functions to use later. The helper functions are written in plain JS. I created a test file for the helper functions but when I run tests I only see the App.test.js results.
I can't tell what I'm missing. Below is the helper function test file:
import { IsValidBinary } from "./validityFunctions";
test("01101 should be binary", () => {
const binString = "01101";
const isValid = IsValidBinary(binString);
expect(isValid).toBe(true);
});

Related

How to add function call to jest.config.js file?

I am trying to add jest-json-schema to my Jest tests. In the Readme file they state that:
*In any test file:
import { matchers } from 'jest-json-schema';
expect.extend(matchers);
Or if you want it available for all test files then set it up the same way in a test framework script file*
But I don't understand how to do it. Following docs in the jest documentation I created a file jest.config.js with
module.exports = async () => {
return {
verbose: true,
};
};
But cannot figure out how to actually combine the import and expect.extend(matchers) with the jest.config.js file. I'm getting errors like Unresolved function or method extend() when trying to return it within the block.

Running unit test on JS runtime for es6 import statement

I am very new to NodeJS and JS as well. I have tried reading about resources like babel and rewire which help in resolving dependencies of ES6. But ended up being confused.
I am trying to write unit test for a JS runtime file which has import statements. The issue is that this file is a runtime file. This means that the import module only works when running in browser inside the dependent platform/application.
runtimeFile.js
import {something} from 'other-module'
function foo(){
}
export const toBeTested = {
foo
}
unitTest.js
const toBeTested = require('./runtimeFile').toBeTested
describe('some test', () => {
it('test a func', () => {
const result = tobeTested.foo();
});
});
When i try to run this unit test using mocha getting:
SyntaxError: Unexpected token {
This is for the import statement in runtimeFile.js.
So my question is around:
How do i mock the import statement
I am not sure what configuartion i need to do in order to get rid of this syntax error
I can provide more information as needed

How do I call a function in an external js file using typescrpt

We are trying a POC of adding Typescript and Webpack to our Angularjs project.
I am able to get my webpack bundle to generate, however at runtime the program cannot find the various functions in my validator.js. Can you please offer some advice?
login-view.components.ts
declare var findFormNode: any; //function in validator.js
//LogInUser
self.login = function ($event, command) {
if (findFormNode($event.target.id)) {
...
}
}
main.ts is importing the file
import "./../../../CommonStaticFiles/include/js/Validators.js";
bundle.js
eval("/* WEBPACK VAR INJECTION */(function($) {/*\r\n\r\n VALIDATORS\r\n\r\n ... n\n\nfunction findFormNode(
error
ReferenceError: findFormNode is not defined
at LoginController.self.login (login-view.component.ts:28)
at fn (eval at compile (angular.js:NaN), <anonymous>:4:267)
at callback (angular.js:29019)
In order for your functions to be properly imported, there are few things that you have to make sure of.
First, make sure you are exporting your functions correctly. Here's an example of how to export a function from Validator.js:
export const validateFunc1 = ():void => {};
Next, you have to make sure you are using proper import syntax. In order to import the function above, you would do the following:
import {validateFunc1} from "./../../../CommonStaticFiles/include/js/Validators.js";
Alternatively, if you want to import all exported functions at once, then you can use this syntax:
import * as validatorFuncs from "./../../../CommonStaticFiles/include/js/Validators.js";
Lastly, check that the location of Validators.js is correct. It's a common mistake to be looking in the wrong directory. Your code editor can usually help you find the right path to use.

NodeJS Module Exports with Additional Required Files

I am trying to break my nodejs code up into as small of files as possible to keep things modular. I have an app.js that is needing to use another method that I have moved to utils.js. The utils file however has a method that has a requirement for another library.
Should my utils.js file be "requiring" dependencies or should all those go in my app.js?
// app.js
var utilities = require('./utilities');
..
return utilities.anotherMethod();
// utils.js
module.exports = {
producer: function () {
// Handle mapping of fields depending on the source system
return 'map fields'
},
anotherMethod: function () {
// I require another lib. Do I do that here or app.js?
var kafka = require('kafka-node');
}
};
Update: Regarding the close request for an opinion based answer is essentially telling me that this can be done either way, which is what I was trying to clarify.

TypeError when using Systemjs loaded class

I am once again puzzled by Javascript. I am using Systemjs as a module loader and have a class as follows:
export default class Tool{
constructor(state, displayText) {
this._state = state;
this._displayText = displayText;
}
get displayText() {
return this._displayText;
}
get state() {
return this._state;
}
}
I am using this class in a unit test (Karma/Mocha/Chai) as follows:
'use strict';
import Tool from '../core/model/framework/Tool';
import chai from '../../../jspm_packages/npm/chai#3.5.0';
chai.should();
describe('MenuProvider', () => {
describe('registration', () => {
it('should register a new Workbench Module', ()=> {
let tools = [];
debugger;
tools.push(new Tool('Pink Fuzzy Bunnies', 'bunnyState'));
tools.push(new Tool('Look no hands', 'nohandsstate'));
let toolboxes = [];
toolboxes.push(new Toolbox('My Shiny New Toolbox', tools));
let newModule = new WorkbenchModule('My Module', toolboxes);
let providerUnderTest = new MenuProvider();
providerUnderTest.loadModule(newModule);
provider.modules.count.should.equal(1);
provider.getModule('My Module').should.not.be.null;
});
});
});
When I hit the debugger statement Tool is undefined. I am pretty sure I have jspm configured properly for my Karma test. I can see that every file is loading correctly when I debug the Karma test.
Is there something I am missing? I would just like to be pointed in the right direction. Let me know if I need to add more of my code or config.
You aren't exporting your class. Add this to the bottom of your Tool file:
export default Tool;
I was in fact exporting my class on the first line. The problem turned out to be related to the fact that Javascript does not hoist classes. Basically the tests were trying to use the classes before they were loaded by Karma and JSPM. I was able to resolve the issue by explicitly loading the files by adding the following to my config file:
jspm: {
config: 'jspm.conf.js',
loadFiles: ['src/app/angular-bootstrap.js', 'src/app/core/model/**/*.js', 'src/app/**/*.spec.js'], //'src/app/**/!(*.e2e|*.po).js'
serveFiles: ['src/app/**/*.+(js|html|css|json|*jade*)'] // *.{a,b,c} to *.+(a|b|c) https://github.com/karma-runner/karma/issues/1532
}
This is what did the trick: 'src/app/core/model//*.js'
Just as a tangential note. I also had fits over why Karam was not loading my Jade files so I could import them using JSPM. All I had to do was add the .jade extension to the list of file types being served up by Karma.
Such as a strange and wonderful world this Javascript stuff is!

Categories