【问题标题】:React components not works in RequireJS+Jasmine unit testsReact 组件在 RequireJS+Jasmine 单元测试中不起作用
【发布时间】:2016-03-21 07:26:18
【问题描述】:

我正在创建自己的bootstrap project。目前我完成了很多事情,但现在我遇到了 ReactJS 组件的单元测试问题。

当我在浏览器中运行应用程序时 - 一切正常。我使用 RequireJS 来延迟加载所需的模块。封装到 RequireJS 模块和浏览器中的 React 组件都按预期工作。

但是当我尝试对 React 组件进行单元测试时,RequireJs 不会加载 React。而且 React 是未定义的......

这里是Gruntfile.js,我在这里创建业力任务。

这里是 karma.config.js 带有业力配置的文件。

这是运行测试的test-main.js

我的测试文件如下所示:

定义(['helper/utils', 'underscore', 'components/List'], function(utils, _, List){ describe("例如第一次测试", function() { it("TRUE 应该是 TRUE :)", function() { 期望(真).toBe(真); }); it("测试 requirejs 助手加载", function(){ 期望(utils.testJasmine()).toBe(“茉莉花”); }); it('下划线有效', function() { // 只是检查 _ 是否有效 期望(_.size([1,2,3])).toEqual(3); }); it('列表组件已加载', function(){ expect(List.test()).toBe('列表组件'); }); }); });

List - 这是我的 ReactJS 组件。当我尝试运行测试时,我得到了错误:

咕噜测试 运行“业力:单位”(业力)任务 15 12 2015 15:17:40.813:INFO [karma]: Karma v0.13.15 服务器在 http://localhost:9876/ 开始 15 12 2015 15:17:40.833:​​INFO [启动器]:启动浏览器 PhantomJS 15 12 2015 15:17:42.430:INFO [PhantomJS 1.9.8 (Windows 7 0.0.0)]: 连接在套接字 uQidvbVxLImPJ1kdAAAA 上,ID 为 99794753 PhantomJS 1.9.8 (Windows 7 0.0.0) 日志:'spec/FirstSpec' PhantomJS 1.9.8 (Windows 7 0.0.0) 错误: TypeError{message: ''undefined' is not a function (evalating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][ az\d_.\-] *$/)')',行:3195,sourceId:86376736,sourceURL:'http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a',堆栈: 'TypeError: 'undefined' 不是函数(评估 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/)') 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:3195 在 s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4) 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:8481 在 s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4) 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:6100 在 s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4) 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:18 在 s (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4) 在 e (http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:4) 在 http://localhost:9876/base/bower_components/react/react.js?d1bee606f43f11cbd5eb0e7534d094cd1518306a:18793 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1690 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:865 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1177 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:783 在调用GetModule (http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1204) 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1583 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1711',stackArray: [Object{sourceURL: ..., line: ...} , Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ... }, Object{function: ..., sourceURL: ..., li ne: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ... ,行:...},对象{sourceURL:...,行:... }, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{function: ..., sourceURL: .. ., line: ...}, Object{sourceURL: ..., l ine: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ... }, Object{sourceURL: ..., line: ...}, Object{func 化:...,sourceURL:...,行:...},对象{sourceURL:...,行:...},对象{sourceURL:...,行:...}]} PhantomJS 1.9.8 (Windows 7 0.0.0) 错误:TypeError{message: ''undefined' is not an object (evalating 'React.createClass')', line: 4, sourceId: 86378776, sourceUR L:'http://localhost:9876/base/scripts/components/List.js?11abba705dd0e6b2d4637e4057531f428d9dcf1c',堆栈:'TypeError:'undefined'不是对象(评估' React.createClass') 在 http://localhost:9876/base/scripts/components/List.js?11abba705dd0e6b2d4637e4057531f428d9dcf1c:4 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1690 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:865 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1140 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:131 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1190 在每个(http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:56) 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1191 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:940 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1177 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:783 在调用GetModule (http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1204) 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1583 在 http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1711',stackArray: [Object{sourceURL: ..., line: ...} , Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: ...,行:...},对象{sourceURL:.. ., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ..., line: ...}, Object{sourceURL: . .., line: ...}, Object{sourceURL: ..., line : ...}, Object{sourceURL: ..., line: ...}, Object{function: ..., sourceURL: ..., line: ...}, Object{sourceURL: ...,行:...},对象{sourceURL:...,行:...}] } PhantomJS 1.9.8 (Windows 7 0.0.0) 第一个测试例如 List 组件加载失败 TypeError:“未定义”不是对象(评估“List.test”) 在 c:/Users/dmytro.medvid/sites/evolution/spec/FirstSpec.js:30 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1690 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:865 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190 在每个(c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56) 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190 在每个(c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56) 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1140 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:131 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1190 在每个(c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:56) 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1191 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:940 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1177 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:783 在 callGetModule (c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1204) 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1583 在 c:/Users/dmytro.medvid/sites/evolution/node_modules/requirejs/require.js:1711 PhantomJS 1.9.8(Windows 7 0.0.0):执行 4 次,共 4 次(1 次失败)(0.007 秒 / 0.003 秒) 警告:任务“业力:单位”失败。使用 --force 继续。 由于警告而中止。

【问题讨论】:

    标签: javascript unit-testing reactjs requirejs karma-jasmine


    【解决方案1】:

    ReactJS 对 PhantomJS 有问题 https://github.com/facebook/react/pull/347

    这是一个修复:

    加载https://github.com/facebook/react/blob/3dc10749080a460e48bee46d769763ec7191ac76/src/test/phantomjs-shims.js 文件。

    添加到karma.config.jsfiles

    'scripts/phantomjs-shims.js',
    

    【讨论】:

      猜你喜欢
      • 2016-05-14
      • 2018-02-26
      • 1970-01-01
      • 1970-01-01
      • 2013-06-29
      • 1970-01-01
      • 1970-01-01
      • 2020-04-08
      • 1970-01-01
      相关资源
      最近更新 更多