Unit testing on "react + react-route" stack - javascript

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, () => {});

Related

Next.js: How to dynamically import external client-side only React components into Server-Side-Rendering apps developed?

I know this question has been asked multiple times before but none of the solution seems to work.
I'm trying to use the library 'react-chat-popup' which only renders on client side in a SSR app.(built using next.js framework) The normal way to use this library is to call import {Chat} from 'react-chat-popup' and then render it directly as <Chat/>.
The solution I have found for SSR apps is to check if typedef of window !=== 'undefined' in the componentDidMount method before dynamically importing the library as importing the library normally alone would already cause the window is not defined error. So I found the link https://github.com/zeit/next.js/issues/2940 which suggested the following:
Chat = dynamic(import('react-chat-popup').then(m => {
const {Foo} = m;
Foo.__webpackChunkName = m.__webpackChunkName;
return Foo;
}));
However, my foo object becomes null when I do this. When I print out the m object in the callback, i get {"__webpackChunkName":"react_chat_popup_6445a148970fe64a2d707d15c41abb03"} How do I properly import the library and start using the <Chat/> element in this case?
Next js now has its own way of doing dynamic imports with no SSR.
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
Here is the link of their docs: next js
I've managed to resolve this by first declaring a variable at the top:
let Chat = ''
then doing the import this way in componentDidMount:
async componentDidMount(){
let result = await import('react-chat-popup')
Chat = result.Chat
this.setState({
appIsMounted: true
})
}
and finally render it like this:
<NoSSR>
{this.state.appIsMounted? <Chat/> : null}
</NoSSR>
You may not always want to include a module on server-side. For
example, when the module includes a library that only works in the
browser.
Import the library normally in child component and import that component dynamically on parent component.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
This approach worked for me.

React Native imports not working after upgrade

Hi I've been in charge of an old React-Native iOS project and I need to upgrade its React-Native from 0.25.1 to 0.48.0 but I'm running into a lot of compiler issues and can't figure out how to update the code.
I have an index.ios.js file that looks like this:
var ReactNative = require('react-native');
var ResumeIns = require('./resume_ins_controller');
ReactNative.AppRegistry.registerComponent('ResumeInsController', () => ResumeIns.Navigation);
A resume_ins_controller.js in the root folder that looks like this:
var React = require('react');
var EntryManager = require('./entry_manager.js');
class ResumeInsNavigation extends React.Component {
//....
}
and an entry_manager.js in the root folder that looks like this:
class EntryManager {
//....
}
module.exports = EntryManager;
This code worked OK before the upgrade, but now I get this error:
Super expression must either be null or a function, not undefined
and the stack trace points to this line:
module.exports = EntryManager;
Does anyone know how to get this code working for React-Native 0.48?
There's been a ton of changes since 0.25.1. Knowing how painful updates can get, I'd suggest either:
In case of a very complex app: to update RN version by version with the help of release notes, and rn-diff if necessary.
In case of a fairly simple app: to start a new RN project from scratch, and move the app's logic over there.
Either way it would be a good idea to move to ES2015 imports for clarity on named vs default imports as the issue that you're describing is likely caused by the way things are imported, see v0.25.1 deprecations + a link to codemod that may help.
Good luck!

Components overriding eachother/Component organization in React

So I'm wondering how organization and importing (require) of components is supposed to work in React Native. I have built a small app with one main TabView component in one file, and then have another file that contains the components that go under each tab. In order to bring all those into the main file, i have a whole bunch of import statements ie:
var Following = require('./viewComponents.ios');
var Trending = require('./viewComponents.ios');
var CommentButton = require('./viewComponents.ios');
var NotificationPage = require('./viewComponents.ios');
var LikeButton = require('./viewComponents.ios');
var WishLists = require('./viewComponents.ios');
var PageForProfile = require('./viewComponents.ios');
I'm having an issue where some of my components seem to be writing over each-other, and i think it is this method of importing that is doing it. For example: my PageForProfile component is:
class PageForProfile extends Component{
render(){
return(
<Text>Hello</Text>
)
}
}
But when I write a tag to display this component:
<PageForProfile></PageForProfile>
Instead of outputting text, my "Following" component is displayed in place of the "PageForProfile" component! I've gone through as much of the React literature as I can and am still at a loss. Any help would be MOST appreciated. Cheers. (p.s. new to StackOverflow - if i've broken etiquette in the way i'm asking let me know, really appreciate your community here.)
You have not posted your viewComponents.ios structure, but it's definitely wrong what you are doing. requiring the same file will always return the same object: the one that is defined in module.exports (see What is the purpose of Node.js module.exports and how do you use it?)
You have two options:
have your components defined in different files (following.ios, trending.ios etc.) and require different file for different component.
define all of the components in one file and have module.exports to return all the components as properties of object returned by module.exports (that's what React does when importing Text, View etc. ). in this case your require will look a bit differently:
{
Following,
Trending,
....
} = require('viewComponents.ios');
No idea what's in viewComponents, but you probably need to be using braces around your variable declarations, e.g.
var {Following, Trending, CommentButton} = require('./viewComponents.ios');
This destructures the object of components that viewComponents (I'm guessing) returns.

Building Flux/React application without NodeJs EventEmitter

Hi I'm trying to build a Flux/React application with a go-lang back-end. I have been following a tutorial I found here. But I have a problem when building the store. In the tutorial something like this is used to create a base for the store.
var ProductStore = _.extend({}, EventEmitter.prototype, {...});
The problem I have is I do not have access to the EventEmitter library which I understand is a Nodejs lib? Is there an alternative I can use?
You can use NodeJS libraries in the browser! Take a look at browserify.
First some code:
// index.js
var EventEmitter = require("events").EventEmitter;
var ProductStore = function() {};
ProductStore.prototype = new EventEmitter;
Then you run browserify on it:
browserify index.js > bundle.js
Also worth a look is WebPack which does the same thing. (but has some additional features)
Well if you are using the flux implementation given by Facebook (https://github.com/facebook/flux), you can actually extends their FluxStore class which comes with a build in eventEmitter.
The only thing if you want to do that is you must use es6 classes (and use babel to transpile to es5).
The good thing about it is that you don't have to implement the addListener removeListener and emitChange methods, and that's very DRY :)
With this solution, your stores will end up looking like that :
var FluxStore = require("flux/utils").Store,
thing;
class ThingStore extends FluxStore {
getThing() {
return thing;
}
__onDispatch(payload) {
//your code
}
}

Common js modules in react native

Is it possible to make use of common js modules with react-native? The use case is sharing logic between a mobile and web version of a react project.
Ok, I'm new to this too but I think I've figured out how to include js code. I didn't have to add anything to the standard react native installation.
Create a Library of code:
//library.js
exports.foo = function() {
//Do stuff here
return "Here";
}
Import into another js file:
var lib = require("./library.js");
var myString = lib.foo();
I found the info from this blog post:
http://0fps.net/2013/01/22/commonjs-why-and-how/

Categories