Jest Babel Error: Test suite failed to run - jestjs

Here's my package.json
{
"name": "js-stack",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "babel-node src",
"test": "eslint src && flow && jest --coverage"
},
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-compat": "^3.7.0",
"eslint-plugin-flowtype": "^5.1.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.0 || ^1.7.0",
"flow-bin": "^0.126.1",
"jest": "^26.0.1",
"react": "^16.13.1"
},
"browserslist": [
"> 1%"
]
}
Here's my .babelrc file
{
"presets": [
"env",
"react",
"flow"
]
}
While it got me the error
Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions.
In /Users/Codes/Javascript/js-stack/node_modules/babel-preset-react/lib/index.js
Could Someone tell me how to deal with it? I tried some solutions as they said but still get it! SO confused!!!! THX

Remember having a problem similar to this before. have you tried getting rid of the .babelrc with babel.config.js ? This is how the file will look like
/* eslint-disable func-names */
module.exports = function (api) {
const presets = [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow'
];
const plugins = [];
api.cache(false);
return {
presets,
plugins
};
};

Related

Webpack compilation failed: in ./src/index.js 1:0 Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

How do you get round this error in webpack?
Answers in similar threads are poorly explained.
I get this error when trying to run the code and have no idea how to solve it - what steps to take, where to look for error etc.
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
webpack.config.js
const path = require('path');
module.exports = {
target: 'node',
output: {
path: path.join(__dirname, './.webpack'),
filename: 'handler.js',
libraryTarget: 'commonjs',
}
};
package.json
{
"name": "rate-repository-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node -r esm ./src/index.js",
"start:dev": "nodemon -r esm ./src/index.js",
"bundle": "cpx src/**/* functions/bundle",
"start:lambda": "netlify-lambda serve ./src/lambda",
"lint": "eslint ./src",
"test": "jest .",
"migrate:make": "knex migrate:make",
"migrate:latest": "knex migrate:latest",
"build": "npm run migrate:latest",
"seed:make": "knex seed:make",
"seed:run": "knex seed:run"
},
"lint-staged": {
"src/**/*.js": "eslint",
"*.{js,json,css,md}": "prettier --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/Kaltsoon/rate-repository-api.git"
},
"author": "Kalle Ilves",
"license": "MIT",
"bugs": {
"url": "https://github.com/Kaltsoon/rate-repository-api/issues"
},
"homepage": "https://github.com/Kaltsoon/rate-repository-api#readme",
"dependencies": {
"#apollo/server": "^4.3.0",
"#as-integrations/aws-lambda": "^1.1.0",
"#koa/cors": "^3.0.0",
"apollo-boost": "^0.4.9",
"apollo-server": "^3.3.0",
"apollo-server-core": "^3.3.0",
"apollo-server-koa": "^3.3.0",
"apollo-server-lambda": "^3.11.1",
"axios": "^0.24.0",
"bcrypt": "^5.0.0",
"dataloader": "^2.0.0",
"date-fns": "^2.9.0",
"dotenv": "^11.0.0",
"es6-error": "^4.1.1",
"esm": "^3.2.25",
"graceful-fs": "^4.2.10",
"graphql": "^16.6.0",
"jsonwebtoken": "^8.5.1",
"knex": "^0.95.15",
"koa": "^2.11.0",
"koa-bodyparser": "^4.3.0",
"koa-morgan": "^1.0.1",
"koa-router": "^10.0.0",
"lodash": "^4.17.15",
"lru-cache": "^6.0.0",
"netlify-lambda": "^2.0.15",
"objection": "^3.0.1",
"serverless-plugin-common-excludes": "^4.0.0",
"serverless-plugin-include-dependencies": "^5.0.0",
"sqlite3": "^5.0.2",
"through2": "^4.0.2",
"uuid": "^8.3.2",
"watchman": "^1.0.0",
"winston": "^3.8.2",
"yup": "^0.32.8"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/eslint-parser": "^7.16.5",
"#babel/preset-env": "^7.8.4",
"cpx": "^1.5.0",
"eslint": "^8.6.0",
"eslint-plugin-jest": "^25.3.4",
"husky": "^4.2.3",
"jest": "^27.4.7",
"lint-staged": "^10.0.7",
"nodemon": "^2.0.7",
"prettier": "^2.2.1",
"serverless-plugin-typescript": "^2.1.4",
"serverless-webpack": "^5.11.0"
},
"type": "commonjs"
}
index.js
import http from 'http';
var fs = require('graceful-fs')
import logger from './utils/logger';
import { API_PORT, APOLLO_PORT } from './config';
import createApolloServer from './apolloServer';
import app from './app';
var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
const startServer = async () => {
const httpServer = http.createServer(app);
const apolloServer = createApolloServer();
await apolloServer.listen({ port: APOLLO_PORT });
httpServer.on('request', app.callback());
await new Promise((resolve) =>
httpServer.listen({ port: API_PORT }, resolve),
);
logger.info(`Apollo Server ready at http://localhost:${APOLLO_PORT}`);
};
startServer();

