How to use mockInvariant method in Jest

As of Jest 26 this can be achieved using "modern" fake timers without needing to install any 3rd party modules: https://jestjs.io/blog/2020/05/05/jest-26#new-fake-timers

jest
  .useFakeTimers()
  .setSystemTime(new Date('2020-01-01'));

If you want the fake timers to be active for all tests, you can set timers: 'modern' in your configuration: https://jestjs.io/docs/configuration#timers-string

EDIT: As of Jest 27 modern fake timers is the default, so you can drop the argument to useFakeTimers.

Reset the modules and require them again for each test:

describe("initializes script", () => {
    afterEach(() => {
        jest.resetModules() 
    });    

    beforeEach(() => {
        jest.mock("fs");
    })

    test("it checks for a package.json in current directory", () => {
        const init = require("../init");
        init();
    });

    test("it stops script if there's a package.json in dir", () => {
        const init = require("../init");
        init();
    });
}

Here is the unit test solution:

index.jsx:

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { sticky: false };
  }

  handleWindowScroll() {
    const header = document.querySelector('.productNavLinksContainer');
    const dataHeader = document.querySelector('.productNavDataContainer');
    if (header && dataHeader) {
      const headerPos = header.getBoundingClientRect();
      const dataHeaderPos = dataHeader.getBoundingClientRect();
      const sticky = header.offsetTop;
      if (dataHeaderPos.top > headerPos.height) {
        this.setState({ sticky: false });
      } else if (window.pageYOffset > sticky) {
        this.setState({ sticky: true });
      }
    } else {
      return;
    }
  }
  render() {
    return null;
  }
}

export default SomeComponent;

index.test.jsx:

import SomeComponent from '.';
import { shallow } from 'enzyme';
import React from 'react';

