- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在用 react/redux/webpack 编写一个应用程序。我正在使用 karma、mocha 构建我的测试,并希望使用 istanbul 进行测试覆盖。为了使覆盖率与业力覆盖率一起工作,我设置了以下 karma.config.js
var argv = require('yargs').argv;
var path = require('path');
var webpack = require('webpack');
const PATHS = {
test: path.join(__dirname, 'test'),
app: path.join(__dirname, 'app'),
}
module.exports = function(config) {
config.set({
// only use PhantomJS for our 'test' browser
browsers: ['PhantomJS'],
// just run once by default unless --watch flag is passed
singleRun: !argv.watch,
// which karma frameworks do we want integrated
frameworks: ['mocha', 'chai'],
// include some polyfills for babel and phantomjs
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js',
// './test/**/*.js', // specify files to watch for tests,
'test/index.js',
],
preprocessors: {
// these files we want to be precompiled with webpack
// also run tests through sourcemap for easier debugging
// 'test/*.spec.js': ['webpack'],
'test/index.js': ['webpack', 'sourcemap']
},
// A lot of people will reuse the same webpack config that they use
// in development for karma but remove any production plugins like UglifyJS etc.
// I chose to just re-write the config so readers can see what it needs to have
webpack: {
devtool: 'inline-source-map',
resolve: {
// allow us to import components in tests like:
// import Example from 'components/Example';
root: PATHS.app,
// allow us to avoid including extension name
extensions: ['', '.js', '.jsx'],
// required for enzyme to work properly
alias: {
'sinon': 'sinon/pkg/sinon'
}
},
module: {
// don't run babel-loader through the sinon module
noParse: [
/node_modules\/sinon\//
],
preLoaders: [
// instrument only testing sources with Istanbul
// {
// test: /\.js$/,
// include: path.resolve('app/'),
// exclude: /node_modules/,
// loader: 'istanbul-instrumenter'
// }
{
test: /\.jsx?$/,
exclude: [/node_modules/, /test/],
loader: 'isparta-instrumenter-loader'
},
],
// run babel loader for our tests
loaders: [
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'survivejs-kanban']
}
},
],
},
// required for enzyme to work properly
externals: {
'jsdom': 'window',
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': 'window'
},
},
// displays tests in a nice readable format
reporters: ['spec', 'coverage'],
webpackMiddleware: {
noInfo: true
},
// tell karma all the plugins we're going to be using to prevent warnings
plugins: [
'karma-mocha',
'karma-chai',
'karma-webpack',
'karma-phantomjs-launcher',
'karma-spec-reporter',
'karma-sourcemap-loader',
'karma-coverage'
]
});
};
karma 的入口点就是 test/index.js
。看起来像这样
// require all the tests so they will run.
const testsContext = require.context('.', true, /spec/);
testsContext.keys().forEach(testsContext);
// require all the .js and .jsx files in app so they will be included in coverage
const componentsContext = require.context('../app/', true, /jsx?$/);
// Date: April 16 2016
// Author: Benjamin Conant
// componentsContext.keys() is an array that includes file paths for all the
// .js and .jsx files in ./app .... karma fails with
// PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
// Invariant Violation: _registerComponent(...): Target container is not a DOM element.
// at /Users/benconant/Dev/MyFin/my-fin-front-end/test/index.js:15283 <- webpack:///~/react/~/fbjs/lib/invariant.js:45:0
// if the entry point index.jsx file is included. Seems to have somthing
// to do with trying to actually write to the DOM. So, I filter out index.jsx and the tests run very well.
// This means that we will probubly not be able to test index.jsx until this is solved.
let componentsContextKeysWithoutIndexJsx = componentsContext.keys().filter(function (filePath) { return filePath !== './index.jsx' });
componentsContextKeysWithoutIndexJsx.forEach(componentsContext);
// componentsContext.keys().forEach(componentsContext); --- the way it should be if we did not have to remove ./index.jsx
正如您从过时的评论中看到的那样。如果包含 index.jsx
,当我运行测试时我得到...
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at /Users/benconant/Dev/MyFin/my-fin-front-end/test/index.js:15283 <- webpack:///~/react/~/fbjs/lib/invariant.js:45:0
这是我的index.jsx
供引用
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';;
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Router, Route, Link, browserHistory, hashHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import configureStore from './store/configureStore';
import todoApp from './reducers';
import App from './containers/app/App';
import IntroSlides from './containers/IntroSlides';
import LandingPage from './containers/LandingPage';
let store = configureStore();
const history = process.env.HASH_ROUTING ? syncHistoryWithStore(hashHistory, store) : syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={LandingPage} />
<Route path="intro" component={IntroSlides}/>
</Route>
</Router>
</Provider>,
document.getElementById('app')
)
我进入 React 生态系统大约一个星期,所以几乎可以肯定我在做一些愚蠢的事情,但这已经占用了很多时间,非常感谢帮助!
最佳答案
我遇到了同样的问题,在我的案例中,这是因为 React 无法找到它需要在其中呈现 html 的元素。
我通过将以下 if 语句添加到我的主 js 文件中找到了一个快速修复方法:
if ($('#app').length <= 0) {
$('body').prepend('<div id="app"></div>');
}
ReactDom.render(
<App />,
document.getElementById('app')
);
我知道这一定不是修复它的最佳方法,但至少它现在有效。如果有人知道更好的方法,请告诉我们!
我还在您评论中提到的主题中发布了此解决方案。
关于javascript - 测试覆盖率 React, Istanbul 尔 -_registerComponent(...) : Target container is not a DOM element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36670645/
在旧版 Web 应用程序中,我们没有对 javascript 部分进行任何单元测试。 我们希望提高代码质量并删除死代码。 有什么方法可以在人工测试期间在浏览器中进行逐行 Javascript 代码覆盖
我已经为我的 python 代码编写了测试,并且想检查测试覆盖了多少百分比,所以我决定使用 python 覆盖。但是我启动它时遇到问题。我用这个 bash 命令启动我的测试: export PYTHO
我正在使用 python 覆盖工具来运行我的单元测试。从结果中可以看出,它包括所有“站点包”。我怎样才能将它们排除在报告之外?我只想显示项目源代码的报告。 (ctrp) ubuntu@ubuntu-x
我正在尝试使用 Opencover 来运行 NUnit 测试用例的代码覆盖率。我得到了预期的结果,但问题是在执行 opencover 时它再次运行测试。我们不希望发生这种情况,因为我们单独运行测试。下
我正在尝试使用 Opencover 来运行 NUnit 测试用例的代码覆盖率。我得到了预期的结果,但问题是在执行 opencover 时它再次运行测试。我们不希望发生这种情况,因为我们单独运行测试。下
我有一个 python 项目,我使用: pipenv 毒性 pytest 还有更多。 基本上,我想将 tox 添加到我的 gitlab 管道中。几乎一切似乎都有效,从 tox 调用 mypy、flak
我使用Coverity来分析代码C。 配置命令: cov-configure --compiler /opt/toolchains/stbgcc-4.5.4-2.9/bin/mipsel-linux-
是否可以在运行时测量 python 代码覆盖率并在生成结果时查看结果?我尝试使用 coverage但找不到有帮助的选项。我最初的实验表明,.coverage 文件直到程序执行结束才被保存,这意味着我们
我有一个文件,test_basic.py: class TestCalculator(): def test_calculator(self): from basic impo
我有一个小型 PHP 项目,它使用 PHPUnit 进行单元测试和覆盖。我想生成 cobertura XML 格式的覆盖率报告。 我可以使用任何工具或插件来实现这一目标吗? 感谢任何帮助.. 最佳答案
我正在研究一个小 gem 并包含 simplecov到 spec_helper.rb 两行: require 'simplecov' SimpleCov.start 当我运行 rspec 测试时,si
go -cover 或 -coverprofile 在运行 go 测试时非常有用,并且可以在 html 或纯文本中很好地显示。但是是否有 api 以编程方式访问它或处理文件? 最佳答案 你可以试试ax
当我遇到代码覆盖问题时,我目前开始在 PHPUnit 中使用 strict 模式: 如果我使用setUp-方法创建我的类的新实例,__constructor-方法在我运行测试。 这是我的测试设置: p
我正在运行 EclEmma,它是 Eclipse 的 Emma 插件,覆盖率报告仅显示我定义的 Enum 的部分覆盖率,即使它显示 Enum 中唯一的值被覆盖。我假设支持 Enum 的隐含方法存在覆盖
我正在将 ANT 构建转换为 Maven。我不使用声纳。 在 Maven 中,Jacoco 似乎没有报告有关单元测试本身的覆盖率,而 ANT 则报告了。我也一直在尝试为我的 Maven 构建获取这个,
我正在努力为我正在处理的库实现 100% 的代码覆盖率,但我似乎对 switch 语句和覆盖率有一些问题,我根本不明白。 我目前使用的是 Jacoco 0.7.2,因为每个新版本似乎都与 Robole
有没有在intelliJ中不用浏览器运行代码覆盖率的方法? http://www.jetbrains.com/webstorm/webhelp/monitoring-code-coverage-for
我想确保我的 Django 测试套件涵盖我的 URL 配置中列出的所有 URL。有没有办法将 URL 配置中的列表与测试套件中命中的 URL 列表进行比较? 最佳答案 我能够通过定义自定义测试套件运行
哇,好乱啊。这是场景。 主干驱动的 JS 应用。 用于 AMD 功能的 RequireJS,初始化如下: 然后在 main.js 中添加以下配置代码: require.config( { p
我的问题很简单,但答案仍然难以捉摸。假设我有一个包裹 package mypackage func DoTheThing() int { return 5 } 现在假设我在 mypackage_t
我是一名优秀的程序员,十分优秀!