We Keep Coding

Property 'toMatchSnapshot' does not exist on type 'Assertion'

I am using CRA to build a web app that also uses Typescript and Jest for testing (snapshot testing). I randomly am now getting the error Property 'toMatchSnapshot' does not exist on type 'Assertion'. across all my snapshot tests.
Here is an example test where I am getting this error:
import { BrowserRouter } from 'react-router-dom';
import renderer from 'react-test-renderer';
describe('<Button />', () => {
test('Button props with mandatory props', () => {
const tree = renderer
.create(
<BrowserRouter>
<Button text="Test Text" />
</BrowserRouter>
)
.toJSON();
expect(tree).toMatchSnapshot(); <-- Error here
});
}
I have tried various solutions such as updating Jest, and updating related packages and nothing seems to work.
My Package.json:
{
"name": "webapp",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "react-scripts start",
"cypress:open": "cypress open"
},
"dependencies": {
"#babel/core": "^7.19.1",
"#babel/plugin-syntax-flow": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.19.0",
"#react-spring/web": "^9.5.5",
"#types/socket.io-client": "^3.0.0",
"axios": "^0.27.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-router-dom": "^6.4.3",
"react-scripts": "^5.0.1",
"socket.io-client": "^4.5.1",
"uuid": "^9.0.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^13.0.3",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"#types/cypress-cucumber-preprocessor": "^4.0.1",
"#types/jest": "^29.0.3",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#types/react-test-renderer": "^18.0.0",
"autoprefixer": "^10.4.7",
"cypress": "^10.11.0",
"eslint": "^8.20.0",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.1.2",
"postcss": "^8.4.14",
"react-test-renderer": "^18.2.0",
"tailwindcss": "^3.1.6",
"ts-jest": "^29.0.1",
"typescript": "^4.8.3"
},
"jest": {
"clearMocks": true,
"transform": {
"^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
},
"testEnvironment": "jsdom"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"stepDefinitions": "cypress/e2e/**/*.ts"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

It looks like you have cypress installed, which seems to be conflicting with Jest's types. See Cypress causing type errors in jest assertions

Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):

Here is the package.json from my project, I've ran npm install.
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.20.2",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"antd": "^4.8.1",
"axios": "^0.19.2",
"babel-preset-react-app": "^9.1.2",
"connected-react-router": "^6.8.0",
"craco-less": "^2.0.0",
"i18next": "^19.7.0",
"react": "^16.14.0",
"react-dom": "^16.13.1",
"react-i18next": "^11.7.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-loader": "^8.1.0",
"less-loader": "^11.1.0"
}
}
after ran npm start, I've got this error
Compiled with problems:X
ERROR in ./src/index.less (./node_modules/css-loader/dist/cjs.js??> > ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/craco-less/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/index.less)
Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):
// ================================================================
.table-size(~'middle', #table-padding-vertical-md, #table-padding-horizontal-md, #table-font-size-md);
^
Operation on an invalid type
Error in /Users/user/audien/node_modules/antd/lib/table/style/size.less (line 53, column 0)
I've tried to lower less-loader to version 5.0.0, but it still doesn't work.

Set math as always in your less options
math: 'always'
In your craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
math: 'always',
modifyVars: { '#primary-color': '#6b75e3' },
javascriptEnabled: true,
},
},
},
},
],
};

Enzyme with Jest TC Failing

