I am having to call my react component as component.Component, like below. Also to note, the first part is the file name. If the rename the file, I have to say (newFileName.LikeButton).
instead of
ReactDOM.render(React.createElement(LikeButton) , domContainer);
Any idea how I can resolve this? Here is my setup. My babel.config.json
{
"presets": ["#babel/preset-react", "#babel/preset-env" ],
"plugins": [ "#babel/plugin-transform-modules-umd" ]
}
my react component in likeButton.jsx
export class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
);
}
}
Warning, this answer is speculative (but too long for a comment)
I suspect your imports look something like this:
import likeButton from './somePath/likeButton'
but, because you are using named exports, (as opposed to default exports), your import should actually look like:
import { LikeButton } from './somePath/likeButton'
to "destructure" LikeButton from the module.
Related
I'm creating a node module for React just to try myself out and learn more. But I'm facing a problem. I want to make this module without any dependencies (except React) but I also want to have I18n in my module. I have started out like with this file structure:
src
|- Components
| |- myComponent.jsx
|
|- I18n
| |- en-us.js
| |- sv-se.js
|
|- index.jsx
So I want to use the I18n js files depending on which language the user calls to the module. Here are my current files:
index.jsx:
import React from 'react';
import Component from './Components/component';
class MyNewModule extends React.Component {
constructor(props) {
super(props);
this.state = {
greetings: [],
};
}
componentDidMount() {
this.setState({ greetings: [
'Hola',
'Como estas?',
'Como te llamas?',
] }); // Will use props later so user can send to module
}
render() {
return (
<Component greetings={this.state.greetings} locale={this.props.locale} />
);
}
}
export default MyNewModule;
myComponent.jsx:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
greetings: [],
};
this.getGreetings = this.getGreetings.bind(this);
}
componentDidMount() {
this.getGreetings();
}
getGreetings() {
let greetings;
if (props.greetings && props.greetings.length) {
greetings = props.greetings;
} else {
greetings = []; // HERE I WANT TO FETCH GREETINGS FROM FILE BY props.locale
}
this.setState({ greetings });
}
render() {
return (
<div>
{this.state.greetings.map((g, i) => {
return (
<div key={i}>
{g}
</div>
);
})}
</div>
);
}
}
export default MyComponent;
en-us.js:
function Lang() {
return {
greetings: [
'Hello',
'How are you?',
'What is your name?',
],
};
}
export default Lang;
sv-se.js
function Lang() {
return {
greetings: [
'Hej',
'Hur mår du?',
'Vad heter du?',
],
};
}
export default Lang;
As you can see I want to basically fetch the greetings from the corrent language file, depending on which locale the user use as property.
I have tried finding a good way to do this, and the only way I have found is to use require as stated in Dynamically import language json file for react / react-intl but I feel that there might be a better and more "reacty" way to do this.
Any suggestions?
EDIT 1:
After suggestion from #Ozan Manav I changed the language files to use
function Lang() {
greetings: [
'Hello',
'How are you?',
'What is your name?',
],
}
and call it by using:
greetings = require(`./I18n/${this.props.locale}.js`).Lang.greetings;
but I would still like to not have to use require if possible.
Why are you trying to return it as a function?
Maybe you can use as Greetings ["en-EN"] or Greetings ["sv-SE"]
export const Greetings = {
"en-EN": ["Hello", "How are you?", "What is your name?"],
"sv-SE": ["Hej", "Hur mår du?", "Vad heter du?"],
};
Could that be?
Below code failed with jest, I got unexpected token error
export default class Search extends Component {
state = { // problem is here
q: ''
}
onChange = e => {
this.setState({
q: e.target.value
})
}
render() {
return (
<div>
<input onChange={this.onChange} placeholder="search" />
</div>
)
}
}
I'm using babel-7, any plugin I need to pull in for jest?
I'm using jest version ^23.6.0
You need to add babel-plugin-transform-class-properties if you want to use class properties. So install it then make sure you add it as a plugin in your .babelrc file like this:
"plugins": [
"#babel/plugin-proposal-class-properties"
]
Either use a constructor and define your state with this.state:
constructor(props) {
super(props)
this.state = {
q: ''
}
}
or use https://www.npmjs.com/package/babel-plugin-transform-class-properties.
Class fields are still a stage 3 proposal https://github.com/tc39/proposal-class-fields
I use i18next to translate my components in separate repo. Now I need to use method from one component in my main project.
This is example component:
class ExampleComponent extends React.Component {
constructor(props) {
this.state = {
text: '',
};
this.resetText = this.resetText.bind(this);
}
resetText() {
this.setState({
text: '',
});
}
render() {
<div/>
}
export default translate('components', { withRef: true })(ExampleComponent);
And now I need to use resetText in my main project, without translations it works fine
class MainComponent extends Component {
resetComponent() {
return () => this.exampleComponent.resetText();
}
renderExampleComponent() {
return (
<ExampleComponent
ref={(exampleComponent) => { this.exampleComponent = exampleComponent; }}
/>
);
}
render() {
return (
<div>
{this.resetComponent()}
</div>
);
}
I tried this.refs.exampleComponent.resetText(); but it not works.
In i18next documentation I found "withRef | store a ref to the wrapped component and access it by decoratedComponent.getWrappedInstance();" but where should I use this getWrappedInstance() to make it works?
Someone have experience with this?
Greetings
I think with the provided code, your ref returns a wrapper, so you need to call getWrappedInstance on it: this.refs.exampleComponent.getWrappedInstance().resetText();
Question clarification:
Specifically, Id like to know how the example below can be written without typescript. Understanding how to declare properties on classes etc. would be useful to me. I believe it should be possible to use blueprintjs (which is written in typescript), without using typescript in my implementations.
I'm following docs at:http://blueprintjs.com/docs/#components.toaster.js.react
There is sample code like this:
import { Button, Position, Toaster } from "#blueprintjs/core";
class MyComponent extends React.Component {
private toaster: Toaster;
private refHandlers = {
toaster: (ref: Toaster) => this.toaster = ref,
};
public render() {
return (
<div>
<Button onClick={this.addToast} text="Procure toast" />
<Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
</div>
)
}
private addToast = () => {
this.toaster.show({ message: "Toasted!" });
}
}
But I get Syntax Error: Unexpected token, expected ( (5:16) which is the 'toaster' after 'private'. I am not precompiling typescript. I'm using es6 with webpack. How would I re-write this sample code to work with my environment?
Thanks.
blueprintjs is implemented using typescript, and that example is using typescript syntax.
See: http://blueprintjs.com/docs/#TypeScript
Here's how I did it. I got a bit of help from webpack based on this tutorial: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html. I set the target in the tsconfig.json configuration file to es6, and this is what webpack compiled to (more or less).
Any manual improvements to this solution welcome.
import {Button, Position, Toaster} from "#blueprintjs/core";
class ToastLauncher extends React.Component {
constructor(props) {
super(props);
this.refHandlers = {
toaster: (ref) => this.toaster = ref,
};
this.addToast = () => {
this.toaster.show({ message: "Toasted!" });
};
}
render() {
return (
<div>
<Button onClick={this.addToast} text="Procure toast" />
<Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
</div>
)
}
}
export default ToastLauncher
I am following this tutorial: http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/
Trying to learn how "shallow rendering" works.
I have a higher order component:
import React from 'react';
function withMUI(ComposedComponent) {
return class withMUI {
render() {
return <ComposedComponent {...this.props}/>;
}
};
}
and a component:
#withMUI
class PlayerProfile extends React.Component {
render() {
const { name, avatar } = this.props;
return (
<div className="player-profile">
<div className='profile-name'>{name}</div>
<div>
<Avatar src={avatar}/>
</div>
</div>
);
}
}
and a test:
describe('PlayerProfile component - testing with shallow rendering', () => {
beforeEach(function() {
let {TestUtils} = React.addons;
this.TestUtils = TestUtils;
this.renderer = TestUtils.createRenderer();
this.renderer.render(<PlayerProfile name='user'
avatar='avatar'/>);
});
it('renders an Avatar', function() {
let result = this.renderer.getRenderOutput();
console.log(result);
expect(result.type).to.equal(PlayerProfile);
});
});
The result variable holds this.renderer.getRenderOutput()
In the tutorial the result.type is tested like:
expect(result.type).toEqual('div');
in my case, if I log the result it is:
LOG: Object{type: function PlayerProfile() {..}, .. }
so I changed my test like:
expect(result.type).toEqual(PlayerProfile)
now it gives me this error:
Assertion Error: expected [Function: PlayerProfile] to equal [Function: withMUI]
So PlayerProfile's type is the higher order function withMUI.
PlayerProfile decorated with withMUI, using shallow rendering, only the PlayerProfile component is rendered and not it's children. So shallow rendering wouldn't work with decorated components I assume.
My question is:
Why in the tutorial result.type is expected to be a div, but in my case isn't.
How can I test a React component decorated with higher order component using shallow rendering?
You can't. First let's slightly desugar the decorator:
let PlayerProfile = withMUI(
class PlayerProfile extends React.Component {
// ...
}
);
withMUI returns a different class, so the PlayerProfile class only exists in withMUI's closure.
This is here's a simplified version:
var withMUI = function(arg){ return null };
var PlayerProfile = withMUI({functionIWantToTest: ...});
You pass the value to the function, it doesn't give it back, you don't have the value.
The solution? Hold a reference to it.
// no decorator here
class PlayerProfile extends React.Component {
// ...
}
Then we can export both the wrapped and unwrapped versions of the component:
// this must be after the class is declared, unfortunately
export default withMUI(PlayerProfile);
export let undecorated = PlayerProfile;
The normal code using this component doesn't change, but your tests will use this:
import {undecorated as PlayerProfile} from '../src/PlayerProfile';
The alternative is to mock the withMUI function to be (x) => x (the identity function). This may cause weird side effects and needs to be done from the testing side, so your tests and source could fall out of sync as decorators are added.
Not using decorators seems like the safe option here.
Use Enzyme to test higher order / decorators with Shallow
with a method called dive()
Follow this link, to see how dive works
https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/dive.md
So you can shallow the component with higher order and then dive inside.
In the above example :
const wrapper=shallow(<PlayerProfile name={name} avatar={}/>)
expect(wrapper.find("PlayerProfile").dive().find(".player-profile").length).toBe(1)
Similarly you can access the properties and test it.
You can use 'babel-plugin-remove-decorators' plugin. This solution will let you write your components normally without exporting decorated and un-decorated components.
Install the plugin first, then create a file with the following content, let us call it 'babelTestingHook.js'
require('babel/register')({
'stage': 2,
'optional': [
'es7.classProperties',
'es7.decorators',
// or Whatever configs you have
.....
],
'plugins': ['babel-plugin-remove-decorators:before']
});
and running your tests like below will ignore the decorators and you will be able to test the components normally
mocha ./tests/**/*.spec.js --require ./babelTestingHook.js --recursive
I think the above example is confusing because the decorator concept is used interchangeably with idea of a "higher order component". I generally use them in combination which will make testing/rewire/mocking easier.
I would use decorator to:
Provide props to a child component, generally to bind/listen to a flux store
Where as I would use a higher order component
to bind context in a more declarative way
The problem with rewiring is I don't think you can rewire anything that is applied outside of the exported function/class, which is the case for a decorator.
If you wanted to use a combo of decorators and higher order components you could do something like the following:
//withMui-decorator.jsx
function withMUI(ComposedComponent) {
return class withMUI extends Component {
constructor(props) {
super(props);
this.state = {
store1: ///bind here based on some getter
};
}
render() {
return <ComposedComponent {...this.props} {...this.state} {...this.context} />;
}
};
}
//higher-order.jsx
export default function(ChildComp) {
#withMui //provide store bindings
return class HOC extends Component {
static childContextTypes = {
getAvatar: PropTypes.func
};
getChildContext() {
let {store1} = this.props;
return {
getAvatar: (id) => ({ avatar: store1[id] });
};
}
}
}
//child.js
export default Child extends Component {
static contextTypes = {
getAvatar: PropTypes.func.isRequired
};
handleClick(id, e) {
let {getAvatar} = this.context;
getAvatar(`user_${id}`);
}
render() {
let buttons = [1,2,3].map((id) => {
return <button type="text" onClick={this.handleClick.bind(this, id)}>Click Me</button>
});
return <div>{buttons}</div>;
}
}
//index.jsx
import HOC from './higher-order';
import Child from './child';
let MyComponent = HOC(Child);
React.render(<MyComponent {...anyProps} />, document.body);
Then when you want to test you can easily "rewire" your stores supplied from the decorator because the decorator is inside of the exported higher order component;
//spec.js
import HOC from 'higher-order-component';
import Child from 'child';
describe('rewire the state', () => {
let mockedMuiDecorator = function withMUI(ComposedComponent) {
return class withMUI extends Component {
constructor(props) {
super(props);
this.state = {
store1: ///mock that state here to be passed as props
};
}
render() {
//....
}
}
}
HOC.__Rewire__('withMui', mockedMuiDecorator);
let MyComponent = HOC(Child);
let child = TestUtils.renderIntoDocument(
<MyComponent {...mockedProps} />
);
let childElem = React.findDOMNode(child);
let buttons = childElem.querySelectorAll('button');
it('Should render 3 buttons', () => {
expect(buttons.length).to.equal(3);
});
});
I'm pretty sure this doesn't really answer your original question but I think you are having problems reconciling when to use decorators vs.higher order components.
some good resources are here:
http://jaysoo.ca/2015/06/09/react-contexts-and-dependency-injection/
https://medium.com/#dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
https://github.com/badsyntax/react-seed/blob/master/app/components/Menu/tests/Menu-test.jsx
https://github.com/Yomguithereal/baobab-react/blob/master/test/suites/higher-order.jsx
In my case decorators are very useful and I dont want to get rid of them (or return wrapped and unwrapped versions) im my application.
The best way to do this in my opinion is to use the babel-plugin-remove-decorators (which can be used to remove them in tests) has Qusai says, but I wrote the pre-processor differently like below:
'use strict';
var babel = require('babel-core');
module.exports = {
process: function(src, filename) {
// Ignore files other than .js, .es, .jsx or .es6
if (!babel.canCompile(filename)) {
return '';
}
if (filename.indexOf('node_modules') === -1) {
return babel.transform(src, {
filename: filename,
plugins: ['babel-plugin-remove-decorators:before']
}).code;
}
return src;
}
};
Take notice of the babel.transform call that im passing the babel-plugin-remove-decorators:before element as an array value, see: https://babeljs.io/docs/usage/options/
To hook this up with Jest (which is what I used), you can do it with settings like below in your package.json:
"jest": {
"rootDir": "./src",
"scriptPreprocessor": "../preprocessor.js",
"unmockedModulePathPatterns": [
"fbjs",
"react"
]
},
Where preprocessor.js is the name of the preprocessor.