I am trying to setup react app for enzyme + jest testing but getting error on yarn test
My package.json is
{
"scripts": {
"start": "webpack-dev-server --hot --open",
"build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
"precommit": "lint-staged",
"format": "prettier --fix --write \"app/**/*.{js,jsx,json,css,scss}\"",
"test": "jest"
},
"jest": {
"moduleNameMapper": {
"^config$": "<rootDir>/jest.config.js"
}
},
"license": "MIT",
"dependencies": {
"#types/react": "^16.3.16",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"react": "^16.3.2",
"react-slick": "^0.24.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.4",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-polyfill": "^6.16.0",
"husky": "^0.14.3",
"jest": "^23.4.2",
"jest-cli": "^23.6.0",
"jest-enzyme": "^7.0.2",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.1"
}
}
And my setupTests.js. I found this on github
global.matchMedia =
global.matchMedia ||
function() {
return {
matches: false,
addListener() {},
removeListener() {},
};
};
I have jest.config.js to
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json'],
transform: {
'^.+\\.(js|jsx)?$': 'babel-jest',
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
};
Any idea how to solve the issue ? I have search a lot but find nothing.
In setupTests.js put
window.matchMedia = window.matchMedia || function() {
return {
matches : false,
addListener : function() {},
removeListener: function() {}
};
};
stop all tasks and then run npm test. SHould work now.
link
Related
I'm trying to build nextjs project on ubuntu server on digtailocan node -v
15.8.0
yarn -v
1.22.5
os ubuntu 20.04
it's success build on my macOS but not build on the server I don't know why it
also builds success on windows
package.json
"name": "travelyalla-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"start": "next start -p 3006",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.0.6",
"antd": "^4.4.2",
"axios": "^0.20.0",
"babel-plugin-import": "^1.13.0",
"less": "^3.11.1",
"less-vars-to-js": "^1.3.0",
"next": "^9.4.4",
"next-redux-wrapper": "^4.0.1",
"node-sass": "^4.14.0",
"react": "^16.12.0",
"react-dom": "^16.13.1",
"react-qr-code": "^1.0.2",
"react-redux": "^7.1.3",
"react-redux-i18n": "^1.9.3",
"react-slick": "^0.27.13",
"react-thunk": "^1.0.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"universal-cookie": "^4.0.3"
},
"devDependencies": {
"#types/next-redux-wrapper": "^3.0.0",
"#types/node": "^13.1.5",
"#types/react": "^16.9.17",
"#types/react-redux": "^7.1.5",
"#zeit/next-css": "^1.0.1",
"#zeit/next-sass": "^1.0.1",
"#zeit/next-typescript": "^1.1.1",
"next-images": "^1.3.0",
"sass-resources-loader": "^2.1.1",
"typescript": "^3.7.4",
"url-loader": "^3.0.0"
}
}
next.config.js
const withSass = require('#zeit/next-sass');
const withImages = require('next-images');
const withCSS = require('#zeit/next-css');
module.exports = withCSS(
withSass(
withImages(
{
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
config.module.rules.push(
{
enforce: "pre",
test: /.scss$/,
loader: "sass-resources-loader",
options: {
resources: ['./styles.scss']
}
},
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
}
);
return config
}
}
)
)
);
and error is
please help
what possible things can make this happen on ubuntu
I'm trying to learn how to do unit testing with React and jest. I've run into the following error:
Unexpected token import
Here are my babel presets:
{
"presets": ["es2015", "stage-0", "react"],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
Here is the file i'm trying to test:
import jest from 'jest';
import React from 'react';
import { shallow } from 'enzyme';
import Step from '../src/components/step.js';
const wrapper = shallow(<Step />);
wrapper.find('a').simulate('click', { preventDefault() {} });
and here is my package.json:
{
"name": "react-simple-boilerplate",
"version": "1.0.0",
"description": "Simple and lightweight Boilerplate for ReactJS projects",
"scripts": {
"lint": "eslint src",
"start": "node server.js",
"test": "jest"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"jest": "^21.2.1",
"node-sass": "^4.5.2",
"react-addons-test-utils": "^15.6.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"babel-loader": "^7.0.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"main": "server.js"
}
Have no idea why its giving me this message?
It looks like babel-jest is missing among your dependencies. That's why jest is not running babel on your ES6+ code before executing tests.
I'm pretty sure you need to add your babel presets to test as well, jest sets the env variable to test.
So...
"test": {
"plugins": ["transform-es2015-modules-commonjs"],
"presets": ["es2015", "react", "stage-0"]
}
I'm stuck with adding styled-components library into my reactjs project. I'm getting an error when trying to run my app in browser, not at the building stage. It's quite common:
Here is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
server: '../server/index.js',
app: './app.jsx',
},
resolve: {
extensions: ['.jsx', '.js'],
},
module: {
rules: [
{
test: /\.(jsx|js)?$/,
use: {
loader: 'babel-loader',
},
},
],
},
target: 'node',
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: './index.html',
excludeChunks: ['server'],
}),
],
};
Here is my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-transform-runtime",
"babel-plugin-styled-components"
]
}
Here is my styled component:
import React from 'react';
import styled from 'styled-components';
export function SearchPage() {
const Container = styled.div`
text-align: center;
`;
return <Container>test</Container>;
}
Here is my package.json:
{
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.4.0",
"#babel/preset-env": "^7.3.4",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"eslint": "^5.15.3",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"live-server": "^1.2.1",
"nodemon": "^1.18.10",
"npm-run-all": "^4.1.5",
"prettier": "^1.16.4",
"react-redux": "^6.0.1",
"react-router": "^4.4.0",
"redux": "^4.0.1",
"rimraf": "^2.6.3",
"stream": "^0.0.2",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"version": "1.0.0",
"main": "dist/server.js",
"scripts": {
"clean": "rimraf dist build",
"dev": "npm-run-all -p dev:watch server:run dev:server",
"dev:build": "webpack --config webpack.dev.js",
"dev:watch": "yarn run dev:build --watch",
"dev:server": "live-server dist",
"server:run": "nodemon",
"prod:build": "npm-run-all clean webpack --config webpack.prod.js",
"test": "jest"
},
"dependencies": {
"express": "^4.16.4",
"html-webpack-plugin": "^3.2.0",
"webpack-merge": "^4.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"styled-components": "^4.2.0"
}
}
I thought that Webpack should bundle all the dependencies. And I don't understand why stream import is not covered by webpack bundling.
I guess that the answer is pretty simple, but I cannot find it. So any advice will be helpful.
The thing is in target: 'node' into my package.json. It's supposed to use only for server-side build not for client.
I am getting uncaught reference error in react native why so ? I am able to build successfully but the bundler is showing this error. How can I fix it ?
Note: I am using windows 10
Screenshot:
package.json:
{
"name": "rchampz",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"lodash": "^4.17.11",
"moment": "^2.22.2",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-dash": "^0.0.9",
"react-native-dropdownalert": "^3.5.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-paper": "^2.0.1",
"react-native-render-html": "^3.10.0",
"react-native-timeline-theme": "^0.0.9",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.14.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
.babelrc :
{
"presets": ["module:react-native"]
}
Either include preset of react-native in .bablerc or export presets from babel.config.js like below
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-transform-runtime'
],
}
When in doubt, use react-native-cli to create a new ReactNative project, and see the build files. I just did that, and here's what I have :
package.json
{
"name": "someproject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.47.1",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
.babelrc :
{
"presets": ["module:metro-react-native-babel-preset"]
}
Note that if you changed your package.json, some cleaning might be needed first
As the subject line says, state is null and I cannot see why.
React 16
Jest
Enzyme
Webpack 4
Babel
(package.json below)
I've hit up pretty much every possible link searchable (although, admittedly I likely just missed 'the one' that tells me what I've done wrong).
If someone responds with a simple 'check here' link and it solves all my problems I'll close this (after I go chew some rocks for a while) and happily move on, but after a few hours of beating myself against the wall I'm close to going back to Jasmine... it at least worked there. :\
Output:
PASS __tests__\Components\ListBox.spec.js
● Console
console.log __tests__\Components\ListBox.spec.js:33
_____ wrapper: null
console.log __tests__\Components\ListBox.spec.js:34
____ instance: null
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 0.985s, estimated 1s
Ran all test suites related to changed files.
Here is my package.json:
{
"name": "module",
"version": "1.0.1",
"author": "thanks all!",
"description": "",
"license": "MIT",
"main": "src/main.jsx",
"jest": {
"automock": true,
"testEnvironment": "jsdom",
"verbose": false,
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"es6"
],
"unmockedModulePathPatterns": [
"react",
"react-dom",
"react-addons-test-utils",
"enzyme"
],
"modulePaths": [
"<rootDir>/src",
"<rootDir>/src/app",
"<rootDir>/src/app/Components"
],
"transform": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|js|jsx|es6)$": "./node_modules/babel-jest"
}
},
"jestWebpackResolver": {
"webpackConfig": "./webpack.config.js"
},
"scripts": {
"start": "webpack-dev-server --env=dev --colors --hot --mode development -d",
"build": "webpack --env=dev --progress --profile --colors --mode development",
"release": "webpack --env=prod --progress --profile --colors --mode production",
"watch": "webpack --env=dev --profile --colors --watch --watch-poll --mode development",
"lint": "eslint ./src/**.js",
"coverage": "jest --coverage",
"test": "jest",
"test-watch": "jest --coverage --watch --colors",
"testw": "jest --watch --colors"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^22.4.1",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"core-js": "^2.5.5",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^22.4.2",
"jest-enzyme": "^6.0.0",
"jest-webpack-resolver": "^0.3.0",
"node-sass": "^4.5.3",
"object-assign": "^4.1.1",
"raf": "^3.4.0",
"react-hot-loader": "^4.0.0",
"react-test-renderer": "^16.3.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.3",
"webpack-dev-server": "^3.1.1",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"enzyme-adapter-react-16": "^1.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"flux": "^3.1.3",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^3.0.6",
"jest-environment-enzyme": "^6.0.0",
"lodash": "^4.17.5",
"moment": "^2.22.0",
"node-rest-client": "^3.1.0",
"npm": "^5.7.1",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^4.2.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.13",
"webpack-dev-middleware": "^3.0.1"
}
}
Here is my spec file:
/*
eslint-disable
react/jsx-filename-extension,
import/first,
no-console
*/
jest.dontMock('enzyme');
jest.dontMock('react');
jest.dontMock('react-dom');
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow, mount } from 'enzyme';
import { ListBox } from 'app/Components/ListBox/ListBox';
configure({ adapter: new Adapter() });
jest.dontMock('app/Components/ListBox/ListBox');
describe('<ListBox {...props} />', () => {
let wrapper;
let list;
const items = [{ text: 'test', key: 1 }];
describe('<ListBox {...props} />', () => {
beforeEach(() => {
wrapper = mount(<ListBox items={items} />);
list = wrapper.instance();
});
it('Can mount without error', () => {
expect(list).toBeInstanceOf(ListBox);
});
it('accepts an array of items to display and stores them in local state.', () => {
console.log(`_____ wrapper: ${wrapper.state()}`);
console.log(`____ instance: ${wrapper.instance().state}`);
});
});
});
Here is the beginning of the component under test:
import React from 'react';
export default class ListBox extends React.Component {
constructor(props) {
super(props);
this.state = {
items: this.props.items
}
}
render() {
return <div>div</div>;
}
}
export { ListBox };
Solved my own problem. Setting automock to false in the package.json and then explicitly mocking/unmocking as needed resolved the issue for me.
Hopefully this helps others in the future.