Module not found: 'fs' error

[super2ni]

Hello,

I am quite a newbie in Javascript testing and have trouble using the Snap-shot-it library.

I am trying to test my VueJS components in a Laravel environment. Here is an extract of my package.json file:

{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "lint": "eslint --fix --ext .js,.vue resources/js", "test": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/SPA/setup.js tests/SPA/*/spec.js", "test-watch": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/SPA/setup.js tests/SPA/*/spec.js --watch" }, "devDependencies": { "@mdi/font": "^4.7.95", "@vue/test-utils": "^1.0.0-beta.31", "babel-eslint": "^8.2.6", "babel-plugin-syntax-dynamic-import": "^6.18.0", "cross-env": "^5.1", "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.2.0", "eslint-config-standard": "^12.0.0", "eslint-loader": "^2.2.1", "eslint-plugin-import": "^2.18.2", "eslint-plugin-node": "^7.0.1", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-vue": "^5.2.3", "expect": "^25.1.0", "jsdom": "^16.0.1", "jsdom-global": "^3.0.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "mocha": "^7.0.0", "mocha-webpack": "^2.0.0-beta.0", "resolve-url-loader": "^2.3.1", "sass": "^1.24.0", "sass-loader": "^7.1.0", "snap-shot-it": "^7.9.1", "vue-template-compiler": "^2.6.11" }, "dependencies": { "axios": "^0.18.1", "js-cookie": "^2.2.1", "portal-vue": "^2.1.7", "vue": "^2.6.11", "vue-i18n": "^8.15.3", "vue-router": "^3.1.3", "vuetify": "^2.1.15", "vuex": "^3.1.2" } }

In my *.spec.js file, I load a wrapper from my custom component then testing it:

import { mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'; import expect from 'expect'; import Vue from 'vue'; import Vuex from 'vuex'; import Vuetify from 'vuetify'; import snapshot from 'snap-shot-it'; import Societies from '~/components/Societies.vue'; import AddSocietyForm from '~/components/AddSocietyForm.vue';

Vue.use(Vuetify); const localVue = createLocalVue();

localVue.use(Vuex);

// eslint-disable-next-line no-undef describe('Societies', () => { /**

• Mounts a Societes wrapper */ function mountWrapper() { return mount(Societies, { data() { return { societies: [{ society_id: 31, society_name: 'CB_STE', society_website: null, society_domain_name: 'CB_STE.dev-keyprod.com', society_database: 'b53cd9102a22dd2883631b40b320d822d65af676a25498090d465880bed140a3', society_seed: 0, society_customer: 39, society_devices: [], }, { society_id: 25, society_name: 'demonstration', society_website: null, society_domain_name: 'demonstration.dev-keyprod.com', society_database: '6c1854319777576476e88797da869e8dce522aa37a3ffe2b21ef00c68cbd0ded', society_seed: 1, society_customer: 32, society_devices: [], }, { society_id: 23, society_name: 'dev', society_website: null, society_domain_name: 'dev.dev-keyprod.com', society_database: 'e8588f27308389ee16343ef063ad81602b7ad66a197c9b40cbf57d7e327c96b0', society_seed: 1, society_customer: 30, society_devices: [], }, { society_id: 16, society_name: 'hutchinson', society_website: null, society_domain_name: 'hutchinson.dev-keyprod.com', society_database: 'ee24a4b91d224d03dda21e6c8b7df360b7ae0f28a9b9a6110610f4567d11d615', society_seed: 1, society_customer: 23, society_devices: [], }], societiesLoaded: true, }; }, localVue, mocks: { $t: msg => msg, }, store: new Vuex.Store({ modules: { societies: { namespaced: true, actions: { fetchSocieties: () => [], }, }, }, }), stubs: { AddSocietyForm, RouterLink: RouterLinkStub, portal: '

  portal
  ', }, sync: false, }); }

  let wrapper; // eslint-disable-next-line no-undef beforeEach(() => { wrapper = mountWrapper(); });

  // eslint-disable-next-line no-undef it('snapshot', () => { snapshot(wrapper.html()); }); });

And in the end, I meet those errors

WEBPACK Failed to compile with 4 error(s)

Error in ./node_modules/mkdirp/index.js

Module not found: 'fs' in 'C:\laragon\www\keyprod-admin\node_modules\mkdirp'

Error in ./node_modules/snap-shot-core/src/index.js

Module not found: 'fs' in 'C:\laragon\www\keyprod-admin\node_modules\snap-shot-core\src'

Error in ./node_modules/snap-shot-core/src/file-system.js

Module not found: 'fs' in 'C:\laragon\www\keyprod-admin\node_modules\snap-shot-core\src'

Error in ./node_modules/snap-shot-it/src/utils.js

Module not found: 'fs' in 'C:\laragon\www\keyprod-admin\node_modules\snap-shot-it\src'

Could anyone help me with this issue?

Tyvm, Denis

[saraedum]

Have you set target: 'node' in the webpack.config that you use when testing with mochapack?