{
"name": "react-test-renderer",
"description": "Custom React renderer for use in unit testing.",
"version": "1.14.7",
"author": "Jon Cooper ",
"license": "MIT",
"repository": "facebook/react",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://github.com/facebook/react",
"keywords": [
"react",
"test",
"renderer"
],
"main": "react.development.js",
"files": [
"*.js",
"lib",
"template",
"cli.js",
"README.md",
"LICENSE"
],
"scripts": {
"lint": "eslint .",
"prepack": "npm run clean",
"build": "npm run clean && rollup -c",
"watch": "npm run clean && rollup -c -w",
"postpack": "npm run lint",
"test": "node ./node_modules/react-scripts/bin/react-test"
},
"dependencies": {
"chalk": "^1.1.3",
"jsdom": "^10.6.0",
"react": "^16.5.0",
"react-addons-shallow-compare": "^15.6.2",
"react-dom": "^16.5.0",
"react-scripts": "^1.1.4"
},
"peerDependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-jest": "^21.0.3",
"babel-plugin-module-resolver": "^3.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"jest": "^21.0.1",
"react-test-renderer": "^16.2.0",
"rollup": "^0.51.1",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^1.1.0"
},
"jest": {
"setupTestFrameworkScriptFile": "react-app-polyfill/jsdom"
}
}
}
A:
The problem you are having is that you are trying to use this on a react method which doesn't exist when you are working with ES6 import and export syntax. This will be fixed in React 16.6.0 (which should be released some time next month).
An example of your problem would be this:
export default class MyClass extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John'
};
}
render() {
return (
Name is {this.state.name}
);
}
}
Now, if you look at the render method you will see the name property inside the jsx braces. This means that you are setting the property name from a js object which would look like {name: 'John'} on your state object.
To fix this you can move your jsx block into the render method:
render() {
return (
<>
Name is {this.state.name}
);
}
}
When you fix that you will see that you now are no longer allowed to use the this keyword on your render method, because in ES6 this is not possible.
Check the official docs on exporting React components from ES6: https://reactjs.org/docs/esm.html#exported-components
You can also use Babel's babel-plugin-transform-class-properties plugin to automate this and other nice things for you.
A:
Just for the sake of completeness: ES6 export / import syntax allows you to use the full power of "this" inside the component.
As per this ES6: How to use Babel Preset? post, you can use @babel/preset-stage-3, add the transform-class-properties plugin:
$ npm install babel-plugin-transform-class-properties --save-dev
and use the es2015 preset to set up the preset stage 3.
"babel": {
"plugins": [
"@babel/preset-stage-3",
"transform-class-properties"
]
}
...and voila, class properties work!
(I tested this in both React v16.6.0 and 15.6.1)
A:
You need to install transform-class-properties plugin and add it as a transform in babel:
"babel": {
"plugins": ["transform-class-properties"]
}
Then use this syntax:
class Example extends React.Component {
foo(){
return "bar";
}
render() {
return
{this.foo()}
}
}
For those using @babel/preset-react and @babel/preset-env it is very important to run the following line:
babelConfig: {
presets: ['@babel/preset-react', '@babel/preset-env'],
},
This will trigger the transform-class-properties to be executed when import statement is executed.
