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

Question

我们现在正在backbone/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中，以便该组件可以与其他组件一起加载。

我尝试在测试中添加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();
    });
});

但是当我运行 jest 时，仍然出现同样的错误:

> 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

Answer 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 模块。