Jasmine 测试在 Chrome 和 Firefox 中通过,但在 PhantomJS 中失败
Jasmine tests pass in Chrome and Firefox but fail with PhantomJS
我正在使用 React 构建一个基本的博客应用程序。我正在使用 Jasmine 和 Karma 运行 我的前端测试。我得到了我的第一个测试 运行ning 并且它通过了 Chrome (Chromium) 和 Firefox,但是当它在 PhantomJS 中 运行s 我得到以下错误:
PhantomJS 1.9.8 (Linux 0.0.0) ERROR
TypeError: 'undefined' is not a function (evaluating 'ReactElementValidator.createElement.bind(
null,
type
)')
at /home/michael/repository/short-stories/test/karma_tests/story_test.js:1742
我的测试文件如下所示:
var React = require('react/addons');
var Story = require('../../app/js/components/story.jsx');
var TestUtils = React.addons.TestUtils;
var testUtilsAdditions = require('react-testutils-additions');
describe('Story component', function () {
var component;
beforeEach(function () {
component = TestUtils.renderIntoDocument(React.createElement('story'));
component.props.storyTitle = 'front end test title';
component.props.author = 'front end author';
component.props.storyText = 'front end story text';
});
it('should display a story', function () {
expect(component.props).toBeDefined();
expect(component.props.storyTitle).toBeDefined();
expect(component.props.storyTitle).toBe('front end test title');
expect(component.props.author).toBe('front end author');
expect(component.props.storyText).toBe('front end story text')
});
});
我尝试删除我的 node_modules,清除 npm 缓存并安装 npm,但没有解决问题。我不确定我的测试如何在 Firefox 和 Chrome 中通过,但在 PhantomJS 中却没有。你可以在这里看到完整的项目:https://github.com/mrbgit/short-stories。让我知道是否有更多信息可以提供帮助。任何帮助表示赞赏。谢谢!
PhantomJS 使用相当旧的 Qt-Webkit 版本,不提供 Function.prototype.bind
. This is a problem for a lot of libraries, so a polyfill NPM module called 'phantomjs-polyfill' 可用。
如果您不想使用 NPM 模块(如果您正在测试未与 browserify/webpack 捆绑在一起的浏览器站点),bind
上提供了以下 polyfill MDN页面,你可以自己附上:
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
我正在使用 React 构建一个基本的博客应用程序。我正在使用 Jasmine 和 Karma 运行 我的前端测试。我得到了我的第一个测试 运行ning 并且它通过了 Chrome (Chromium) 和 Firefox,但是当它在 PhantomJS 中 运行s 我得到以下错误:
PhantomJS 1.9.8 (Linux 0.0.0) ERROR
TypeError: 'undefined' is not a function (evaluating 'ReactElementValidator.createElement.bind(
null,
type
)')
at /home/michael/repository/short-stories/test/karma_tests/story_test.js:1742
我的测试文件如下所示:
var React = require('react/addons');
var Story = require('../../app/js/components/story.jsx');
var TestUtils = React.addons.TestUtils;
var testUtilsAdditions = require('react-testutils-additions');
describe('Story component', function () {
var component;
beforeEach(function () {
component = TestUtils.renderIntoDocument(React.createElement('story'));
component.props.storyTitle = 'front end test title';
component.props.author = 'front end author';
component.props.storyText = 'front end story text';
});
it('should display a story', function () {
expect(component.props).toBeDefined();
expect(component.props.storyTitle).toBeDefined();
expect(component.props.storyTitle).toBe('front end test title');
expect(component.props.author).toBe('front end author');
expect(component.props.storyText).toBe('front end story text')
});
});
我尝试删除我的 node_modules,清除 npm 缓存并安装 npm,但没有解决问题。我不确定我的测试如何在 Firefox 和 Chrome 中通过,但在 PhantomJS 中却没有。你可以在这里看到完整的项目:https://github.com/mrbgit/short-stories。让我知道是否有更多信息可以提供帮助。任何帮助表示赞赏。谢谢!
PhantomJS 使用相当旧的 Qt-Webkit 版本,不提供 Function.prototype.bind
. This is a problem for a lot of libraries, so a polyfill NPM module called 'phantomjs-polyfill' 可用。
如果您不想使用 NPM 模块(如果您正在测试未与 browserify/webpack 捆绑在一起的浏览器站点),bind
上提供了以下 polyfill MDN页面,你可以自己附上:
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}