Skip to content

Module not found: Error: Can't resolve... #88

@Olivr3

Description

@Olivr3

I am getting the following error after running yarn test.

ERROR in ./test/components/FabMenuItemTest.js
Module not found: Error: Can't resolve 'components//FabMenuItem.js' in '/var/www/pandle-mobile-app/master/pandle-mobile-app/test/components'
@ ./test/components/FabMenuItemTest.js 7:19-56
@ ./test (Test.js$)
@ ./test/loadtests.js

I think there is something to do with setting an absolute path.
What Am I missing here?

Code Structure

  • src
    • components
    • containers
    • reducers
    • sagas
    • ....
  • test
    • components
    • containers
    • reducers
    • sagas
    • ....
    • loadtests.js

package.json


{
  "name": "pandle-mobile",
  "private": true,
  "version": "0.0.1",
  "description": "pandle-mobile - Generated by generator-react-webpack",
  "main": "src/index.js",
  "scripts": {
    "clean": "rimraf www/*",
    "copy": "copyfiles -f ./src/index.html ./www && copyfiles -u 1 \"./src/static/**\" ./www",
    "dist": "npm run clean && npm run copy && webpack --progress --bail --env dist -p",
    "lint": "eslint ./src",
    "posttest": "npm run lint",
    "release:major": "npm version prerelease && git push --follow-tags && npm publish --tag beta",
    "release:minor": "npm version prerelease && git push --follow-tags && npm publish --tag beta",
    "release:patch": "npm version prerelease && git push --follow-tags && npm publish --tag beta",
    "serve:dev": "webpack-dev-server --open --env dev",
    "serve:vm": "webpack-dev-server --open --env vm",
    "serve:dist": "webpack-dev-server --open --env dist -p --progress",
    "start": "npm run serve:dev",
    "test": "cross-env NODE_ENV=test karma start",
    "test:watch": "cross-env NODE_ENV=test karma start --autoWatch=true --singleRun=false --reporters=mocha,coverage",
    "download-fixtures": "node scripts/download_fixtures.js",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook-vm": "cross-env CHOKIDAR_USEPOLLING=true STORYBOOK_ENV=vm start-storybook -p 9001 -c .storybook"
  },
  "repository": "",
  "keywords": [],
  "author": "Your name here",
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.7.6",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-istanbul": "^3.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-polyfill": "^6.20.0",
    "babel-preset-airbnb": "^2.0.0",
    "babel-preset-es2015-native-modules": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "chai": "^3.5.0",
    "copyfiles": "^1.0.0",
    "cordova": "^6.5.0",
    "cross-env": "^3.2.3",
    "css-loader": "^0.26.4",
    "enzyme": "^2.7.0",
    "eslint": "^3.17.1",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.0",
    "eslint-plugin-react": "^6.9.0",
    "file-loader": "^0.9.0",
    "intl": "^1.2.5",
    "intl-locales-supported": "^1.0.0",
    "karma": "^1.0.0",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.0.0",
    "karma-junit-reporter": "^1.0.0",
    "karma-mocha": "^1.0.1",
    "karma-mocha-reporter": "^2.0.3",
    "karma-phantomjs-launcher": "^1.0.3",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.1",
    "localforage": "^1.4.3",
    "material-design-iconic-font": "^2.2.0",
    "material-ui": "^0.16.6",
    "mkdirp": "^0.5.1",
    "mocha": "^3.0.0",
    "moment": "^2.17.1",
    "node-sass": "^3.7.0",
    "null-loader": "^0.1.1",
    "numeral": "^2.0.4",
    "phantomjs-prebuilt": "^2.1.7",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-test-utils": "^15.4.2",
    "react-autobind": "^1.0.6",
    "react-css-modules": "^4.1.0",
    "react-dom": "^15.0.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-material-iconic-font": "^1.2.0",
    "react-redux": "^5.0.1",
    "react-swipeable-views": "^0.10.3",
    "react-tap-event-plugin": "^2.0.1",
    "react-waypoint": "^5.0.3",
    "redux": "^3.6.0",
    "redux-form": "^6.5.0",
    "redux-persist": "^4.2.0",
    "redux-saga": "^0.15.3",
    "redux-saga-test-plan": "^2.1.0",
    "request": "^2.81.0",
    "reselect": "^2.5.4",
    "rimraf": "^2.5.2",
    "sass-loader": "^3.2.0",
    "sinon": "^1.17.7",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta.6",
    "webpack-dev-server": "^2.1.0-beta",
    "whatwg-fetch": "^2.0.1"
  },
  "dependencies": {
    "@kadira/storybook": "^2.35.3",
    "@kadira/storybook-addon-knobs": "^1.7.1",
    "@kadira/storybook-addon-notes": "^1.0.1",
    "prop-types": "^15.5.9",
    "react-test-renderer": "^15.6.1",
    "storybook-addon-material-ui": "^0.7.8",
    "storybook-host": "^1.0.14",
    "webpack-combine-loaders": "^2.0.3"
  }
}

karma.conf.js

'use strict';

const webpackCfg = require('./webpack.config')('test');

