Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.
Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.
Could I get some help with what am doing wrong pls? Thanks.
These are some of the solutions I have tried out which is not working for me.
Tried accepted solution and also the other 2 solutions for this:
jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.
The error output as follows:
Jest encountered an unexpected token
Details:
.some-class {
^
This is class being tested:
import React from 'react';
import '../styles/styles.scss' // line causing issue
const App = () => {
const env = process.env.NODE_ENV;
return (
<div>
<h1>sample header</h1>
<p>{`This is in ${env} environment`}</p>
</div>
);
};
export default App;
The Test class
import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";
it('should get a matching snapshot', () => {
const wrapper = shallow(<App/>)
expect(wrapper.find('h1').text()).toBe('sample header')
expect(wrapper).toMatchSnapshot()
});
Styles file: styles.scss
.some-class {
color: aliceblue;
}
package.json for reference:
{
"name": "tar",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=beta webpack-dev-server",
"build-prod": "cross-env NODE_ENV=production webpack -p",
"build-beta": "cross-env NODE_ENV=beta webpack",
"test": "jest --config=jest.config.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#types/react": "^16.9.49",
"#types/react-dom": "^16.9.8",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0",
"enzyme-to-json": "^3.0.1",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"raf": "^3.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^10.0.2",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
"transform": {
"\\.js?x$": "<rootDir>/node_modules/babel-jest"
}
}
}
Inside Webpack.config.js (showing partial)
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
Inside . babelrc file
{
"presets": ["#babel/react", "#babel/env"]
}
Looks like you forget to mock scss file during test despite having already had css|less files there.
To fix that, you have to add scss as part of current style file pattern:
package.json
{
"jest": {
"moduleNameMapper": {
// ...
"\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
}
}
Update
You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.
The right one should be:
jest --config=jest.config.js // `js` not `json`
But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.
Related
I am new to vuetify and I am trying upgrade to v2.1.3 but sass loader doesn't work. I read all the documentation but my English is not very good, I can't fix this problem.
Actually, I can update vuetify and it works. I can see the new vuetify and I run other things but my Project doesn't see sass. This is my problem
My package .json;
{
"name": "arkmanweb",
"version": "1.9.4",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#syncfusion/ej2-vue-grids": "^17.3.19",
"axios": "^0.18.0",
"css-loader": "^3.2.1",
"echarts": "^4.2.0-rc.2",
"luxon": "^1.19.3",
"print-js": "^1.0.52",
"quill": "^1.3.6",
"register-service-worker": "^1.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"save": "^2.3.2",
"underscore": "^1.8.3",
"vee-validate": "^2.0.4",
"vue": "^2.5.13",
"vue-i18n": "^8.4.0",
"vue-moment": "^3.2.0",
"vue-router": "^3.0.1",
"vuetify": "^2.1.13",
"vuex": "^3.0.1",
"webpack": "^4.41.2",
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-alpha.8",
"#vue/cli-plugin-eslint": "^3.0.0-alpha.8",
"#vue/cli-plugin-pwa": "^3.0.0-alpha.8",
"#vue/cli-service": "^3.0.0-alpha.8",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"less-loader": "4.1.0",
"style-loader": "0.23.1",
"vue-template-compiler": "^2.5.13",
"webpack-cli": "^3.1.2"
},
"babel": {
"presets": [
"#vue/app"
]
},
"eslintConfig": {
"extends": [
"plugin:vue/essential",
"eslint:recommended"
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
This is my main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import './registerServiceWorker'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '#/plugins/i18n'
import 'vuetify/dist/vuetify.min.css'
Vue.use(VueResource)
const opts = {
theme: { disable: true }
}
Vue.use(Vuetify)
import auth from '../src/api/auth'
auth.checkAuth()
Vue.router = router
Vue.config.productionTip = false
new Vue({
router,
vuetify:new Vuetify(opts),
store,
i18n,
render: h => h(App)
}).$mount('#app')
This is App.vue I am importing sass here but doesn't work:
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
What's wrong? Thank you for your help.
This is my error:
error in ./src/App.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
Its hard to tell based on information you provided but it seems you upgraded sass-loader to version 8.0.0 as part of the upgrade of Vuetify
There is a breaking change in 8.0.0 release of sass-loader in how the configuration should look like - all the options for the underlying sass processor (Node Sass or Dart Sass) needs now to be moved into sassOptions
This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.
The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.
I'm using Jest and Enzyme in my React Native app to test my component and I keep getting this error when testing babel-plugin-jest-hoist: The second argument of 'jest.mock' must be an inline function. I don't really understand what I'm doing wrong because I am passing an inline function.
Here is my code in my test file (search-screen.tests.js):
// All necessary imports here
jest.mock('react-navigation', ({ withNavigation: (component) => component}));
describe("Search screen renders appropriately and function work", () => {
it("renders correctly", () => {
const searchScreen = renderer.create(<SearchScreen />).toJSON();
expect(searchScreen).toMatchSnapshot();
});
});
I used this stack overflow post for reference
The main reason I'm trying to mock react-navigation is because my search screen component is exported using 'withNavigation' (like so: export default withNavigation(SearchScreen)) and it breaks a lot of tests if I don't attempt to do this, is this the right thing to do?
Here is my package.json file as well, just incase.
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"ios-build": "sh scripts/ios/build-ipa.sh",
"test": "jest"
},
"dependencies": {
"axios": "0.18.0",
"prop-types": "15.6.2",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-cookies": "3.3.0",
"react-native-elements": "0.19.1",
"react-native-google-analytics-bridge": "6.0.1",
"react-native-maps": "0.21.0",
"react-native-snackbar": "0.5.1",
"react-native-vector-icons": "4.6.0",
"react-native-version-number": "0.3.4",
"react-navigation": "2.9.1",
"rxjs": "6.2.2"
},
"devDependencies": {
"babel-jest": "23.4.0",
"babel-preset-react-native": "5.0.2",
"#babel/core": "^7.0.0-beta.47",
"#babel/preset-env": "^7.0.0-beta.47",
"#babel/preset-flow": "^7.0.0-beta.47",
"babel-core": "^7.0.0-beta.47",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.5",
"babel-runtime": "^6.26.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"jest": "23.4.0",
"react-dom": "^16.6.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-navigation)"
],
"setupTestFrameworkScriptFile": "./setupTests.js",
"setupFiles": [
"./setupTests.js"
]
}
}
So what can I do to stop getting the react-navigation error with Jest? Let me know if you need more information from me. Any ideas will be helpful.
I'm guessing that the problem is that, for all intents and purposes, you're passing an object as the second parameter to jest.mock. The arrow function is within the object in the withNavigation key.
I believe that you need to pass it an arrow function that returns that same object, like this:
jest.mock('react-navigation', () => ({ withNavigation: (component) => component}));
I hope this helps! Cheers.
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"]
}
So I am starting to do unit testing of my React-Native application. I just wanted to try the first test and I immediately get errors.
Here is what my test looks like:
import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
).toJSON();
expect(tree).toMatchSnapshot();
});
and here is my package JSON
{
"name": "project",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "npm install && react-native link && react-native run-ios"
},
"dependencies": {
"anymatch": "^1.3.0",
"native-base": "^2.2.0",
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-datepicker": "^1.6.0",
"react-native-elements": "^0.13.0",
"react-native-local-notifications": "^0.1.0",
"react-native-maps": "^0.15.2",
"react-native-notifications": "^1.1.11",
"react-native-sound": "^0.10.3",
"react-native-swipeout": "^2.1.3",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.11",
"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
The error I get is this :
TypeError: Cannot read property 'projects' of undefined
at /Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/runCLI.js:106:25
at Generator.next (<anonymous>)
at step (/Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/runCLI.js:1:260)
at /Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/runCLI.js:1:490
at Promise (<anonymous>)
at /Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/runCLI.js:1:171
at module.exports (/Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/runCLI.js:139:50)
at Object.run (/Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/build/cli/index.js:40:3)
at Object.<anonymous> (/Users/grantherman/Desktop/project/node_modules/jest/node_modules/jest-cli/bin/jest.js:14:25)
at Module._compile (module.js:569:30)
I literally have no idea why. I have looked around and no one has experienced the same error as this.
Under jest in your package.json, try adding "testEnvironment": "jsdom"
"jest": {
"preset": "react-native",
"testEnvironment": "jsdom"
}
I dont see jest-cli in your packages.json. I had the exact same issue with reactjs. Installing jest-cli (I only had jest) fixed the issue.