unit testing - react - La prueba de Mocha falló debido a css en el paquete web

webpack 4 babel

Question

Soy nuevo en Mocha y estoy tratando de usarlo para probar un componente React simple. La prueba pasaría si el componente reaccionar no tiene ningún estilo CSS, pero arroja un error de sintaxis si la etiqueta dentro del componente Reaccionar contiene algún className:

Testing.react.js

import React from ''react'';
export default class Testing extends React.Component {
render() {
return (
<section>
<form>
<input type="text" />
</form>
</section>
);
}
}

testing.jsx

import {
React,
sinon,
assert,
expect,
TestUtils
} from ''../../test_helper'';
import TestingSample from ''../../../app/components/Testing.react.js'';
describe(''TestingSample component'', function(){
before(''render and locate element'', function(){
var renderedComponent = TestUtils.renderIntoDocument(
<TestingSample />
);
var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
renderedComponent, ''input''
);
this.inputElement = inputComponent.getDOMNode();
});
it(''<input> should be of type "text"'', function () {
assert(this.inputElement.getAttribute(''type'') === ''text'');
});
})

La prueba pasaría:

> mocha --opts ./test/javascripts/mocha.opts --compilers js:babel/register --recursive test/javascripts/**/*.jsx
TestSample component
✓ <input> should be of type "text"
1 passing (44ms)

después de agregar className dentro de la etiqueta de entrada, aparece un error:

import React from ''react'';
import testingStyle from ''../../scss/components/landing/testing.scss'';
export default class Testing extends React.Component {
render() {
return (
<section>
<form>
<input type="text" className="testingStyle.color" placeholder="Where would you like to dine" />
</form>
</section>
);
}
}

Resultado de la prueba:

SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color {
| ^
2 | color: red;
3 | }

He buscado en línea pero no he tenido suerte hasta ahora ¿Me estoy perdiendo de algo? Por favor, ayúdenme o apúnteme en la dirección correcta sería muy apreciada. Actualmente estoy usando:
Servidor Node Express
Reaccionar
Enrutador de reacción
Paquete web
Babel
Moca
Chai
Sinon
Sinon-Chai

Answer 1

Aunque es muy antigua, esta pregunta sigue siendo relevante, así que permítanme agregar otra solución.

Use pirates , un paquete para agregar ganchos para require() : si usa Babel, ya lo tiene.

Código de ejemplo:

// .test-init.js
const { addHook } = require(''pirates'');
const IGNORE_EXTENSIONS = [''.scss'', ''.svg'', ''.css''];
addHook((code, filename) => '''', { exts: IGNORE_EXTENSIONS });

De esta manera puede llamar a mocha de esta manera: mocha --require .test-init.js [whatever other parameters you use]

Esto es sencillo, elegante y, a diferencia de ignorar estilos , no implica que solo se ignoren los estilos . Además, esto es fácilmente extensible si necesita aplicar más trucos a sus pruebas, como burlarse de módulos completos.

Answer 2

Como está usando webpack, use null-loader para cargar null cuando webpack encuentre un archivo CSS / LESS / SASS / etc requerido en sus componentes. Instale a través de npm y luego actualice la configuración de su paquete web para incluir el cargador:

{
test: /(/.css|/.less|./scss)$/,
loader: ''null-loader''
}

Obviamente, esto evitará que cargue CSS en su aplicación real, por lo que querrá tener una configuración de paquete web separada para su paquete de prueba que use este cargador.

Answer 3

El siguiente código funciona sin ninguna dependencia. Simplemente agréguelo a la parte superior de las pruebas.

var Module = require(''module'');
var originalRequire = Module.prototype.require;
Module.prototype.require = function () {
if (arguments[0] && arguments[0].endsWith(".css"))
return;
return originalRequire.apply(this, arguments);
};

Answer 4

Hay un babel/register estilo babel/register para ignorar las importaciones de estilo:

https://www.npmjs.com/package/ignore-styles

Instalarlo:

npm install --save-dev ignore-styles

Ejecute pruebas sin estilos:

mocha --require ignore-styles

Answer 5

Ninguna de estas soluciones funcionó para mí, ya que estoy usando mocha-webpack, y no acepta el interruptor "--compiladores". Implementé el paquete de ignorar estilos, como se describe en la respuesta más popular, pero parecía inerte, sin diferencias en mi informe de cobertura de Estambul (aún no se han probado archivos.

El problema es el cargador .less que estaba usando en mi archivo webpack.config.test.js. Simplemente intercambiar less-loader por null-loader solucionó mi problema.

module: {
rules: [
{
test: //.less$/,
use: [''null-loader'']
}
]
}

Para mí, esta es, con mucho, la solución más simple y apunta directamente a mi configuración de prueba, en lugar de tener que modificar / agregar a los scripts package.json, o peor aún, agregar nuevos archivos .js.

Answer 6

Para aquellos que buscan cómo manejar esto en jest , simplemente agregue un controlador para archivos de estilo:

// package.json
{
"jest": {
"moduleNameMapper": {
"//.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
// __mocks__/styleMock.js
module.exports = {};

Más here .

Answer 7

Una manera simple es importar ''ignorar estilos''; en tus clases de prueba ..

Answer 8

puede usar un compilador css ejecute mocha, el compilador js de la siguiente manera:

css-dnt-compiler.js

function donothing() {
return null;
}
require.extensions[''.css''] = donothing;
require.extensions[''.less''] = donothing;
require.extensions[''.scss''] = donothing;
// ..etc

y ejecuta el comando mocha así:

mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive

Answer 9

Mi misma respuesta que aquí , esto es lo que solía trabajar en Babel 6

package.json

"scripts": {
"test": "mocha --compilers js:babel-core/register
--require ./tools/testHelper.js ''src/**/*-spec.@(js|jsx)''",

herramientas / testHelper.js

// Prevent mocha from interpreting CSS @import files
function noop() {
return null;
}
require.extensions[''.css''] = noop;

Esto le permite tener sus pruebas dentro de su carpeta src junto con sus componentes. Puede agregar tantas extensiones como desee con require.extensions.