Support for the experimental syntax 'jsx' isn't currently enabled in monorepo

I currently have 2 packages in my monorepo
web-ui & testing-utils
testing-utils
package.json
{
"name": "#testing-utils",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"lint": "eslint",
"postinstall": "cd ../../ && patch-package",
"test": "jest --passWithNoTests",
"prettier": "prettier ../../.prettierrc.js -c \"./**/*.{ts,tsx,js,jsx}\"",
"prettier:write": "prettier ../../.prettierrc.js --write \"./**/*.{ts,tsx,js,jsx}\""
},
"dependencies": {
"react": "16.14.0",
"react-redux": "7.2.2",
"redux": "4.0.5"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.19.0",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#testing-library/react": "12.0.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.5",
"babel-plugin-react-require": "^3.1.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-preset-minify": "^0.6.0-alpha.9",
"eslint": "7.21.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.4.0",
"eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "4.2.0",
"prettier": "2.3.0",
"react-test-renderer": "16.14.0"
}
}
.babelrc
{
"presets": [["#babel/preset-env"], "#babel/preset-react"],
"ignore": ["node_modules/**"],
"plugins": ["#babel/plugin-transform-runtime", "#babel/plugin-syntax-jsx"]
}
renderWithTheme.js
import { render } from '#testing-library/react';
import { THEME } from '#web-ui/src/theme';
import React from 'react';
import { ThemeProvider } from 'styled-components';
const renderWithTheme = (ui) => {
function Wrapper({ children }) {
return <ThemeProvider theme={THEME}>{children}</ThemeProvider>;
}
return render(ui, { wrapper: Wrapper });
};
export default renderWithTheme;
web-ui
package.json
{
"name": "#web-ui",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
"jest": "jest",
"test": "jest --coverage --runInBand",
"typecheck": "npx tsc --noemit",
"prettier": "prettier ../../.prettierrc.js -c \"./src/**/*.{ts,tsx,js,jsx}\"",
"prettier:write": "prettier ../../.prettierrc.js --write \"./src/**/*.{ts,tsx,js,jsx}\""
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.19.0",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "12.0.0",
"#types/react": "16.14.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"es-check": "^5.1.2",
"eslint": "7.21.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.4.0",
"eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "4.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.0.1",
"prettier": "2.3.0",
"react-test-renderer": "^16.13.1",
"typescript": "4.3.5"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.32",
"#fortawesome/free-brands-svg-icons": "^5.15.1",
"#fortawesome/free-regular-svg-icons": "^5.15.2",
"#fortawesome/pro-light-svg-icons": "^5.15.2",
"#fortawesome/pro-regular-svg-icons": "^5.15.1",
"#fortawesome/pro-solid-svg-icons": "^5.15.1",
"#fortawesome/react-fontawesome": "^0.1.13",
"#googlemaps/markerclustererplus": "^1.2.0",
"#juggle/resize-observer": "^3.3.1",
"#uiw/react-textarea-code-editor": "^2.0.3",
"axios": "^0.21.0",
"date-fns": "^1.9.0",
"dinero.js": "^1.6.0",
"formik": "^2.1.4",
"google-libphonenumber": "^3.2.15",
"libphonenumber": "0.0.10",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"rc-slider": "^8.6.7",
"react-dates": "^21.8.0",
"react-number-format": "^4.4.1",
"react-router-dom": "^5.2.0",
"react-select": "^3.0.8",
"react-spinkit": "^3.0.0",
"react-spinners": "^0.10.6",
"react-spring": "^8.0.27",
"react-table": "^7.6.3",
"react-tag-autocomplete": "^6.1.0",
"react-transition-group": "^4.4.1",
"styled-components": "^4.4.1",
"use-resize-observer": "^7.0.0",
"yup": "^0.29.3"
},
"resolutions": {
"#types/react": "16.14.0"
}
}
.babelrc
{
"presets": [["#babel/preset-env"], "#babel/preset-react"],
"ignore": ["node_modules/**"],
"plugins": ["#babel/plugin-transform-runtime", "#babel/plugin-syntax-jsx"]
}
tests/form/form.test.js
import renderWithTheme from '#testing-utils/renderWithTheme';
import React, { useRef, useEffect } from 'react';
import { waitFor } from '#testing-library/react';
import Form from '../../src/form/Form/Form';
const FormDummy = (props) => {
const formRef = useRef();
const initialValues = {
terms: '',
};
useEffect(() => {
if (formRef && formRef.current) formRef.current.submitForm();
}, [formRef]);
return (
<div>
<Form onSubmit={props.onSub} formRef={formRef} initialValues={initialValues} />
</div>
);
};
describe('form', () => {
test('it should render without error', () => {
const initialValues = {
terms: '',
};
const { container } = renderWithTheme(<Form initialValues={initialValues} />);
expect(container).toBeDefined();
});
test('it should render without error when custom handle submit', async () => {
const onSub = jest.fn();
renderWithTheme(<FormDummy onSub={onSub} />);
await waitFor(() => expect(onSub).toBeCalled());
});
});
On the root of the monorepo I also have the following;
babel.config.js
module.exports = {
"presets": [["#babel/preset-env"], "#babel/preset-react"],
"ignore": ["node_modules/**"],
"plugins": ["#babel/plugin-transform-runtime", "#babel/plugin-syntax-jsx"]
}
package.json
{
"private": true,
"name": "monorepo",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"re-install": "rm -rf node_modules packages/node_modules packages/web-ui/node_modules packages/testing-utils/node_modules && yarn",
"lint": "yarn workspaces run lint",
"test": "yarn workspaces run test",
"typecheck": "yarn workspaces run tsc --noemit",
"prettier": "yarn workspaces run prettier",
"prettier:write": "yarn workspaces run prettier:write",
"postinstall": "patch-package",
"prepare": "husky install",
},
"devDependencies": {
"husky": "^6.0.0",
"minimist": "^1.2.5",
"patch-package": "^6.4.4",
"plist": "^3.0.1",
"postinstall-postinstall": "^2.1.0"
},
"workspaces": {
"packages": [
"packages/*"
]
},
"dependencies": {},
"resolutions": {
"#types/react": "16.14.0"
}
}
when trying to run npx jest form I get the following error;
FAIL __tests__/form/form.test.js
● Test suite failed to run
SyntaxError: ~~~/packages/testing-utils/renderWithTheme.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:12):
6 | const renderWithTheme = (ui) => {
7 | function Wrapper({ children }) {
> 8 | return <ThemeProvider theme={THEME}>{children}</ThemeProvider>;
| ^
9 | }
10 |
11 | return render(ui, { wrapper: Wrapper });
Add #babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
As you can see from my files above, I have done the suggestion of adding #babel/preset-react to the presets section and added #babel/plugin-syntax-jsx to the plugins section to all my babel configs.
Where am I going wrong here?
Any help would be greatly appreciated.
What ended up actually working for me in the end was changing all the .babelrc files to be babel.config.js instead.
Not fully sure why that worked, but it did.

Vue Module parse failed: Unexpected token

When I install project dependency from local directory
npm install ../myDep
and next run npm run serve everything is ok.
But when I install this dependency directly from repo
(npm install git+ssh://(...)/myDep.git) (it should be done in this way)
and run npm run serve I have an error:
Module parse failed: Unexpected token (14:9)
You may need an appropriate loader to handle this file type.
| }
|
> device = {
|
| info: () => {
Here is part of file with this error:
export class MyDependencyClass {
constructor(args) {
(...)
}
device = {
info: () => {
return {};
},
(...)
}
(...)
}
This unexpected token is = and only when I install it from repo.
How can I fix it?
#edit
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "./deploy.sh",
},
"dependencies": {
"core-js": "^3.3.2",
"myDep": "git+ssh://git#gitlab.com:pplaczek/myDep.git",
"markdown-it-vue": "^1.0.10",
"roboto-fontface": "*",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vue-the-mask": "^0.11.1",
"vuetify": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.9.97",
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
}
}
vue.config.js
module.exports = {
transpileDependencies: ["vuetify"]
};
babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"]
};
There is no guarantee this will help, but you can try with the following Babel configuration:
module.exports = {
presets: [
[
'#vue/app',
{
exclude:
[
"#babel/plugin-transform-typeof-symbol",
'#babel/plugin-transform-regenerator',
],
modules: false
}
]
],
plugins:
[
"#babel/plugin-proposal-class-properties", // this seems to be the important one
]
}

