We Keep Coding

Jest Setup with Next.js fails after it seems to add a react import to index.test.js

Hi I have been stewing over this for the last couple of days. I realise this is a common error with various solutions.
I have the dreaded:
Jest encountered an unexpected token
/__tests__/index.test.js:16
import React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
I have read a few posts and the docs in next and jest.
package.json:
{
"name": "some-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --watch"
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.17.12",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#types/jest": "^28.1.3",
"#types/node-fetch": "^2.6.2",
"babel-jest": "^28.1.1",
"eslint": "8.16.0",
"eslint-config-next": "12.1.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"node-fetch": "^3.2.6",
"ts-jest": "^28.0.5",
"typescript": "^4.7.4"
},
"description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
"main": "jest.config.js",
"repository": {
"type": "git",
},
"author": "",
"license": "ISC",
"bugs": {
},
}
index.test.js:
import { render, screen } from '#testing-library/react'
import Home from '../pages/index'
import '#testing-library/jest-dom'
import React from "react";
describe('Home', () => {
it('renders a h', () => {
render(<Home />)
const link = screen.getByRole('link', {
name: "Library",
})
expect(link).toHaveAttribute('href', '/storage-area')
})
});
jest.config.js:
module.exports = {
collectCoverage: true,
// on node 14.x coverage provider v8 offers good speed and more or less good report
coverageProvider: 'v8',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',
],
moduleNameMapper: {
// Handle CSS imports (with CSS modules)
// https://jestjs.io/docs/webpack#mocking-css-modules
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
// Handle CSS imports (without CSS modules)
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
// Handle image imports
// https://jestjs.io/docs/webpack#handling-static-assets
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
// Handle module aliases
'^#/components/(.*)$': '<rootDir>/components/$1',
},
// Add more setup options before each test is run
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel', '#babel/preset-react',"#babel/preset-env" ]}],
},
transformIgnorePatterns: [
'/node_modules/',
'^.+\\.module\\.(css|sass|scss)$',
],
}
As I mentioned in the title the it seems that the error message suggests that the import is added by Next.js to the end of the index.test.js.

This was a problem due to the tests folder being nested in the directory above the root directory of the project. By the time I figured this out I had manipulated the jest.config.js transform: presets array property to contain imports that it didn't require in the standard jest/next setup.

Module parse failed for wasm module generated by rust wasm-pack

I have been following this tutorial: https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm in order to build a Rust library and use it in a VueJS project.
When I run $ wasm-pack build --target web everything compiles fine and a pkg directory is created properly.
I then import my rust function into a typescript file like:
import { run } from '../../../../Rust/skunk/pkg/skunk_lib';
My package.json looks like this:
{
"name": "skunk_interactive",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"primeicons": "^5.0.0",
"primevue": "^3.12.6",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.17",
"#vue/cli-plugin-eslint": "~4.5.17",
"#vue/cli-plugin-router": "~4.5.17",
"#vue/cli-plugin-typescript": "~4.5.17",
"#vue/cli-plugin-unit-jest": "~4.5.17",
"#vue/cli-plugin-vuex": "~4.5.17",
"#vue/cli-service": "~4.5.17",
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"#vue/test-utils": "^2.0.0-0",
"#wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"preset": "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"transform": {
"^.+\\.vue$": "vue-jest"
}
}
}
When I try to run npm run serve I get the following error:
Module parse failed: Unexpected token (237:57)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| case 0:
| if (typeof input === 'undefined') {
> input = new URL('skunk_lib_bg.wasm', import.meta.url);
| }
|
I have had a look at this github issue: https://github.com/rustwasm/wasm_game_of_life/issues/22, where it says that updating your webpack should solve the issue. That post was years ago, and I have the latest version of webpack, and still, this error persists.
I also introduced a webpack.config.js file, though I'm not entirely sure what should go in it.
Any thoughts on what might be going wrong?

I ran into a problem with the '#wasm-tool/wasm-pack-plugin' when using a newer version of Rust to compile the WASM.
I had to add a argument to wasm-pack in the WasmPackPlugin instantiation in webpack.config.js
21 │ plugins: [
22 │ new WasmPackPlugin({
23 │ crateDirectory: __dirname,
24 + │ extraArgs: "--target web"
25 │ }),
26 │ ]

rust side preperation
in cargo.toml file
[dependencies]
wasm-bindgen="0.2.63"
[lib]
# if you want to integrate your rust code with javascript we use cdylib
crate-type=["cdylib"]
inside rust file
use wasm_bindgen::prelude::*;
Inside .rs file you have to decorate any function or type with #[wasm_bindgen]
#[wasm_bindgen]
#[derive(Clone,Copy)]
pub enum Status{
Yes,
No,
}
Javascript preparation:
You have to load the content of pkg into your javascript project. there is a package.json file inside pkg, using its name property we are going to load that module inside our project through the package.json in javascript project.
// package.json of your javascript project
"dependencies": {
// other dependencies
.....
// assuming that "name" property of package.json in "pkg" directory is "skunk_lib"
"skunk_lib": "file:../pkg",
},
run npm install to load the pkg module. skunk_lib should be in the node_modules
Inside your javascript file:
// skunk_lib is one of our dependencies
import {yourRustFunction} from "skunk_lib";

Error: The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it

This error appears when I try to load an image using gatsby-image inside my gatsby project using static query. To give you some context, I made a monorepo with multiple gatsby websites altogether and reusing shared components. The hierarchy of folders is:
packages
shared-ui
images
lightlogo.png
components
lightlogo.js
index.js
ventures
src
pages
404.js
The index.js file exports the lightlogo component for the page to access it.
The code of the index.js is as follow:
export { default as LightLogo } from "./components/lightlogo"
And the code of the component is:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
const LightLogo = ({ style }) => {
const { data } = useStaticQuery(graphql`
query {
lightlogo: file(relativePath: { eq: "light_logo.png" }) {
childImageSharp {
fluid(maxWidth: 78) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`)
return <Img style={style}
fluid={data.lightlogo.childImageSharp.fluid} alt="Light HAG Logo"
/>
}
export default LightLogo
The code of the 404 page is:
import React from "react"
import { LightLogo } from "../../../shared-ui"
const NotFoundPage = () => (
<div>
<LightLogo />
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
)
export default NotFoundPage
The gatsby config in the ventures folder is as follow:
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `../shared-ui/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sitemap`,
`gatsby-plugin-sass`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-sharp`,
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `HAG Ventures`,
short_name: `HAG`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `../shared-ui/images/light_logo.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
My package.json is:
{
"name": "#lerna-monorepo/ventures",
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"dependencies": {
"#lerna-monorepo/shared-ui": "^1.0.0",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-regular-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"babel-plugin-styled-components": "^1.10.7",
"bootstrap": "^4.4.1",
"framer-motion": "^1.8.4",
"gatsby": "2.23.3",
"gatsby-background-image": "^0.10.2",
"gatsby-cli": "^2.14.1",
"gatsby-image": "^2.2.38",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-offline": "^3.0.27",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-robots-txt": "^1.5.0",
"gatsby-plugin-sass": "^2.2.1",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-sitemap": "^2.2.26",
"gatsby-plugin-styled-components": "^3.2.1",
"gatsby-source-filesystem": "^2.2.2",
"gatsby-source-rss-feed": "^1.2.2",
"gatsby-transformer-sharp": "^2.3.7",
"gsap": "^3.5.1",
"lottie-player": "^1.0.0",
"lottie-react": "^2.1.0",
"lottie-web": "^5.7.4",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.14.0",
"react-helmet": "^5.2.1",
"react-hot-loader": "^4.13.0",
"react-lazyload": "^3.1.0",
"react-slick": "^0.27.10",
"react-waypoint": "^9.0.3",
"scrollmagic": "^2.0.7",
"scrollmagic-plugin-gsap": "^1.0.4",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.0",
"uninstall": "0.0.0"
},
"devDependencies": {
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
I tried to reinstall all packages using yarn and it didn't work. When I query the image in the GraphiQl, the query successfully fetches the file.

If the root of your Gatsby application is packages/ventures then Gatsby will not extract GraphQL queries from packages/shared-ui, even if you import them. This is because Gatsby uses static analysis to extract GraphQL queries before the code is parsed and evaluated, replacing the query with an identifier that refers to the resulting data for the query.
The way you would typically do something like this is as a Gatsby Theme, which provide a mechanism for sharing code that gets treated largely like local components with some additional hooks and replacement capabilities.
Alternately, you might have some luck using the Node APIs to hook into the build process and copy files around (e.g. parsing the query out of the shared-ui component and rewriting it into the ventures folder onPreBootstrap), but it's going to be an uphill battle.

Getting error message Module build failed (from ./node_modules/sass-loader/dist/cjs.js) when running npm serve

I'm working on a Vue/Vuetify project for quite some time now. It all worked fine until yesterday. I had problems with using the <v-simple-table> vuetify component, so I decided to run npm install and re-install vuetify: bad idea.
The problem is that I get the following error multiple times when running npm run serve:
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 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11)
at Object.loader (C:\Users\Jeroen\Documents\favourite_xi\node_modules\sass-loader\dist\index.js:36:28)
# ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 4:14-225 14:3-18:5 15:22-233
# ./node_modules/vuetify/lib/components/VCalendar/mixins/calendar-with-events.js
# ./node_modules/vuetify/lib/components/VCalendar/VCalendar.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.178.115:8080/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
My main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
I've already looked at multiple posts and they all advise to run npm rebuild node-sass (both regularly as in admin-mode), delete the node-modules folder, re-install sass-loader, but nothing worked so far.
Is there something wrong in my main.js maybe?
Thanks in advance! Let me know if I need to post more of my code or additional information.
Edit: added package.json
{
"name": "favourite_xi",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.22",
"core-js": "^2.6.5",
"node-sass": "^4.12.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-cool-select": "^2.10.2",
"vue-flip": "^0.3.0",
"vue-responsive-text": "^0.1.4",
"vue-router": "^3.0.3",
"vuetify": "^2.0.16",
"vuex": "^3.1.1"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.1",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

This could be result of upgrading sass-loader from v7.x to v8.x
As stated in release notes, they'v made significant changes to configuration
Check your vue.config.js - if you find something like this:
module.exports = {
css: {
loaderOptions: {
sass: {
....some options here...
}
}
}
}
change it to:
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
....some options here...
}
}
}
}
}

