jest: babel7 object destructing fails in test cases
๐ Bug Report
I have a react project which I recently migrated to bable7. everything works fine but when I tried to run my test cases it started failing. all of the other issue I was able to resolve except this one.
it seems like object destructuring
seems to be failing when running jest
here is my component that fails.
import React from 'react';
import PropTypes from 'prop-types';
import { Input } from 'antd';
const { Search } = Input; // jest fails here....
class TextBoxWithButton extends React.Component {
static propTypes = {
placeholder: PropTypes.string.isRequired,
onAction: PropTypes.func.isRequired,
buttonText: PropTypes.string,
}
static defaultProps = {
buttonText: '',
}
constructor(props) {
super(props);
this.state = {
value: '',
};
}
onSubmit = (value) => {
const { onAction } = this.props;
this.setState({
value: '',
});
onAction(value);
}
handleChange = (ev) => {
this.setState({
value: ev.target.value,
});
}
render() {
const { placeholder, buttonText } = this.props;
const { value } = this.state;
return (
<React.Fragment>
<Search
placeholder={placeholder}
onSearch={this.onSubmit}
enterButton={buttonText}
value={value}
onChange={this.handleChange}
/>
</React.Fragment>
);
}
}
export default TextBoxWithButton;
here is my .babelrc
{
"presets": [
["@babel/preset-env", { "modules": false, "useBuiltIns":"usage" }],
"@babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": false }],
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"App": "./src/App",
"Common": "./src/App/Common",
"Elements": "./src/App/Elements",
"Router": "./src/App/Router",
"Constants": "./src/Constants",
"Services": "./src/Services",
"Store": "./src/Store",
"Styles": "./src/Styles",
"Assets": "./src/Assets"
}
}
]
],
"env": {
"test": {
"presets": [
["@babel/preset-env"],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
["import", { "libraryName": "antd", "style": "css" }]
]
}
}
}
here is my jest.config.js
const jestConfig = {
verbose: true,
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
},
transform: {
'^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest',
'^.+\\.js?$': '<rootDir>/node_modules/babel-jest',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
},
moduleFileExtensions: [
'js',
'jsx',
],
unmockedModulePathPatterns: [
'<rootDir>/node_modules/react/',
'<rootDir>/node_modules/react-dom/',
],
moduleDirectories: [
'node_modules',
],
transformIgnorePatterns: [
'/node_modules/',
],
coveragePathIgnorePatterns: [
'/node_modules/',
],
modulePathIgnorePatterns: [
'/node_modules/',
],
collectCoverage: true,
coverageReporters: [
'json',
'lcov',
'text',
],
};
module.exports = jestConfig // eslint-disable-line
here is my package.json
{
"name": "react-app",
"version": "1.0.0",
"main": "index.jsx",
"license": "MIT",
"scripts": {
"start": "npm run start:dev",
"start:dev": "npm run dev-server -- --mode development --env.NODE_ENV=development --env.PROXY_ORIGIN=http://localhost:3000",
"start:stage": "npm run dev-server -- --mode development --env.NODE_ENV=development --env.PROXY_ORIGIN=http://localhost:3001",
"start:dev-min": "npm run start:dev -- --env.MIN_STATS=true",
"start:analyze-speed": "npm run start:dev -- --env.addons=speedmeasure",
"build": "npm run test && webpack --optimize-minimize --mode production --env.NODE_ENV=production --env.PUBLIC_PATH=/",
"build:analyze-bundle": "npm run build -- --env.addons=bundleanalyzer",
"build:analyze-buddy": "npm run build -- --env.addons=bundlebuddy",
"dev-server": "webpack-dev-server --inline",
"test:watch": "npm run test -- --watchAll",
"test": "export BABEL_ENV=test&&NODE_ENV=test&& jest",
"profile": "webpack --env.NODE_ENV=production --progress -c --profile --json > stats.json"
},
"description": "this tool will be used to book consultation for clients.",
"dependencies": {
"@babel/polyfill": "^7.0.0",
"antd": "^3.9.0",
"axios": "^0.18.0",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-asynchronous-component": "^1.0.2",
"react-dom": "^16.4.2",
"react-hot-loader": "^4.3.5",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"regenerator-runtime": "^0.12.1",
"redux-saga": "^0.16.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-modules-commonjs": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"antd-scss-theme-plugin": "^1.0.7",
"autoprefixer": "^9.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^8.2.6",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.0",
"babel-plugin-import": "^1.8.0",
"babel-plugin-module-resolver": "^3.1.1",
"bundle-buddy-webpack-plugin": "^0.3.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.1",
"error-overlay-webpack-plugin": "^0.1.5",
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-babel-module": "^5.0.0-beta.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-css-modules": "^2.8.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"extract-text-webpack-plugin": "*",
"fast-sass-loader": "^1.4.6",
"file-loader": "^1.1.11",
"glob": "^7.1.3",
"hard-source-webpack-plugin": "^0.12.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.5.0",
"jest-cli": "^23.5.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"sass-loader": "^7.1.0",
"speed-measure-webpack-plugin": "^1.2.2",
"style-loader": "^0.22.1",
"system-bell-webpack-plugin": "*",
"uglifyjs-webpack-plugin": "^1.3.0",
"webpack": "^4.17.1",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7",
"webpack-manifest-plugin": "^2.0.3",
"webpack-merge": "^4.1.4"
}
}
here is the jest test runner fail output
FAIL src/App/Elements/__tests__/index.spec.js
โ Test suite failed to run
ReferenceError: Input is not defined
3 | import { Input } from 'antd';
4 |
> 5 | const { Search } = Input;
| ^
6 |
7 | class TextBoxWithButton extends React.Component {
8 | static propTypes = {
at Object.Input (src/App/Elements/TextBox/TextBoxWithButton/TextBoxWithButton.component.jsx:5:20)
at Object.<anonymous> (src/App/Elements/index.js:2:1)
at Object.<anonymous> (src/App/Elements/__tests__/index.spec.js:1:1)
To Reproduce
install bable7
install babel-core = 7.0.0-bridge.0
use object destructring in any component.
and run jest
Expected behavior
jest should be able to use babel-jest
and transform es6 and process it.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 6
- Comments: 17 (2 by maintainers)
Itโs might be not jest related. Removing babel-plugin-import
['import', { libraryName: 'antd', style: 'css' }]
from babel env test configuration resolves the issue. So itโs either babel-plugin-import issue, or babel-plugin-import conflicting with some other plugin.Same with jest 24.8.0
@thymikee i also tried without destructuring and it worksโฆ