Using react jest to test component created in requireJS, throwing error: ReferenceError: define is not defined

Question

We are now creating component with reactJS inside backbone/requireJS project, below is a simple component I created:

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

And this is the test:

'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();

    });
});

when we are running jest, I got this error:

Test suite failed to run
ReferenceError: define is not defined

The component has to be within define, as the main project is written in requireJS, and we have to wrap it in define so that this comp can be loaded with other component.

I have tried to add window['define']={} in the test to mock the define function, but it is useless.

Can anyone help me to resolve this issue?

Thanks in advance.

Update now as below:

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();
    });
});

But when I run jest, still same error:

> [email protected] 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

RequireJS is not supported by Jest. it will be easier and most appropriate to mock the dependency at the top of 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();

    });
});

This way, when Step1Comp is loaded, its dependency is already mocked, so it won't try to load the RequireJS module.