由于 webpack 中的 css,Mocha 测试失败
Mocha testing failed due to css in webpack
我是 Mocha 的新手,我想用它来测试一个简单的 React 组件。如果 React 组件没有任何 CSS 样式,测试将通过,但如果 React 组件中的标签包含任何 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');
});
})
测试将通过:
> 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)
在输入标签中添加类名后出现错误:
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>
);
}
}
测试结果:
SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color {
| ^
2 | color: red;
3 | }
我在网上搜索过,但目前还没有成功。我错过了什么吗?请帮助我或指出正确的方向,将不胜感激。
我目前正在使用:
节点快速服务器
反应
反应路由器
网页包
通天塔
摩卡
柴
诗乃
Sinon-柴
由于您使用的是 webpack,因此当 webpack 在您的组件中遇到所需的 CSS/LESS/SASS/etc 文件时,请使用 null-loader 加载 null
。通过 npm 安装,然后更新您的 webpack 配置以包含加载程序:
{
test: /(\.css|\.less|.\scss)$/,
loader: 'null-loader'
}
显然,这会阻止您在实际应用程序中加载 CSS,因此您需要为使用此加载器的测试包提供单独的 webpack 配置。
可以使用css编译器运行mocha,编译js如下:
css-dnt-compiler.js
function donothing() {
return null;
}
require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
// ..etc
和运行 摩卡命令是这样的:
mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive
有一个 babel/register
样式钩子可以忽略样式导入:
https://www.npmjs.com/package/ignore-styles
安装它:
npm install --save-dev ignore-styles
运行 无样式测试:
mocha --require ignore-styles
,这就是我以前在 Babel 6 上工作的东西
package.json
"scripts": {
"test": "mocha --compilers js:babel-core/register
--require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",
tools/testHelper.js
// Prevent mocha from interpreting CSS @import files
function noop() {
return null;
}
require.extensions['.css'] = noop;
这使您可以将测试与组件放在 src 文件夹中。您可以使用 require.extensions.
添加任意数量的扩展名
None 这些解决方案对我有用,因为我使用的是 mocha-webpack,它不接受“--compilers”开关。我实现了 ignore-styles 包,如最流行的答案中所述,但它似乎是惰性的,在我的伊斯坦布尔覆盖率报告中没有区别(.less 文件仍在测试中)。
问题是我在 webpack.config.test.js 文件中使用的 .less 加载程序。只需将 less-loader 换成 null-loader 就解决了我的问题。
module: {
rules: [
{
test: /\.less$/,
use: ['null-loader']
}
]
}
对我来说,这是迄今为止最简单的解决方案,直接针对我的测试配置,而不必 alter/add 到 package.json 脚本,或者更糟的是,添加新的 .js 文件。
一个简单的方法是导入'ignore-styles';在你的测试中 类..
对于那些在 jest
中寻找如何处理此问题的人 - 您只需为样式文件添加一个处理程序:
// package.json
{
"jest": {
"moduleNameMapper": {
"\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
// __mocks__/styleMock.js
module.exports = {};
更多here.
下面的代码在没有任何依赖的情况下工作。只需将它添加到测试的顶部即可。
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);
};
虽然很老了,这个问题仍然很相关,所以让我提出另一个解决方案。
使用 pirates,一个为 require()
添加钩子的包 - 如果你使用 Babel,你已经有了它。
示例代码:
// .test-init.js
const { addHook } = require('pirates');
const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];
addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });
这样你就可以像这样调用mocha:mocha --require .test-init.js [whatever other parameters you use]
这简单明了,与 ignore-styles 不同,它并不意味着您只忽略样式。此外,如果您需要对测试应用更多技巧(例如模拟整个模块),这很容易扩展。
我是 Mocha 的新手,我想用它来测试一个简单的 React 组件。如果 React 组件没有任何 CSS 样式,测试将通过,但如果 React 组件中的标签包含任何 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');
});
})
测试将通过:
> 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)
在输入标签中添加类名后出现错误:
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>
);
}
}
测试结果:
SyntaxError: /Users/../../../Documents/project/app/scss/components/landing/testing.scss: Unexpected token (1:0)
> 1 | .color {
| ^
2 | color: red;
3 | }
我在网上搜索过,但目前还没有成功。我错过了什么吗?请帮助我或指出正确的方向,将不胜感激。
我目前正在使用:
节点快速服务器
反应
反应路由器
网页包
通天塔
摩卡
柴
诗乃
Sinon-柴
由于您使用的是 webpack,因此当 webpack 在您的组件中遇到所需的 CSS/LESS/SASS/etc 文件时,请使用 null-loader 加载 null
。通过 npm 安装,然后更新您的 webpack 配置以包含加载程序:
{
test: /(\.css|\.less|.\scss)$/,
loader: 'null-loader'
}
显然,这会阻止您在实际应用程序中加载 CSS,因此您需要为使用此加载器的测试包提供单独的 webpack 配置。
可以使用css编译器运行mocha,编译js如下:
css-dnt-compiler.js
function donothing() {
return null;
}
require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
// ..etc
和运行 摩卡命令是这样的:
mocha --compilers js:babel-core/register,css:css-dnt-compiler.js --recursive
有一个 babel/register
样式钩子可以忽略样式导入:
https://www.npmjs.com/package/ignore-styles
安装它:
npm install --save-dev ignore-styles
运行 无样式测试:
mocha --require ignore-styles
package.json
"scripts": {
"test": "mocha --compilers js:babel-core/register
--require ./tools/testHelper.js 'src/**/*-spec.@(js|jsx)'",
tools/testHelper.js
// Prevent mocha from interpreting CSS @import files
function noop() {
return null;
}
require.extensions['.css'] = noop;
这使您可以将测试与组件放在 src 文件夹中。您可以使用 require.extensions.
添加任意数量的扩展名None 这些解决方案对我有用,因为我使用的是 mocha-webpack,它不接受“--compilers”开关。我实现了 ignore-styles 包,如最流行的答案中所述,但它似乎是惰性的,在我的伊斯坦布尔覆盖率报告中没有区别(.less 文件仍在测试中)。
问题是我在 webpack.config.test.js 文件中使用的 .less 加载程序。只需将 less-loader 换成 null-loader 就解决了我的问题。
module: {
rules: [
{
test: /\.less$/,
use: ['null-loader']
}
]
}
对我来说,这是迄今为止最简单的解决方案,直接针对我的测试配置,而不必 alter/add 到 package.json 脚本,或者更糟的是,添加新的 .js 文件。
一个简单的方法是导入'ignore-styles';在你的测试中 类..
对于那些在 jest
中寻找如何处理此问题的人 - 您只需为样式文件添加一个处理程序:
// package.json
{
"jest": {
"moduleNameMapper": {
"\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
// __mocks__/styleMock.js
module.exports = {};
更多here.
下面的代码在没有任何依赖的情况下工作。只需将它添加到测试的顶部即可。
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);
};
虽然很老了,这个问题仍然很相关,所以让我提出另一个解决方案。
使用 pirates,一个为 require()
添加钩子的包 - 如果你使用 Babel,你已经有了它。
示例代码:
// .test-init.js
const { addHook } = require('pirates');
const IGNORE_EXTENSIONS = ['.scss', '.svg', '.css'];
addHook((code, filename) => '', { exts: IGNORE_EXTENSIONS });
这样你就可以像这样调用mocha:mocha --require .test-init.js [whatever other parameters you use]
这简单明了,与 ignore-styles 不同,它并不意味着您只忽略样式。此外,如果您需要对测试应用更多技巧(例如模拟整个模块),这很容易扩展。