I wanna run unit test at react, but when I run "npm test", it shows me this error:
navList.test.js: Unexpected token (12:26)
> 12 | let app = shallow(<NavList/>);
| ^
Following is my code:
navList.test.js
import React from 'react';
import {shallow, configure} from 'enzyme';
import {expect} from 'chai';
import {NavList} from '../components/common/nav/navList';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});
describe('NavList', function () {
it('NavList ', function () {
let app = shallow(<NavList/>);
expect(app.find('h2').length).to.equal(1);
});
});
package.json:
"scripts": {
"test": "jest"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-jest": "^22.1.0",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.0.0-beta",
"bootstrap-sass": "^3.3.7",
"chai": "^4.1.2",
"cross-env": "^5.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^22.1.4",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"mocha": "^5.0.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-test-renderer": "^16.2.0"
}
Did I miss something at install ?
It looks like the code isn't getting transpiled before jest is trying to run it (hence the Unexpected token error).
Take a look at the setup instructions here. My best guess is that you need to update your .babelrc with the react preset.
Related
I am having an error when I build my application in react. I noticed this error only when I tried to build application.
When I stopped dev server and ran it again, it showed the same error. It seems that I made some change that only showed when I started the server again or make build:
Module not found: Error: Can't resolve 'buffer' in '\node_modules\htmlparser2\lib' BREAKING CHANGE: webpack < 5
used to include polyfills for node.js core modules by default.This is
no longer the case. Verify if you need these module and configure a
polyfill for it.
If you want to include a polyfill, you need to install 'buffer'. If
you don't want to include a polyfill, you can use an empty module like
this:
resolve.alias: { "buffer": false }
error Command failed with exit code 1.
My application is made in CRA and Typescript. This is my package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#optimizely/react-sdk": "^2.4.0",
"apollo-boost": "^0.4.9",
"classnames": "^2.2.6",
"formik": "^2.2.5",
"graphql": "^15.4.0",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"react": "^16.13.1",
"react-app-polyfill": "^2.0.0",
"react-dom": "^16.13.1",
"react-google-recaptcha": "^2.1.0",
"react-masonry-css": "^1.0.14",
"react-router-dom": "^5.2.0",
"react-test-renderer": "^16.13.1",
"react-toastify": "^6.1.0",
"reset-css": "^5.0.1",
"use-debounce": "^5.1.0"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.1",
"#testing-library/user-event": "^12.2.2",
"#types/classnames": "^2.2.11",
"#types/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/jest": "^26.0.15",
"#types/lodash": "^4.14.165",
"#types/moment": "^2.13.0",
"#types/node": "^14.14.9",
"#types/react": "^16.9.56",
"#types/react-dom": "^16.9.9",
"#types/react-google-recaptcha": "^2.1.0",
"#types/react-router-dom": "^5.1.6",
"cross-env": "^7.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"enzyme-to-json": "^3.6.1",
"husky": "^4.3.0",
"jest-dom": "^4.0.0",
"jest-sonar-reporter": "^2.0.0",
"lint-staged": "^10.5.1",
"node-sass": "^5.0.0",
"prettier": "^2.2.0",
"ts-jest": "^26.4.4",
"typescript": "^4.1.2"
}
}
You need to install the buffer package
npm install buffer
You have to Install this
npm install assert browserify-zlib buffer process stream-browserify util .
it will help you out
I found a solution to my problem. It is a bit weird that it didn't show up as test error.
SOLUTION
To solve this I just replaced location of TEST_ID to be in my component, and that my-component.test file to import it from there:
My component
import React, { FunctionComponent } from 'react';
/* Tests */
export const TEST_ID = 'my-component-test-id';
export const MyComponent: FunctionComponent = () => {
return <div data-test-id={TEST_ID}>123</div>;
};
Test
import React from 'react';
import { cleanup } from '#testing-library/react';
import { mount } from 'enzyme';
import { TEST_ID } from './my-component';
import MyComponent from './my-component'
afterEach(cleanup);
it('Render My component and have some value', () => {
const wrapper = mount(<MyComponent />);
const myComponent = wrapper.find(`[data-testid='${TEST_ID}']`);
expect(myComponent).toHaveValue('some value');
});
Analysis
Apparently if you import some value (in my case a constant) from .test file, if you try and build your app, the mentioned error will show up.
In my case I had a component:
MyComponent
import React, { FunctionComponent } from 'react';
/* Tests */
import { TEST_ID } from './test/my-component.test';
export const MyComponent: FunctionComponent = () => {
return <div data-test-id={TEST_ID}>some value</div>;
};
The TEST_ID was imported from my-component.test file. The purpose of that constant was to have that test id set for component so I can find that element based of that test id in my test.
Test
import React from 'react';
import { cleanup } from '#testing-library/react';
import { mount } from 'enzyme';
import MyComponent from './my-component'
afterEach(cleanup);
export const TEST_ID = 'my-component-test-id';
it('Render My component and have some value', () => {
const wrapper = mount(<MyComponent />);
const myComponent = wrapper.find(`[data-testid='${TEST_ID}']`);
expect(myComponent).toHaveValue('some value');
});
you need to install 'buffer' : npm install buffer oR npm install buffer --f
trying to run a reactjs application , but I am getting this error
Module build failed: TypeError: fileSystem.statSync is not a function
My package.json file looks like this
{
"name": "stellar-laboratory",
"version": "0.0.1",
"private": true,
"description": "",
"author": "Stellar Development Foundation <stellar#stellar.org>",
"license": "Apache-2.0",
"scripts": {
"start": "gulp develop",
"build": "gulp build"
},
"dependencies": {
"#ledgerhq/hw-app-str": "^4.14.0",
"#ledgerhq/hw-transport-u2f": "^4.13.0",
"axios": "^0.8.1",
"babel-loader": "^7.1.5",
"babel-preset-stage-2": "^6.24.1",
"babel-core": "^6.0.20",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.0.15",
"bluebird": "^3.5.1",
"browser-sync": "^2.9.11",
"chai": "^3.5.0",
"classnames": "^2.2.0",
"css-loader": "^0.18.0",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"gulp": "^3.9.0",
"gulp-mocha": "^2.2.0",
"html-webpack-plugin": "^1.6.2",
"json-loader": "^0.5.3",
"lodash": "^4.17.5",
"mocha": "^2.4.5",
"node-sass": "^4.7.2",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-redux": "^4.0.0",
"redux": "^3.0.4",
"redux-thunk": "^1.0.0",
"route-recognizer": "^0.1.9",
"sass-loader": "^3.2.3",
"solar-css": "git+https://github.com/stellar/solar#master",
"solar-stellarorg": "git+https://github.com/stellar/solar-stellarorg#master",
"stellar-sdk": "^0.11.0",
"uri-templates": "^0.1.9",
"urijs": "^1.16.0",
"webpack": "^1.13.2"
}
}
Update
Then I downgraded my babel-loader to ^7.1.1
**post to that I am gettting this error
Module build failed: SyntaxError: Unexpected token (42:2)
app.js
require("./styles/main.scss");
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux';
import {throttle} from 'lodash';
import rootReducer from './reducers/root';
import logging from './middleware/logging';
import {routerMiddleware} from './utilities/simpleRouter';
import LaboratoryChrome from './components/LaboratoryChrome';
import {loadState, saveState} from './localStorage';
const persistedState = loadState();
import StellarSdk from 'stellar-sdk';
if (typeof window !== "undefined") {
window.StellarSdk = StellarSdk;
}
document.write('<div id="app"></div>');
let createStoreWithMiddleware = applyMiddleware(
thunk,
routerMiddleware,
logging
)(createStore);
let store = createStoreWithMiddleware(rootReducer, persistedState);
store.subscribe(throttle(() => {
saveState({
network: store.getState().network
});
}, 1000));
ReactDOM.render(
<Provider store={store}>
<LaboratoryChrome />
</Provider>,
document.getElementById('app')
);
Fixed it by just using Yarn instead
I am trying to add the #DragDropContext decorator on my class but I am getting an error when I load it in my browser.
My component looks like:
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserShowView extends React.Component {
}
export default connect(mapStateToProps)(UserShowView);
This is what the error looks like in chrome console:
bundle.js:977 Uncaught Error: Expected the backend to be a function or
an ES6 module exporting a default function. Read more:
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html
My babelrc file:
{
"plugins": ["transform-decorators-legacy"],
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
packages.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node tools/srcServer.js",
"test": "NODE_ENV=test jest",
"lint": "eslint --max-warnings=0 src test",
"test:watch": "NODE_ENV=test jest --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"colors": "^1.1.2",
"compression": "^1.7.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"express": "^4.16.2",
"jest": "^22.0.6",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.10.1",
"webpack-hot-middleware": "^2.21.0"
},
"dependencies": {
"axios": "^0.17.1",
"history": "^4.7.2",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
}
What am I doing wrong or am I missing a babel preset?
Is my "transform-decorators-legacy" even working?
As the error messages shows, #DragDropContext(HTML5Backend) is expecting a module or function.
From the documentation you should be importing the HTML5Backend module with:
import HTML5Backend from 'react-dnd-html5-backend';
Since you are using
import { HTML5Backend } from 'react-dnd-html5-backend';
You are trying to import a specific export that doesn't exist thus DragDropContext showing the error.
Importing with curly brackets is for specific exports vs without curly brackets which is for default exports.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
for more information on different ways of importing modules and functions.
Just remove the curly braces around HTML5Backend
import HTML5Backend from 'react-dnd-html5-backend';
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html#usage
I am trying to get started in building a react application using konva, react-konva.
I built a basic react component:
import React, { Component } from "react";
import { Stage } from "react-konva";
import Square from "./Square.jsx";
class Map extends Component {
render() {
return (
<Stage height={100} width={100}>
<Layer>
</Layer>
</Stage>
);
}
}
export default Map;
and also a test using jest:
/* global beforeEach describe expect it */
import { shallow } from "enzyme";
import React from "react";
import Map from "../Map";
function createComponent() {
const wrapper = shallow(
<Map />
);
return wrapper;
}
describe("Map component test", () => {
describe("When initializing the component", () => {
let sut;
beforeEach(() => {
sut = createComponent();
});
it("it should render a Stage component", () => {
expect(sut.find("Stage").exists()).toBe(true);
});
});
});
When this test runs, I get the following error:
TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null
at node_modules/konva/konva.js:1291:36
at node_modules/konva/konva.js:1298:7
at Object.<anonymous> (node_modules/konva/konva.js:1477:3)
at Object.<anonymous> (node_modules/react-konva/src/react-konva.js:4:13)
at Object.<anonymous> (src/mapping/Map.jsx:2:19)
at Object.<anonymous> (src/mapping/MapContainer.js:3:12)
at Object.<anonymous> (src/App.jsx:3:21)
at Object.<anonymous> (src/tests/App.spec.js:5:12)
My dependencies from package.json:
"dependencies": {
"konva": "^1.6.3",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-konva": "^1.1.3",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"canvas": "^1.6.5",
"chalk": "^1.1.3",
"coveralls": "^2.13.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.5.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"eslint-watch": "^3.1.2",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"jsdom": "^11.1.0",
"node-gyp": "^3.6.2",
"npm-run-all": "^4.0.2",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"style-loader": "^0.18.2",
"webpack": "^3.0.0"
}
I'm sure that this is related to node setup, but I am unsure of the correct way to do it. Can anyone help?
I fixed it by installing and using konva-node in my test:
import Konva from 'konva-node';
I also had to specify that it's not used in the browser before executing any tests:
Konva.isBrowser = false;
I am using the following dependencies:
"dependencies": {
"axios": "^0.18.0",
"konva": "^2.5.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-konva": "^16.5.2",
"react-scripts": "2.0.5"
},
"devDependencies": {
"chai": "^4.2.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"konva-node": "^0.5.5",
"sinon": "^7.1.1",
"sinon-chai": "^3.2.0"
},
There are several options:
The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.
Using https://github.com/hustcc/jest-canvas-mock. If you are using Create React App just add import 'jest-canvas-mock' in your setupTests.js
Theoretically npm i -D canvas should solve this problem as well but I have not managed to make it work. Read here https://github.com/jsdom/jsdom/issues/1782 for more ideas.
I am new to reactjs. I am using react-native and I wanted to import react-redux.
But I keep getting:
"development server response 500.
Message: {transform error: .../node_modules/redux/lib/index.js:
{babel}..../node_modules/redux/lib/index.js:
Using removed babel 5 option: .../node_modules/redux/.babelrc.stage - check out the corresponding stage x presets http://babeljs.io/docs/plugins/#presets".
My package.json looks like
"dependencies": {
"react": "15.3.2",
"react-native": "0.36.0",
"react-native-pathjs-charts": "0.0.20",
"react-native-svg": "^4.3.1",
"react-redux": "^4.4.5",
"redux": "^2.0.0"
},
"devDependencies": {
"babel-core": "6.3.26",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-1": "6.5.0",
"eslint": "2.3.0",
"eslint-config-standard": "5.1.0",
"eslint-plugin-promise": "1.1.0",
"eslint-plugin-react": "4.1.0",
"eslint-plugin-standard": "1.3.2"
}
My .babelrc looks like
{
"presets": ["react-native", "stage-0"]
}
I am importing in my component like below
import React, { Component } from 'react'
import {
View, Text, StyleSheet, ScrollView,
TouchableHighlight
} from 'react-native'
import { connect } from 'react-redux/src/index';
Any idea how to import react-redux into my component? Thank you!