I've been creating an application using NodeJS ESModules (a.k.a import instead of require()) and the problem comes when I trying to test it - I am stuck on this for about a month now because I cannot find a good package to solve this "simple" issue.
Since I am using ESM, I cannot use libs such as rewire because, as it says on the docs, they don't support it. So I need a way to mock some dependencies during tests using the import syntax, and the only (trustable) package I've found that does the job is Jest.
I think that installing the whole Jest package to only use it's mock functionality would be overkill, so I've been trying to research packages on the internet to make it work. I came across a bunch of them (proxyquire, testouble, etc) and NONE of them worked. So by digging up Jest's repo I've found this jest-mock that is used under the hood, but I don't know how to use to mock those dependencies.
That leads to the question: which method/function does Jest calls when using jest.mock ?
I will give an example of what I want to test so, maybe, you guys can help me out (I am in a point that I can try anything, I just need to proceed with the application):
someFile.js
export const generateSomething = () => Date.now();
Creator.js
import { generateSomething } from './someFile.js';
export default () => {
const create = () => {
return { a: 1, b: generateSomething() };
}
}
So, I want to perform some unit tests on this Creator.js, then I need to mock this generateSomething function to return 0 (for example). How can I do it using this jest-mock (or any other package)? Does jest.mock call this package at all?
P.S: I don't want to use jest as testing lib, I am currently using #hapi/code with #hapi/lab
Related
im actually not sure if this is possible , but my idea is im writing a library which will be used in another app. In my library, it depends on an external dependencies, lets call it external-A.
Example in my code
import {functionA} from 'external-A'
export function helper() {
return functionA
}
The problem here is for some reason, i dont want to put external-A as dependencies in my library package.json ( i put it as peerDependency now), so it may not install together when user install my library, and may throw error here.
Is there anyway to write the code that when the app load this helper function, it will try to import or analyze whether the app has installed external-A or not. If no, it will return another fallback function that i define
Example of idea ( but i think its not working yet)
import {functionA} from 'external-A'
function fallBackHelper() { console.log('fallbackHelper') }
export function helper() {
return functionA ?? fallbackHelper
}
Abit of background:
I'm using React, and my library use simple tsc to build the code. And the app assume using webpack.
I'm working on Next.js and React-Native-Web. I managed to run them together following the official Next.js example but when I'm trying to use the Animated package from the react-native it fails with Error that the requestAnimationFrame isn't defined. Basically this functionality does the node_modules package but I set the alias in webpack to translate all react-native requires to the react-native-web so even the node_modules package should use the react-native-web.
Any suggestions on how to solve it?
ReferenceError: requestAnimationFrame is not defined
at start (...node_modules\react-native-web\
dist\cjs\vendor\react-native\Animated\animations\TimingAnimation.js:104:11)
enter code here
Thanks for any help!
The problem is in the missed RequestAnimationFrame functionality at the server. This error happens when Next.js tries to render the component during SSR.
Unfortunately, there is no polyfill, etc. for such purpose so I just decided to use the Next.js dynamic imports for a Component that has animation functionality.
Next.js Official documentation
My own case оust to show how code looks:
import dynamic from 'next/dynamic';
const AutocompleteDropdown = dynamic(
() => import(
'myAwesomeLib/components/dropdown/autocomplete/AutocompleteDropdown'
),
{
ssr: false,
}
);
Now you can use the AutocompleteDropdown as the standard JSX component
I'm coding an App with React Native Web and NextJS 12, and in 2021 I encounter this problem and I fixed it, but now I know my fix was only for Next Dev, because it returned for Next Production Build.
Solution details:
No Dynamic import (which is useful too, but can be annoying when having lot of components using it)
Using RAF polyfill and Webpack ProvidePlugin.
Main thing to have in mind is that next.config.js with webpack 5 is going to check the codes first before even reach next entry points _documents.js and _app.js. It means that, you can put polyfill in those entry point files, it will still raise error of RAF undefined. You have to make requestAnimationFrame ready for config check.
DEV approach that will work on Next DEV only. Install RAF package https://www.npmjs.com/package/raf and In next.config.js add codes:
const raf = require('raf');
raf.polyfill();
This will add requestAnimationFrame and cancelAnimationFrame function to global and window object if they don't have it. In our case, it would add it in global for NodeJS.
But this solution won't work when executing npm run dev. I don't know why, if anyone knows why Next or Webpack 5 act differently from DEV to PRODUCTION, let me know.
Complete Solution:
Use ProvidePlugin config of webpack 5 https://webpack.js.org/plugins/provide-plugin/ . Create a file to use as modules, let's say: raf.js in root project or anywhere you want:
const raf = require('raf');
const polys = {};
raf.polyfill(polys);
module.exports = polys.requestAnimationFrame;
And in next.config.js use it inside webpack: () = {} like:
webpack: (config, options) => {
// console.log('fallback', config.resolve.fallback);
if (options.isServer) {
// provide plugin
config.plugins.push(
new options.webpack.ProvidePlugin({
requestAnimationFrame: path.resolve(__dirname, './raf.js'),
}),
);
}
And now, it's up to you to adapt to your existing config logic. By doing this, in Production Build, NextJS is injecting the requestAnimationFrame function in Server Side everywhere a module is using it.
I have been studying NodeJS for about a year and today I found something strange for me. We all know that in order to use a module (function, object or variable) in another module we must export and import it except for the native modules like String, Number, Promise, etc. I installed an external package for unit testing called Jest.
The strange thing here is that I have created two test modules called: logic.js and logic.test.js, in none I have imported the Jest module, however I can access all its methods. Let's show some code:
logic.js
module.exports.add = function(a, b){
return a + b;
}
logic.test.js
const lib = require('../logic')
test('Add - Should return the sum of two numbers', () => {
const result = lib.add(1,3);
expect(result).toBe(4);
});
As you can see in logic.test.js I have access to expect and test methods and i have not impoted nothing about Jest.
The questions here are:
How is this posible?
Its a good practice to do this with my modules
As Jonas W stated in the comments, they make use of the global variable that is common to all your application.
The use of the global variable is very simple
test.js
global.myObject = 'MyMan'
app.js
require('./test')
console.log(myObject)
Loading app.js will render MyMan
You might say that I actually import the test module and that Jest does not.
The thing is that you execute your node application using node yourFile.js but you instanciate your jests tests with the jest command line.
It's the jest command line that handles the binding between its framework (the expect and test methods.) and your script.
Is it a good practice?
I would say no. Except if you plan to make a library like Jest that have its own command line launcher and that you want to give tools like that to the users of your library.
The power of Node lives into the module organization, don't be afraid to use them.
I am just re-looking at Jest as it's been getting a lot of good reports. However struggling to find a good way the access internal functions to test them.
So if I have:
const Add2 = (n)=> n+2;
export default (list)=>{
return list.map(Add2());
}
Then if I was using Jasmine or Mocha I'd use rewire or babel-plugin-rewire to get the internal Add2 function like this:
var rewire = require('rewire');
var Add2 = rewire('./Adder').__get__('Add2');
it('Should add 2 to number', ()=>{
let val = Add2(1);
expect(val).toEqual(3);
});
However neither of them seem to work with jest and while there looks like an excellent mocking syntax I can't see any way to get internal function.
Is there a good way to do this, something I'm missing on the jest api or set up?
You can actually achieve this if you are willing to use babel to transform your files before each test. Here's what you need to do (I'll assume you know how to get babel itself up and running, if not there are multiple tutorials available for that):
First, we need to install the babel-jest plugin for jest, and babel-plugin-rewire for babel:
npm install --save-dev babel-jest babel-plugin-rewire
Then you need to add a .babelrc file to your root directory. It should look something like this:
{
"plugin": ["rewire"]
}
And that should be it (assuming you have babel set up correctly). babel-jest will automatically pick up the .babelrc, so no additional config needed there unless you have other transforms in place already.
Babel will transform all the files before jest runs them, and speedskater's rewire plugin will take care of exposing the internals of your modules via the rewire API.
I was struggling with this problem for some time, and I don't think the problem is specific to Jest.
I know it's not ideal, but in many situations, I actually just decided to export the internal function, just for testing purposes:
export const Add2 = x => x + 2;
Previously, I would hate the idea of changing my code, just to make testing possible/easier. This was until I learned that this an important practice in hardware design; they add certain connection points to their piece of hardware they're designing, just so they can test whether it works properly. They are changing their design to facilitate testing.
Yes, you could totally do this with something like rewire. In my opinion, the additional complexity (and with it, mental overhead) that you introduce with such tools is not worth the payoff of having "more correct" code.
It's a trade-off, I value testing and simplicity, so for me, exporting private functions for testing purposes is fine.
This is not possible with jest. Also you should not test the internals of a module, but only the public API, cause this is what other module consume. They don't care how Add2 is implemented as long as yourModule([1,2,3]) returns [3,4,5].
I happen to need a file storage database and UploadFS seems to be the best option. My project is in Angular2 typescript and Meteor.
meteor add jalik:ufs-gridfs
So far it fails when I try to import the library like this:
import {UploadFS} from 'meteor/jalik:ufs'
The error thrown sais it couldn't find the library (on the client side).
I thought it may be because the library is in javascript while the rest of the project in typescript so I tried to write a stub ufs.d.ts, first handcrafted, then with dstmake, and then by hand again when I found I had to export the module UploadFS so that meteor (barbatus:typescript?) could see it:
declare module 'meteor/jalik:ufs' {
export module UploadFS{
interface UploadFS {
...
}
}
}
So far I had my ufs.d.ts stub file at the typings/ folder and linked in the main.d.ts. No errors at compile time. Meteor sad the DB was correctly created ... but then when I tried to use it broke.
I found that UploadFS was undefined so I supposed it wasn't referencing the library even though Meteor compiled without any error.
So I suppose the only thing I've have left is to translate jalik:ufs and jalik:ufs-gridfs to typescript by hand. Is that correct? Is there an easier way of making ufs work wit angular2-meteor?
Would you use some other storage solution? any advice either fixing this library or choosing another one?
I'm successfully importing that library and just suppressing the warnings with this line:
import 'meteor/jalik:ufs'; declare let UploadFS:any;
Keep an eye on https://github.com/meteor-typings and https://github.com/Urigo/angular2-meteor/issues/102 for proper type definitions in the future.
You should never have to re-implement a JavaScript library in TypeScript in order to use it.
import { UploadFS } from 'meteor/jalik:ufs';
console.log('UploadFS', UploadFS);
This gives me the UploadFS object and I think it's totally independent of angular2-meteor so I suppose that jalik:ufs should be working fine, even with those warnings generated by ts compiler.
About typings, those warning are very annoying, I know :) but you can pretend for now you don't see them.
Here's an example implementation of jalik:ufs I made for Angular1, but it will look pretty much the same with Angular2.
http://www.angular-meteor.com/tutorials/socially/angular1/handling-files-with-collectionfs