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?