I am trying to run my Enzyme Tc but when i run Yarn run test it fails with following, I have tried updating the jest, enzyme and other things as well but cannot get it working
Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'Universal')
> 1 | import Enzyme from 'enzyme';
| ^
2 | import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
3 | import enableHooks from 'jest-react-hooks-shallow';
my setupTests file has following:
import Enzyme from 'enzyme';
import EnzymeAdapter from '#wojtekmaj/enzyme-adapter-react-17';
import enableHooks from 'jest-react-hooks-shallow';
Enzyme.configure({ adapter: new EnzymeAdapter() });
enableHooks(jest);
My current Package files is
{
"name": "abc-ui",
"version": "2.1.0",
"license": "UNLICENSED",
"jest": {
"resetMocks": false
},
"dependencies": {
"#date-io/date-fns": "1.x",
"#material-ui/core": "4.8.2",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.38",
"#material-ui/pickers": "3.2.10",
"#types/jest": "^29.2.2",
"#types/node": "13.7.7",
"#types/react": "16.9.23",
"#types/react-dom": "16.9.5",
"#wojtekmaj/enzyme-adapter-react-17": "^0.7.0",
"axios": "0.26.0",
"date-fns": "2.12.0",
"date-holidays": "1.4.12",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"execa": "3.4.0",
"formik": "2.0.4",
"lodash": "4.17.21",
"match-sorter": "^4.2.1",
"moment": "2.29.4",
"react": "17.0.1",
"react-app-polyfill": "1.0.4",
"react-dom": "17.0.1",
"react-idle-timer": "^5.4.1",
"react-redux": "7.1.3",
"react-router-dom": "5.1.2",
"react-scripts": "4.0.3",
"react-table": "^7.8.0",
"react-toastify": "5.5.0",
"redux": "4.0.4",
"redux-mock-store": "1.5.4",
"redux-thunk": "2.3.0",
"styled-components": "4.4.1",
"typescript": "3.9.9",
"web-vitals": "^0.2.4",
"xlsx": "^0.18.5",
"yup": "0.30.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --ci",
"test:ci": "react-scripts test --ci --coverage --reporters=default",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"eject": "react-scripts eject",
"prettier": "prettier --write src/**/*.{js,jsx,css,scss}",
"lint": "eslint src",
"lint:report": "eslint src -o coverage/eslint.json -f json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 9"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 9"
]
},
"devDependencies": {
"#babel/helper-create-class-features-plugin": "7.8.3",
"#testing-library/jest-dom": "5.11.5",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"babel-eslint": "10.1.0",
"eslint": "7.32.0",
"eslint-config-xo-react": "0.16.0",
"eslint-config-xo-space": "0.18.0",
"eslint-plugin-babel": "5.3.0",
"eslint-plugin-react": "7.16.0",
"husky": "4.0.0",
"jest-react-hooks-shallow": "^1.5.1",
"prettier": "1.19.1",
"pretty-quick": "2.0.1",
"prop-types": "15.7.2",
"react-test-renderer": "16.12.0",
"redux-devtools-extension": "2.13.8"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"resolutions": {
"**/ejs": "3.1.7",
"**/portfinder/async": "3.2.2",
"**/immer": "9.0.6",
"**/set-value": "4.0.1",
"**/shell-quote": "1.7.3",
"**/unset-value": "2.0.1",
"**/ansi-html": "0.0.8",
"**/recursive-readdir/minimatch": "3.0.5",
"**/selfsigned": "1.10.13",
"**/react-dev-utils/prompts": "2.4.2",
"react-scripts/prompts": "2.4.2",
"**/clean-css": "5.2.2",
"**/webpack-dev-server/ws": "7.5.7",
"**/default-gateway/execa": "2.0.1",
"**/sane/execa": "2.0.1",
"**/svgo/css-select": "3.1.1",
"**/css-what": "5.1.0",
"**/ansi-regex": "5.0.1",
"**/hosted-git-info": "2.3.0",
"**/react-dev-utils/browserslist": "4.16.6",
"**/webpack/watchpack": "2.0.0",
"**/webpack-dev-server/chokidar": "3.0.0",
"react-scripts/resolve-url-loader": "4.0.0",
"loader-utils": "2.0.3"
}
}
`
``
all my test case are failing with above error
I changes my version, even tried to update the enzyme and dependencies but ended in failure

How to resolve eslient token error that is not further specified?

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.
export class SomeComponent extends Component {
function foo () { console.log ("hello") return }
render() {
return (
<React.Fragment>
</React.Fragment>
);
}
}
I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-free": "^5.13.0",
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.28",
"#types/react": "^16.9.21",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"d3-ease": "^1.0.6",
"html-react-parser": "^0.10.3",
"html-to-react": "^1.4.2",
"i": "^0.3.6",
"install": "^0.13.0",
"jquery": "^3.4.1",
"material-kit-react": "^1.8.0",
"mdbreact": "^4.25.5",
"npm": "^6.14.6",
"prop-types": "^15.7.2",
"pure-react-carousel": "^1.26.1",
"react": "^16.12.0",
"react-alert": "^6.0.1",
"react-alert-template-basic": "^1.0.0",
"react-audio-player": "^0.11.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-carousel": "^4.0.3",
"react-card-carousel": "^1.1.3",
"react-dom": "^16.12.0",
"react-geocode": "^0.2.1",
"react-google-autocomplete": "^1.1.2",
"react-google-maps": "^9.4.5",
"react-h5-audio-player": "^2.4.2",
"react-image-appear": "^1.2.23",
"react-loader-spinner": "^3.1.14",
"react-loading-image": "^0.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^5.0.0",
"react-reveal": "^1.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-scroll": "^1.7.9",
"react-select": "^3.1.0",
"react-slick": "^0.23.1",
"react-split-pane": "^2.0.3",
"react-transition-group": "^4.3.0",
"react-user-profile": "^1.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.0.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.10.3",
"babel-eslint": "^10.1.0",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.

Are you trying to use class or functional components, you have some errors in your code.
Class components should look like this:
class ClassComponent extends React.Component {
constructor(props) {
super(props)
// state here
}
printMessage = (msg) => {
console.log(msg);
};
render() {
this.printMessage("Hello World");
return <div>jsx here</div>;
}
}
Functional components should look like this:
function FunctionalComponent(props) {
const printMessage = (msg) => {
console.log(msg);
};
printMessage()
return <div>jsx here</div>;
}

Cannot get Vue state's element (Vue.js/JS/TS)

I met an issue today with Vue.
In a function, I cannot get an element from a state.
But when I console.log() the state, the element is there.
How to fix it?
The code:
export const actions: ActionTree<IState, IState> = {
getUsers(context) {
// eslint-disable-next-line no-console
console.log('getUsers().context=', context);
// eslint-disable-next-line no-console
console.log('getUsers().context.state=', context.state);
// eslint-disable-next-line no-console
console.log('getUsers().context.state.baseURL=', context.state.baseURL);
// do something...
}
}
The console's log:
The 1st log is OK. I can see the value of the baseURL.
The 2nd log is OK too. can see the value of the baseURL.
The 3rd log is the problem. I cannot get the value of the baseURL!!!
package.json file:
{
"name": "ui",
"version": "2.0.0-rc",
"private": true,
"author": "Leo Wu <wudongyin#gmail.com>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.3.2",
"qs": "^6.9.1",
"uuid": "^3.3.3",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0",
"vuex": "^3.0.1",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-plugin-typescript": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"typescript": "~3.5.3",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/airbnb",
"#vue/typescript"
],
"rules": {
"max-len": "off",
"no-param-reassign": "off"
},
"parserOptions": {
"parser": "#typescript-eslint/parser"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Please let me know if you need more information.
Any help will be appreciated.

Thanks #acdcjunior and #TimWickstrom,
I finally found the cause and a solution. Here are the codes comparison. The main difference is where to load the config value.
The original code (problematic):
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount('#app');
store.commit(UPDATE_BASE_URL, {
baseURL: process.env.VUE_APP_BASE_URL,
});
The working code:
new Vue({
router,
store,
vuetify,
created() {
this.$store.commit(UPDATE_BASE_URL, {
baseURL: process.env.VUE_APP_BASE_URL,
});
},
render: h => h(App),
}).$mount('#app');
Screenshot for the working code:
Hope it helps who meets a similar issue.