We Keep Coding

How to dynamically import moment.js in a react app (with typescript)

I'm trying to do some code splitting and moment.js is one of the targeted packages I want to isolate in a separate chunk. I'm doing it like this:
const myFn = async (currentNb) => {
const moment = (await import('moment')).default()
const dateUnix: number = moment(currentNb).valueOf()
[...]
}
But I get the following error: this expression is not callable. Type Moment has no call signatures . So I guess I should be doing something like moment.valueOf(currentNb) but I'm not really sure. Can someone put some light to this? Thanks in advance

So apparently my syntax was incorrect. I finally found how to solve this problem. I need to import it as follows:
const {default: moment} = await import('moment')
I found the answer in the webpack documentation:
The reason we need default is that since webpack 4, when importing a
CommonJS module, the import will no longer resolve to the value of
module.exports, it will instead create an artificial namespace object
for the CommonJS module.

graphqlKoa is not a function

I am starting to learn Javascript from a C# background and have started building a simple GraphQL API as my first project but I am struggling to get example code working and I am not sure where to look for the solution.
I am following the usage section here: https://www.npmjs.com/package/apollo-server-koa
But the following line is throwing an error:
router.post('/graphql', graphqlKoa({ schema: ironManSchema }));
TypeError: graphqlKoa is not a function
I am not sure what is causing this, is it a bug in the example code? A problem with trying to use ES6? Something caused by the version of Node.JS I have installed? (Upgraded to 10.1.0 just in case) Or perhaps it is because I am trying to debug it in Visual Studio Code.

apollo-server-koa has no graphqlKoa anymore since 2.x. You should use 1.x version.

The apollo-server-koa module does not export a function -- if it did then you would be able to simply import it like this:
const graphqlKoa = require('apollo-server-koa')
Instead, it effectively exports an object, with one of it's properties being graphqlKoa, which is a function. That means to use it in your project, you should do one of the following:
const apolloServer = require('apollo-server-koa')
const graphqlKoa = apolloServer.graphqlKoa
const graphqlKoa = require('apollo-server-koa').graphqlKoa
const { graphqlKoa } = require('apollo-server-koa')
// ES6 syntax
import { graphqlKoa } from 'apollo-server-koa'
The curly brackets in the third example are just destructuring assignment syntax.

Testing URL query string in nodejs

Hey everyone I made a package that can manage and control URL query strings.
I publish it throw npm. and wrote some tests to the core of the package
"parser.js" - that parse the query string to an object
"strigifyer.js" - that make an object to URL query string
I test those files for now with "mocha" and "expect"
there is one main file that manage the above files and the file is also push to query string to URL without refresh. it uses the window.history object.
what should I do to success to test the main file (index.js)?
I need the window and history objects to check if there is a change after I use my api.
here is the package if its help:
https://github.com/nevos12/query-string-manager
thank you.

If I understood correct, the module that exposes your library is src/index.js
From the code style of your index.js, I'd suggest to use sinon to test your code flow.
A unit test could be :
import sinon from 'sinon'
import qs from 'src/index.js'
it('should reset queryStringObject', () => {
const pushToUrlSpy = sinon.spy(qs, 'pushToUrl');
qs.reset(true);
expect(qs.queryStringObject).to.equal({});
expect(pushToUrlSpy.called);
pushToUrlSpy.restore();
})
This code creates a spy on pushToUrl() , invokes reset() and asserts that queryStringObject is an empty object now and pushToUrl() was invoked as least once. In the end it restores the spy, otherwise other tests might act weird.

React - webpack exports

Edit - Answer: encapsulating the imports work as required:
# index.js
var myLibrary {
ProfileApp: require('./components/ProfileApp.react'),
ProfileStore: require('./stores/ProfileStore'),
}
module.exports = myLibrary;
I can now do
var lib = require('myLibrary');
var ProfileApp = lib.ProfileApp;
End of edit
I have developped a react/flux libray which I need to package using webpack. I do this for the first time and my exports seem wrong... (the library itself works well).
My (simplified) index.js file is
# index.js
module.exports = require('./components/ProfileApp.react');
module.exports = require('./stores/ProfileStore');
...
The code is correctly compiled and installed in node_modules, but does not work when imported.
# whatever.file.doing.imports
var myLibrary = require('myLibrary'); # works well
var ProfileApp = myLibrary.ProfileApp; # works only if I call it --> myLibrary.ProfileApp()
var ProfileStore = myLibrary.ProfileStore; # does not work and myLibrary.ProfileStore() raises "is not a function error"
I think my exports in index.js should use another syntax. For instance, React Router (https://github.com/rackt/react-router/blob/master/modules/index.js) uses
export Router from './Router';
# which can be simply instantiated writing
var Router = ReactRouter.Router;
This syntax raises an error when used in my library. Do you know if I have to use plugin to be able to use this syntax, or if I can write it differently?
Thank you very much!

The special export syntax that React Router uses is from ES6 and is "transpiled" by the Babel loader that you see in use in the webpack config on line 23. Also note that that line only applies to files that have a ".js" extension. Since you have files with ".react" extensions, you may need to change that line.
Unfortunately that does not explain your issue with having to call ProfileApp as a function. Maybe if you posted the code for the ProfileApp and ProfileStore, that would help.

Unit testing on "react + react-route" stack

I've read many recommendations of how it's possible to render routed via react-router components, but I still can't to make it work. I tried to find it using github codebase search, still no luck. And at this point all I need is one working example.
Here is my boilerplate project, but maybe it's not important. I just want to see some react-route unit-testing working example.

I got mine working after I found the super-secret hidden react-router testing guide.
Instead of using Object.assign to create a router stub, I used sinon.js so I could create better stub functions that return the appropriate values for my tests.
EDIT: Went back to look again at your boilerplate and saw that your stub router is borrowed from the same example. Sorry. So where exactly did you get stuck?
EDIT-AGAIN: I'm not using Jest, so here are the other pieces that I needed to solve the testing puzzle:
If you're using browserify, and want to test in plain mocha (without having to build), you'll need to hack require to compile your jsx for you:
var fs = require("fs");
var reactTools = require("react-tools");
require.extensions[".jsx"] = function(module, filename) {
var jsxContent = fs.readFileSync(filename).toString();
var jsContent = reactTools.transform(jsxContent);
return module._compile(jsContent, filename);
};
You need a fake DOM. JSDOM is just plain terrible. I got it working using domino instead.
var domino = require("domino");
global.window = domino.createWindow();
global.document = global.window.document;
//Set the NODE_ENV so we can call `render`.
//Otherwise we get an error from react about server rendering. :(
process.env.NODE_ENV = "test";
Then you can require your components in through the stub-router, and render your components into DOM nodes using React.render():
var MyComponent = fakeRouter(require("./MyComponent.jsx"));
var component = React.render(
< MyComponent / > ,
document.body
);
node = component.getDOMNode();
//I used `zepto-node` and `chai-jq` to assert against my components

The (possbily new in v4) way of doing this is to wrap the component you're testing in the MemoryRouter provided by react-router.
import {MemoryRouter} from 'react-router-dom';
import {render} from 'react-dom';
render(<MemoryRouter>
<YourComponent>
</MemoryRouter>, node, () => {});