backbone.js 使用react jest测试requireJS中创建的组件,抛出错误:参考错误:定义未定义

w8rqjzmb  于 2022-11-10  发布在  React
关注(0)|答案(2)|浏览(129)

我们现在正在用reactJS在backbone/requireJS项目中创建组件,下面是我创建的一个简单组件:

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编写的,我们必须将其 Package 在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
a2mppw5e

a2mppw5e1#

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

8wigbo56

8wigbo562#

我可以看到更新,但我注意到你在模仿define。define是依赖项所必需的吗?如果是,那么你需要模仿依赖项,而不是define。
下面是我所说的例子:

const define = require('amdefine')

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

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

我希望你能理解。

相关问题