describe('60784579', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  it('should not sticky', () => {
    const mDataHeaderPos = { top: 100 };
    const mHeaderPos = { height: 50 };
    const mHeader = { offsetTop: 100, getBoundingClientRect: jest.fn().mockReturnValueOnce(mHeaderPos) };
    const mDataHeader = { getBoundingClientRect: jest.fn().mockReturnValueOnce(mDataHeaderPos) };
    jest.spyOn(document, 'querySelector').mockImplementation((selector) => {
      switch (selector) {
        case '.productNavLinksContainer':
          return mHeader;
        case '.productNavDataContainer':
          return mDataHeader;
      }
    });
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const instance = wrapper.instance();
    instance.handleWindowScroll();
    expect(document.querySelector).toBeCalledTimes(2);
    expect(mHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(mDataHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(instance.state).toEqual({ sticky: false });
  });

  it('should sticky if pageYOffset greater than offsetTop', () => {
    const mDataHeaderPos = { top: 40 };
    const mHeaderPos = { height: 50 };
    const mHeader = { offsetTop: 100, getBoundingClientRect: jest.fn().mockReturnValueOnce(mHeaderPos) };
    const mDataHeader = { getBoundingClientRect: jest.fn().mockReturnValueOnce(mDataHeaderPos) };
    jest.spyOn(document, 'querySelector').mockImplementation((selector) => {
      switch (selector) {
        case '.productNavLinksContainer':
          return mHeader;
        case '.productNavDataContainer':
          return mDataHeader;
      }
    });
    Object.defineProperty(window, 'pageYOffset', { value: 200 });
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const instance = wrapper.instance();
    instance.handleWindowScroll();
    expect(document.querySelector).toBeCalledTimes(2);
    expect(mHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(mDataHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(instance.state).toEqual({ sticky: true });
  });

  it('should do nothing if header or dataHeader does not exist', () => {
    jest.spyOn(document, 'querySelector').mockImplementation((selector) => {
      switch (selector) {
        case '.productNavLinksContainer':
          return undefined;
        case '.productNavDataContainer':
          return undefined;
      }
    });
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const instance = wrapper.instance();
    const actual = instance.handleWindowScroll();
    expect(actual).toBeUndefined();
    expect(document.querySelector).toBeCalledTimes(2);
    expect(instance.state).toEqual({ sticky: false });
  });
  it('should do nothing if pageYOffset less than offsetTop', () => {
    const mDataHeaderPos = { top: 40 };
    const mHeaderPos = { height: 50 };
    const mHeader = { offsetTop: 100, getBoundingClientRect: jest.fn().mockReturnValueOnce(mHeaderPos) };
    const mDataHeader = { getBoundingClientRect: jest.fn().mockReturnValueOnce(mDataHeaderPos) };
    jest.spyOn(document, 'querySelector').mockImplementation((selector) => {
      switch (selector) {
        case '.productNavLinksContainer':
          return mHeader;
        case '.productNavDataContainer':
          return mDataHeader;
      }
    });
    Object.defineProperty(window, 'pageYOffset', { value: 80 });
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const instance = wrapper.instance();
    const actual = instance.handleWindowScroll();
    expect(actual).toBeUndefined();
    expect(document.querySelector).toBeCalledTimes(2);
    expect(mHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(mDataHeader.getBoundingClientRect).toBeCalledTimes(1);
    expect(instance.state).toEqual({ sticky: false });
  });
});

unit test results with 100% coverage:

 PASS  stackoverflow/60784579/index.test.jsx (7.912s)
  60784579
    ✓ should not sticky (9ms)
    ✓ should sticky if pageYOffset greater than offsetTop (2ms)
    ✓ should do nothing if header or dataHeader does not exist (2ms)
    ✓ should do nothing if pageYOffset less than offsetTop (1ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.jsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        9.223s

source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60784579

If you look at React without JSX, you'll see that the XML-inspired syntax (<MockComponent />) is just short for React.createElement('MockComponent').

Right now, if you renamed mockComponent to MockComponent and tried using the angle bracket syntax, the first issue is that your function receives two arguments. React components are either class components that take one constructor argument (props) or functional components that take one argument (again, props). The second issue is that your function returns a React functional component, when it needs to return a rendered React element.

One way to fix this issue is to convert mockComponent into a React functional component and make module and propOverride props of the FC.

// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
export function MockComponent(props) {
  const { moduleName, propOverrideFn, ...customComponentProps } = props;

  const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
  const CustomizedComponent = (props: Record<string, any>) => {
    return React.createElement(
      'CustomizedComponent',
      {
        ...props,
        ...propOverrideFn(props),
      },
      props.children
    )
  }
  CustomizedComponent.propTypes = RealComponent.propTypes

  return <CustomizedComponent {...customComponentProps} />
}

The differences are subtle but important. Here I modified MockComponent to take in a singular prop argument to be compatible with React.createElement(). This leads to the issue of how to differentiate props that are meant for the CustomizedComponent and what used to be arguments for mockComponent(). Here, I use the JavaScript destructuring and spread operators to separate module and propOverride from the props intended from CustomizedComponent.

Lastly, I use the JSX spread syntax to pass the arbitrary props intended for CustomizedComponent into CustomizedComponent, and I use angle brackets to render it (instead of returning a function).

I'll leave as an exercise for you to come up with the appropriate TypeScript definition for MockComponent's props. You can simply define it as the union of Record<string, any> and module and propOverride. However, you can get fancy and use a template definition so MockComponent<Toolbar> is a union of module and propOverride and Toolbar's props.

Oh, and I almost forgot. Your Jest call would look like

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
    (props) => {
        return <MockComponent 
            module='TouchableOpacity' 
            onPress={props => props.disabled ? () => {} : props.onPress}
            {...props}
        />
   }
})

The ref is attached to an instance of the component hence you will have to use mount to get an instance of the component.

To test for the ref, add the following line

expect(wrapper.instance().refInput).toBeTruthy();

Final result:

render() {
  return (<Input
    id='foo'
    ref={input => { this.refInput = input }}
  />)
}

it('should render Input', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find(Input)).toHaveLength(1)
  expect(wrapper.instance().refInput).toBeTruthy();
})

It should be possible to assert the existence of a component, as long as WrappedComponent in tests is not original component class but a component wrapped in HOC, i.e. HOC(WrappedComponent).

If HOC(WrappedComponent) is default export, it should be:

import WrappedComponent from 'WrappedComponent'

...

const wrapper = shallow(<RootComponent {...props}/>);
expect(wrapper.find(WrappedComponent).length).toBe(1);

Just ran into the same problem. If you look at your stack trace closely you'll notice that you run two different Jest setups:

Globally installed jest:

...(/Users/DavidHu/.nvm/versions/node/v6.2.1/lib/node_modules/jest-cli/bin/jest.js:16:25)

Jest from the project:

...(/Users/DavidHu/Desktop/coding/projects/swapnow/node_modules/jest-cli/build/cli/runCLI.js:172:28)

They are probably have different (and incompatible) versions. If you remove jest from your project (or from global node_modules) that should solve the problem.

I got this warning as a result of package.json existing in my root directory and in my build directory. I was able to get rid of it by specifying that I only want Jest to look for tests in src by adding the following to my package.json:

  "jest": {
    "roots": ["src"]
  }

Look at your link very carefully:

collectCoverageFrom: {
  description: wrap(
    'relative to <rootDir> glob pattern matching the files that coverage ' +
      'info needs to be collected from.'
      ...

You can't use <rootDir>. Try:

collectCoverageFrom: [
    "**/app_modules/**",
    "**/src/**"
],