Jest fails with SyntaxError: Unexpected token {

I'm integrating jest into my nuxt application using vue-test-utils (following Edd Yerburgh's new book).
The test fails right out of the box with "SyntaxError: Unexpected token {". Similar code builds fine with nuxt and the tests ran with Ava. I'm assuming that I have a problem with my jest configuration.
I've included my package.json, code excerpt and console out.
Thanks for any help,
Dan
npm 6.4.0
package.json
{
"name": "cxl-ui-base",
"version": "1.0.0",
"description": "Base UI for SA and CXL",
"author": "Dan Mahoney <dan.mahoney#contextlabs.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test:coverage": "TEST=unit nyc --report-dir=generated-files/coverage ava --tap | tap-summary",
"test:unit": "NODE_ENV=testing jest --verbose --no-cache",
"test:watch": "NODE_ENV=pro ava --watch",
"lint": "eslint -f node_modules/eslint-detailed-reporter/lib/detailed.js --ext .js,.vue -o generated-files/lint.html .",
"doc": "jsdoc -c doc.conf.js"
},
"dependencies": {
"#nuxtjs/auth": "^4.5.1",
"#nuxtjs/axios": "^5.3.1",
"#nuxtjs/dotenv": "^1.1.1",
"ava-describe": "^2.0.0",
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"dotenv": "^5.0.1",
"eslint-import-resolver-alias": "^1.1.1",
"express": "^4.16.3",
"jsdoc-vue": "^1.0.0",
"jsonwebtoken": "^8.2.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"moment": "^2.22.1",
"npm": "^6.4.0",
"nuxt": "1.4.1",
"nuxt-leaflet": "0.0.10",
"nuxt-material-design-icons": "^1.0.4",
"oauth-1.0a": "^2.2.4",
"vue": "^2.5.16",
"vue-d3": "^0.1.0",
"vue-i18n": "^7.6.0",
"vue-uuid": "^1.0.0",
"vue2-leaflet": "^1.0.2",
"vuelidate": "^0.7.2",
"vuetify": "^1.0.17",
"vuex": "^3.0.1",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.2",
"#vue/test-utils": "^1.0.0-beta.19",
"ajv": "^6.5.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.4.2",
"babel-plugin-add-module-exports": "^0.3.3",
"babel-plugin-transform-imports": "^1.4.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"chromedriver": "^2.38.3",
"eslint": "^4.3.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-standard": "^10.2.1",
"eslint-detailed-reporter": "^0.7.3",
"eslint-import-resolver-webpack": "^0.9.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsdoc": "^3.7.1",
"eslint-plugin-leon-require-jsdoc": "0.0.1",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"eslint-plugin-vue-a11y": "0.0.26",
"jest": "^23.5.0",
"jest-vue-preprocessor": "^1.4.0",
"jsdoc": "^3.5.5",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"loglevel": "^1.6.1",
"nightwatch": "^0.9.21",
"npm-merge-driver": "^2.3.5",
"raf": "^3.4.0",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^1.0.0",
"selenium": "^2.20.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tap-summary": "^4.0.0",
"vue-jest": "^2.6.0",
"vue-loader": "^13.7.2",
"vue-meta": "^1.5.0",
"vue-template-compiler": "^2.5.16"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},
"eslintConfig": {
"env": {
"browser": true,
"node": true,
"jest": true
}
}
}
Code
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuetify from 'vuetify';
import test from 'jest';
import ClientMap from '#/components/Map'; // eslint-disable-line
import { commonAssertions } from '#/plugins/test.utils';
// for mocking
import modal from '#/components/Modal'; // eslint-disable-line
const localVue = createLocalVue();
localVue.use(Vuetify);
test('Sanity Test', () => {});
test('Initial State', (t) => {
const $modal = sinon.mock(modal);
const wrapper = shallowMount(Map, {
mocks: {
$modal,
},
localVue,
});
commonAssertions(Map, t, wrapper);
});
test.todo('Select Layer');
test.todo('Test Modal??');
test.todo('Test Tooltip??');
test.todo('UnSelect Layer');
Relevant Output
FAIL src/test/specs/map.spec.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/dan.mahoney/Projects/cxl-ui-base/src/test/specs/map.spec.js:10
import { shallowMount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.045s
The problem is that nuxt puts the babel config into nuxt.config.js. I found an npm package that solves that. It allows you to have a .babelrc file and have it injected into nuxt.config.js. When Jest compiles the files for testing, it uses .babelrc. Kudos to the author.
You should set the NODE_ENV to test then run the jest
you can do it by adding this line to your package.json file
"scripts": {
....
"test": "NODE_ENV=test jest"
},

Jest not working with Styled-components, get "TypeError: Cannot read property 'div' of undefined"

Can't seem to test with Jest because I am using styled-components. Anyone find a solution to this?
I am putting my "StyledComponents.js" components in a seperate file and importing them into my pages as needed..ala.
import { Footer, Header, LeftNav } from "StyledComponents";
PASS src/app/components/Products/__tests__/Avatar.test.js
FAIL src/app/components/Products/__tests__/product-snapshot-test.js
● Test suite failed to run
TypeError: Cannot read property 'div' of undefined
at Object.<anonymous> (src/app/components/Products/styledComponents.js:9:148)
at Object.<anonymous> (src/app/components/Products/ProductsItem.js:3:41)
at Object.<anonymous> (src/app/components/Products/index.js:7:50)
at Object.<anonymous> (src/app/components/Products/__tests__/product-snapshot-test.js:5:14)
It is choking on the part of the imported files that includes my components from the styled.js file (ala: styled-components).
// #flow
import React from 'react';
import {
Products,
ProductItem
} from './styledComponents';
Basically, it is saying "styled" Is undefined. Yet, in my files, I have:
import styled from 'styled-components';
export const ProductContainer = styled.div`
border-radius: 5px;
overflow: hidden;
`;
etc....
UPDATED TO INCLUDE babelrc & package.json files
babelrc
{
"presets": ["es2015", "react", "flow"],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy"
],
"env": {
"development": {
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy",
"react-hot-loader/babel"
]
},
"test": {
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
Package.json file
{
"name": "whatever",
"version": "0.0.1",
"main": "server.js",
"license": "UNLICENSED",
"scripts": {
"start": "npm-run-all --parallel start:server start:app",
"start:app": "webpack-dev-server --progress",
"start:server": "nodemon -i 'webpack*.js' -i 'src/app/**/*.js' server.js ",
"test": "npm run test:app",
"test:app": "jest --coverage",
"build": "webpack -p --define process.env.NODE_ENV=\"'production'\"",
"lint": "eslint ./",
"flow": "flow"
},
"dependencies": {
"app-module-path": "^2.2.0",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.17.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"immutability-helper": "^2.3.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-addons-shallow-compare": "^15.6.0",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-loader": "^2.4.2",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-transition-group": "^2.0.2",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
"styled-components": "^2.1.1",
"webpack": "^3.3.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"eslint": "^4.2.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-flowtype": "^2.35.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.50.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"nock": "^9.0.14",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.2",
"react-hot-loader": "^3.0.0-beta.7",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"
},
"jest": {
"collectCoverageFrom": [
"src/app/**/*.js"
],
"coverageThreshold": {
"global": {
"statements": 60,
"branches": 60,
"functions": 80,
"lines": 70
}
},
"moduleFileExtensions": [
"js"
],
"moduleDirectories": ["node_modules", "src"],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/app/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"components(.*)$": "<rootDir>/src/app/components$1",
"constants(.*)$": "<rootDir>/src/app/constants$1",
"utils(.*)$": "<rootDir>/src/app/utils$1"
}
}
}

Resources