使用jQuery反应组件而不需要 – jestunit testing
我有一个非常简单的React mixin，它使用jQuery来触发事件
MyMixin = { trackStructEvent: function () { args = Array.prototype.slice.call(arguments); $('body').trigger('myEvent', args); } module.exports = MyMixin 使用browserify将其作为一组新组件的一部分导入主站点。 由于拥有这些组件的主站点将始终包含jQuery，我不希望jQuery与browserify一起使用，因为它将被复制。
这在行为方面不是问题 – 但是在运行jest以使用此mixin抛出错误来对组件进行unit testing时会导致问题。
ReferenceError: $ is not defined
我知道我可以通过浏览器包含jQuery来解决这个问题，但这会将2个副本加载到我的网站中。
有没有什么方法可以告诉我的反应组件jQuery已经存在于窗口而不用担心它？
我有类似的问题，但我想我到目前为止解决了你的问题。 您需要在您的react文件中使用require来定义$下的jQuery
var $ = require('jquery'); MyMixin = { trackStructEvent: function () { args = Array.prototype.slice.call(arguments); $('body').trigger('myEvent', args); } module.exports = MyMixin
然后你需要告诉jest不要模拟jquery
jest.dontMock('jquery')
然后你的jestunit testing应该通过（假设他们没有validationjQuery正在做的事情 – 这是我的测试正在崩溃的地方）。
您还需要告诉browserify jQuery是外部的，然后结果将是所有对$的引用都已定义，jquery库被加载用于测试但不包含在browserify包中。 （使用browserify-shim ）
我要去的是：
if (process.env.NODE_ENV === 'test') window.$ = require('jquery');
我希望这可以帮助别人！
更新：
我已经开始在所有使用jQuery的React文件中import $ from 'jquery' 。 这消除了对窗口的依赖。$是我期望的jQuery的类型（我遇到了其他库弄乱窗口的问题。$。起初，我担心在任何地方导入jQuery，因为我担心这会增加我的捆绑大小。但捆绑的工作方式，所有这些导入将指向单身，因此捆绑大小不会增加。
就我而言，我对测试组件中的jQueryfunction不感兴趣。 另外，我没有在我的包中包含jQuery，因为它被使用并包含在我的应用程序所在的网站上。 例如，我做了以下事情：
// SubmitRender.js // ...import statements... var SubmitRender = React.createClass({ componentWillMount: function () { $('form').on('submit', (e)=>{ this.handleSubmit(e); }); }, // ...more code... }); export default SubmitRender;
。
// SubmitRender.spec.js // ...import statements... describe('SubmitRender', () => { beforeAll(() => { // mocking jQuery $() global.window.$ = jest.fn(() => {return {on: jest.fn()}}); }); it('renders without error', () => { expect( () => render(
我知道如果不调用$函数我的组件将无法挂载。 所以我只是在beforeAll()使用jest.fn来模拟该函数。 现在，我也知道我的实际组件中的jQuery函数是链接的。 所以我知道我还需要考虑jQuery的.on() ，所以我确保返回一个带on函数的对象。 没有进一步的链接，所以这是我可以停下来的地方。
如果我有一组更复杂的链接函数，我可以这样做：
beforeAll(() => { // mocking jQuery $() var fakeQuery = jest.fn(() => { return { on: fakeQuery, off: fakeQuery, click: fakeQuery } }) global.window.$ = fakeQuery; });