使用 react jest 测试 requireJS 中创建的组件，抛出错误：ReferenceError: define is not defined答案

【问题标题】：Using react jest to test component created in requireJS, throwing error: ReferenceError: define is not defined使用 react jest 测试 requireJS 中创建的组件，抛出错误：ReferenceError: define is not defined
【发布时间】：2018-01-28 15:11:39
【问题描述】：

我们现在在主干/requireJS项目中使用reactJS创建组件，下面是我创建的一个简单组件：

define(function(require) {
    var React = require('react');
    var Step1Comp =   React.createClass({
        render: function() {
            return <div>Step1</div>
        }
    });
    return Step1Comp;
});

这是测试：

'use strict';
jest.unmock('../../public/js/Step1Comp');


import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom';
import Step1Comp from '../../public/js/Step1Comp';

describe('a test testing comp', ()=>{
    it('render comp', ()=>{
        window.define={};
        var step1Comp = TestUtils.renderIntoDocument(<Step1Comp />);
        expect(TestUtils.isCompositeComponent(step1Comp)).toBeTruthy();

    });
});

当我们运行 jest 时，我得到了这个错误：

Test suite failed to run
ReferenceError: define is not defined

组件必须在define中，因为主项目是用requireJS编写的，我们必须将它包装在define中，以便这个comp可以与其他组件一起加载。

我曾尝试在测试中添加window['define']={}来模拟define函数，但是没用。

谁能帮我解决这个问题？

提前致谢。

现在更新如下：

jest.mock('define', () => {
});

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom';
import Step1Comp from '../../public/js/app/create-quote/components/comps/details/step1/Step1Comp';

describe('a test testing comp', ()=>{
    it('render comp', ()=>{
        var step1Comp = TestUtils.renderIntoDocument(<Step1Comp />);
        expect(TestUtils.isCompositeComponent(step1Comp)).toBeTruthy();
    });
});

但是当我开玩笑的时候，还是一样的错误：

> NGCSC@1.0.0 test-faked /Users/frankhe/myjuniper-new/myjuniper/ngcsc-ui
> jest

 FAIL  __tests__/test_comp/test.jest.js
  ● Test suite failed to run

    ReferenceError: define is not defined

【问题讨论】：

标签： reactjs backbone.js requirejs jestjs

【解决方案1】：

Jest 不支持RequireJS。在 Step1Comp.test.js 的顶部模拟依赖会更容易也最合适：

jest.mock('amdefine', () => {
  // mock implementation
})

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom';
import Step1Comp from '../../public/js/Step1Comp';

describe('a test testing comp', ()=>{
    it('render comp', ()=>{
        var step1Comp = TestUtils.renderIntoDocument(<Step1Comp />);
        expect(TestUtils.isCompositeComponent(step1Comp)).toBeTruthy();

    });
});

这样，当 Step1Comp 被加载时，它的依赖已经被模拟了，所以它不会尝试加载 RequireJS 模块。

【讨论】：

感谢您的回复。我按照您的建议做了同样的事情，仍然是同样的错误，请参阅我的更新评论。谢谢

【解决方案2】：

我可以看到更新，但我注意到你在嘲笑定义。依赖权需要定义吗？如果是，那么您需要模拟依赖项而不是定义。

这是我正在谈论的示例：

const define = require('amdefine')

那么你需要模拟依赖而不是定义

jest.mock('amdefine', () => {})

希望你能理解。

【讨论】：