reactjs - script - react helmet sync

Uso de alias de paquetes web en pruebas de moca

Question

Estoy desarrollando una aplicación web en funcionamiento en React / Redux / Webpack y ahora estoy empezando a integrar pruebas con Mocha.

Seguí las instrucciones para escribir pruebas en la documentación de Redux , pero ahora me encontré con un problema con mis alias de la carpeta web.

Por ejemplo, eche un vistazo a la sección de importaciones de esta prueba para uno de mis creadores de acciones:

import expect       from ''expect''                 // resolves without an issue
import * as actions from ''actions/app'';           // can''t resolve this alias
import * as types   from ''constants/actionTypes''; // can''t resolve this alias

describe(''Actions'', () => {
  describe(''app'',() => {
    it(''should create an action with a successful connection'', () => {

      const host = ''***************'',
            port = ****,
            db = ''******'',
            user = ''*********'',
            pass = ''******'';

      const action = actions.createConnection(host, port, db, user, pass);

      const expectedAction = {
        type: types.CREATE_CONNECTION,
        status: ''success'',
        payload: { host, port, database, username }
      };

      expect(action).toEqual(expectedAction);
    });
  });
});

Como sugieren los comentarios, mocha no puede resolver mis instrucciones de importación cuando hacen referencia a dependencias con alias.

Como todavía soy nuevo en el paquete web, aquí está mi webpack.config.js :

module.exports = {
  devtool: ''eval-source-map'',
  entry: [
    ''webpack-hot-middleware/client'',
    ''./src/index''
  ],
  output: {
    path: path.join(__dirname, ''dist''),
    filename: ''bundle.js'',
    publicPath: ''/static/''
  },
  resolve: {
    extensions : ['''', ''.js'', ''.jsx''],
    alias: {
      actions: path.resolve(__dirname, ''src'', ''actions''),
      constants: path.resolve(__dirname, ''src'', ''constants''),
      /* more aliases */
    }
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: //.js$/,
      loaders: [''babel''],
      exclude: /node_modules/,
      include: __dirname
    }]
  }
};

Además, estoy usando el comando npm test para ejecutar mocha, aquí está el script que estoy usando en mi package.json .

 {   
   "scripts": {
     "test": "mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive"
   }
 }

Así que aquí es donde me quedo atascado. Necesito incluir los alias del paquete web en mocha cuando se ejecuta.

Answer 1

Creo que resolví este problema. Deberías usar 2 paquetes: mock-require y proxyquire .

Suponiendo que tiene un archivo js como este:

app.js

import action1 from ''actions/youractions'';   

export function foo() { console.log(action1()) }; 

Y tu código de prueba debería escribir así:

app.test.js

import proxyquire from ''proxyquire'';
import mockrequire from ''mock-require'';

before(() => {
  // mock the alias path, point to the actual path
  mockrequire(''actions/youractions'', ''your/actual/action/path/from/your/test/file'');
  // or mock with a function
  mockrequire(''actions/youractions'', {actionMethod: () => {...}));

let app;
beforeEach(() => {
  app = proxyquire(''./app'', {});
});

//test code
describe(''xxx'', () => {
  it(''xxxx'', () => {
    ...
  });
});

árbol de archivos

app.js
  |- test
    |- app.test.js

Primero simula la ruta del alias mediante el simulacro requerido en la función anterior, y simula el objeto de prueba por proxyquire antes de cada función.

Answer 2

De acuerdo, me di cuenta de que todo lo que estaba aliasing estaba en el directorio src/ , así que simplemente necesitaba modificar mi npm run test .

{   
  "scripts": {
    "test": "NODE_PATH=./src mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive"
  }
}

Probablemente no funcionará para todos, pero eso resolvió mi problema.

Answer 3

La respuesta de Danny es genial. Pero mi situación es un poco diferente. Usé resolve.alias de resolve.alias para usar todos los archivos en la carpeta src .

resolve: {
  alias: {
    ''-'': path.resolve(__dirname, ''../src''),
  },
},

y use un prefijo especial para mis propios módulos como este:

import App from ''-/components/App'';

Para probar un código como este, tengo que agregar un comando ln -sf src test/alias/- antes de la prueba de mocha y usar el NODE_PATH=./test/alias Danny camp up. Entonces, el guión final sería así:

{   
  "scripts": {
    "test": "ln -sf src test/alias/-; NODE_PATH=./test/alias mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive"
  }
}

PD:

Utilicé - porque los charactores bellos como @ o ~ no son lo suficientemente seguros. Encontré la respuesta para los personajes seguros here

Answer 4

Supongo que tendrías que --require babel-register en tu mocha.opts . Puede usar el complemento de resolución de módulos babel https://github.com/tleunen/babel-plugin-module-resolver . Esto le permite establecer un alias en .babelrc, similar a su alias de paquete web:

{
  "plugins": [
    ["module-resolver", {
       "alias": {
         "actions": "./src/actions",
         "constants": "./src/constants"
       }
    }]
  ]
}

Answer 5

También encontré el mismo problema, pero con este complemento lo resolví.

https://www.npmjs.com/package/babel-plugin-webpack-aliases

El comando de ejecución de su "mocha" no lee el webpack.config.js , por lo que no puede resolver el alias.
Al configurar este complemento, considere webpack.config.js al compilar con "babel-core / register". Como resultado, el alias también será válido durante la prueba.

npm i -D babel-plugin-webpack-aliases

y agrega esta configuración a .babelrc

{
    "plugins": [
        [ "babel-plugin-webpack-aliases", { "config": "./webpack.config.js" } ] 
    ]
}

Answer 6

También puede usar un complemento babel del que fui autor: https://github.com/trayio/babel-plugin-webpack-alias Convierta su ruta alias a rutas relativas con solo incluir un complemento babel en su .babelrc .

Answer 7

Yo tuve exactamente el mismo problema. Parece imposible utilizar alias de paquetes web en require.js o en los requisitos del nodo.

Terminé usando el mock-require en las pruebas unitarias y simplemente reemplacé las rutas manualmente, así:

var mock = require(''mock-require'');

mock(''actions/app'', ''../../src/actions/app'');

el simulacro de requerimiento es una buena herramienta, porque lo más probable es que le gustaría burlarse de la mayoría de sus dependencias de todos modos en lugar de utilizar las secuencias de comandos reales de src .