module.exports = function karmaConfig(config) {

  config.set({
    browsers: ['PhantomJS'],
    files: [
      'test/loadtests.js'
    ],
    port: 8080,
    captureTimeout: 60000,
    frameworks: [
      'mocha',
      'chai',
      'sinon'
    ],
    client: {
      mocha: {}
    },
    singleRun: true,
    reporters: ['mocha', 'coverage', 'junit'],
    mochaReporter: {
      output: 'autowatch'
    },
    preprocessors: {
      'test/loadtests.js': ['webpack', 'sourcemap']
    },
    webpack: webpackCfg,
    webpackServer: {
      noInfo: true
    },
    junitReporter: {
      outputDir: 'coverage',
      outputFile: 'junit-result.xml',
      useBrowserName: false
    },
    coverageReporter: {
      dir: 'coverage/',
      watermarks: {
        statements: [70, 80],
        functions: [70, 80],
        branches: [70, 80],
        lines: [70, 80]
      },
      reporters: [
        { type: 'text' },
        {
          type: 'html',
          subdir: 'html'
        },
        {
          type: 'cobertura',
          subdir: 'cobertura'
        },
        {
          type: 'lcovonly',
          subdir: 'lcov'
        }
      ]
    }
  });
};

loadtests.js

'use strict';

// Add support for Promise objects via polyfills
import 'babel-polyfill';

// Add support for all files in the test directory
const testsContext = require.context('.', true, /(Test\.js$)/);
testsContext.keys().forEach(testsContext);

conf/webpack/Base.js

'use strict';  // eslint-disable-line

/**
 * Webpack configuration base class
 */
const fs = require('fs');
const path = require('path');

const npmBase = path.join(__dirname, '../../node_modules');

class WebpackBaseConfig {

  constructor() {
    this._config = {};
  }

  /**
   * Get the list of included packages
   * @return {Array} List of included packages
   */
  get includedPackages() {
    return [].map((pkg) => fs.realpathSync(path.join(npmBase, pkg)));
  }

  /**
   * Set the config data.
   * This will always return a new config
   * @param {Object} data Keys to assign
   * @return {Object}
   */
  set config(data) {
    this._config = Object.assign({}, this.defaultSettings, data);
    return this._config;
  }

  /**
   * Get the global config
   * @return {Object} config Final webpack config
   */
  get config() {
    return this._config;
  }

  /**
   * Get the environment name
   * @return {String} The current environment
   */
  get env() {
    return 'dev';
  }

  /**
   * Get the absolute path to src directory
   * @return {String}
   */
  get srcPathAbsolute() {
    return path.resolve('./src');
  }

  /**
   * Get the absolute path to tests directory
   * @return {String}
   */
  get testPathAbsolute() {
    return path.resolve('./test');
  }

  /**
   * Get the default settings
   * @return {Object}
   */
  get defaultSettings() {
    const cssModulesQuery = {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]-[local]-[hash:base64:5]'
    };

    return {
      context: this.srcPathAbsolute,
      devtool: 'eval',
      devServer: {
        contentBase: './src/',
        publicPath: '/assets/',
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 8000
      },
      entry: ['babel-polyfill', './index.js'],
      module: {
        rules: [
          {
            enforce: 'pre',
            test: /\.js?$/,
            include: this.srcPathAbsolute,
            loader: 'babel-loader',
            query: {
              presets: ['es2015']
            }
          },
          {
            test: /^.((?!cssmodule).)*\.css$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' }
            ]
          },
          {
            test: /\.(png|jpg|gif|mp4|ogg|svg|ttf|woff|woff2)$/,
            loader: 'file-loader'
          },
          {
            test: /^.((?!cssmodule).)*\.(sass|scss)$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              { loader: 'sass-loader' }
            ]
          },
          {
            test: /^.((?!cssmodule).)*\.less$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              { loader: 'less-loader' }
            ]
          },
          {
            test: /^.((?!cssmodule).)*\.styl$/,
            loaders: [
              { loader: 'style-loader' },
              { loader: 'css-loader' },
              { loader: 'stylus-loader' }
            ]
          },
          {
            test: /\.json$/,
            loader: 'json-loader'
          },
          {
            test: /\.(js|jsx)$/,
            include: [].concat(
              this.includedPackages,
              [this.srcPathAbsolute]
            ),
            loaders: [
              // Note: Moved this to .babelrc
              { loader: 'babel-loader' }
            ]
          },
          {
            test: /\.cssmodule\.(sass|scss)$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'sass-loader' }
            ]
          },
          {
            test: /\.cssmodule\.css$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              }
            ]
          },
          {
            test: /\.cssmodule\.less$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'less-loader' }
            ]
          },
          {
            test: /\.cssmodule\.styl$/,
            loaders: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                query: cssModulesQuery
              },
              { loader: 'stylus-loader' }
            ]
          }
        ]
      },
      output: {
        path: path.resolve('./www/assets'),
        filename: 'app.js',
        publicPath: './assets/'
      },
      plugins: [],
      resolve: {
        alias: {
          actions: `${this.srcPathAbsolute}/actions/`,
          components: `${this.srcPathAbsolute}/components/`,
          config: `${this.srcPathAbsolute}/config/${this.env}.js`,
          images: `${this.srcPathAbsolute}/images/`,
          sources: `${this.srcPathAbsolute}/sources/`,
          stores: `${this.srcPathAbsolute}/stores/`,
          styles: `${this.srcPathAbsolute}/styles/`
        },
        extensions: ['.js', '.jsx'],
        modules: [
          this.srcPathAbsolute,
          'node_modules'
        ]
      }
    };
  }
}

module.exports = WebpackBaseConfig;

thx in advance.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions