How to use loadBabelConfig method in Jest

Your order of requires are wrong. When you require ./foo before setting up your mock reference then foos reference will be undefined as per Jest automocking.

jest.dontMock('./foo');                                                                                                                                                                                                                

describe('describe', function() {                                                                                                                                                                                                          
    it('should ', function () {                                                                                                                                                                                                            
        var reference = require('./reference');                                                                                                                                                                                               
        reference.result.mockImplementation(function (a, b, c) {
            return '123';
        });                                                                                                                                                                                               
        var foo = require('./foo');                                                                                                                                                                                                        

       console.log('ferr', foo.getResult());  // ferr 123                                                                                                                                                                                                
    });                                                                                                                                                                                                                                      
}); 

To specify different config files you can use the --config option.

For example if you have a tests/jest.config.js file configuration for your component tests and a jest.config.js file for your unit tests, you can configure the scripts in your package.json so that they look something like this:

"scripts": {
    "tests:unit": "jest --config=jest.config.js",
    "tests:component": "jest --config=tests/jest.config.js"
}

Jest is installed, but is likely in your ./node_modules/.bin directory. You can append that to your command ./node_modules/.bin/jest --updateSnapshot. Since you already have jest as a scripts command in your package.json you can also run it with npm test -- --updateSnapshot. npm automatically adds ./node_modules/.bin to your path.

update: Newer versions of yarn will resolve node module bin scripts, so you can also just run yarn jest {cmd} and it should work.

Use Full Rendering API, mount(...)

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs, or may require the full lifecycle in order to fully test the component (i.e., componentDidMount etc.)

You can use mount() instead of shallow() like

import React from 'react';
import { mount, /* shallow */ } from 'enzyme';
import Timer from './index';

describe('Timer', () => {
    it('should decrement timer ', () => {
        jest.useFakeTimers();

        const wrapper = mount(<Timer i={10} />);
        expect(wrapper.text()).toBe("10");
        jest.runOnlyPendingTimers();
        expect(wrapper.text()).toBe("9");

        jest.useRealTimers();
    });
});

Or you can pass additional object to shallow to instrument it to run lifecycle methods

• see ShallowWrapper.js sourcode
• see shallow() docs

options.disableLifecycleMethods: (Boolean [optional]): If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after setProps and setContext.

const options = {
  lifecycleExperimental: true,
  disableLifecycleMethods: false 
};

const wrapper = shallow(<Timer i={10} />, options);

I tested it. It works.

hinok:~/workspace $ npm test

> c9@0.0.0 test /home/ubuntu/workspace
> jest

 PASS  ./index.spec.js (7.302s)
  Timer
    ✓ should decrement timer  (28ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.162s
Ran all test suites.

You need to change the value of DEBUG_PRINT_LIMIT env variable (default is 7000).

For example, run your tests with: DEBUG_PRINT_LIMIT=10000 yarn test

Source: https://github.com/testing-library/dom-testing-library/blob/master/src/pretty-dom.js#L33

This would appear to be as simple as setting up URL on the Global in Jest. Something like

describe('download', () => {
  const documentIntial = { content: 'aaa' };
  global.URL.createObjectURL = jest.fn();
  it('msSaveOrOpenBlob should not have been called when navigao is undefined', () => {
    global.URL.createObjectURL = jest.fn(() => 'details');
window.navigator.msSaveOrOpenBlob = jest.fn(() => 'details');
download(documentIntial);
expect(window.navigator.msSaveOrOpenBlob).toHaveBeenCalledTimes(1);
  });
});

This should result in a test that you can also use for checking if global.URL.createObjectURL was called. As a side note: you may also run into a similar issue with window.open I would suggest mocking that as well if this becomes the case.

Presets are just plain Javascript objects, so in many circumstances you may simply merge them. For example, that's how I'm enabling ts-jest and jest-puppeteer simultaneously:

const merge = require('merge')
const ts_preset = require('ts-jest/jest-preset')
const puppeteer_preset = require('jest-puppeteer/jest-preset')

module.exports = merge.recursive(ts_preset, puppeteer_preset, {
    globals: {
        test_url: `http://${process.env.HOST || '127.0.0.1'}:${process.env.PORT || 3000}`,
    },
})

If there are certain options that can't be 'merged' like that, just handle these cases manually.

You can use toBe matcher to check whether result of typeof operator is function, please see example:

describe("", () => {
  it("test", () => {
    const somethingThatReturnsAFunction = () => () => {};
    const theResult = somethingThatReturnsAFunction();
    expect(typeof theResult).toBe("function");
  });
});

Your app was made with create-react-app. Here are the docs for adding / referencing environment variables: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

Create a file in the root folder called .env with the contents:

REACT_APP_XREFS_BACK_URL=put_whatever_here

Then access this variable in your JavaScript via:

process.env.REACT_APP_XREFS_BACK_URL