I am not sure if it's of any use but my npm run build errors at the color codes in theme. When I comment out the color code lines it builds without error:
Vue.use(Vuetify, {
theme: {
"primary": "#FFCA28",
"secondary": "#1976D2",
"accent": "#82B1FF",
"error": "#FF5252",
"info": "#2196F3",
"success": "#4CAF50",
"warning": "#FB8C00"
}
})

`Vue is not defined` error

I created a vue project via vue cli 3. To structure my code, I made a dir called common where I keep files with .js ext. So, I transferred some code from my .vue file which was in views folder and surprisingly it did not work.
I imported Vue like import Vue from 'vue'; and set a debugger. When I hover over the Vue, it says undefined. I even imported my custom js file to check and same issue there too.
package.json
{
"name": "demo-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17",
"vue-axios": "^2.1.3",
"vue-cookie": "^1.1.4",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.12",
"#vue/cli-plugin-eslint": "^3.0.0-rc.12",
"#vue/cli-plugin-unit-mocha": "^3.0.0-rc.12",
"#vue/cli-service": "^3.0.0-rc.12",
"#vue/eslint-config-airbnb": "^3.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"chai": "^4.1.2",
"vue-template-compiler": "^2.5.17"
}
}
common/apiService.js
import Vue from 'vue';
import { API_URL } from '#/common/config';
import axios from 'axios';
const ApiService = {
init() {
debugger
axios.defaults.baseURL = API_URL;
},
get(resource, slug = '') {
return axios
.get(`${resource}/${slug}`)
.catch((error) => {
throw new Error(`[PTE] ApiService ${error}`);
});
},
post(resource, params) {
debugger
return axios.post(`${resource}`, params);
},
};
export default ApiService;
please note that i have imported Vue but have not used it. Will use it later after i fix this issue.