How to use normalize method in Jest

The reason is mockCall still returns Promise, even after you mocked timer. So call().then() will be executed as next microtask. To advance execution you can wrap your expect in microtask too:

it("advances mock timers correctly", () => {
  jest.useFakeTimers();
  new Caller(mockCall, callReceiver);
  jest.advanceTimersByTime(50);
  return Promise.resolve().then(() => {
    expect(callReceiver).toHaveBeenCalled()
  });
});

Beware of returning this Promise so jest would wait until it's done. To me using async/await it would look even better:

it("advances mock timers correctly", async () => {
   jest.useFakeTimers();
   new Caller(mockCall, callReceiver);
   jest.advanceTimersByTime(50);
   await Promise.resolve();
   expect(callReceiver).toHaveBeenCalled();
});

Btw the same thing each time you mock something that is returning Promise(e.g. fetch) - you will need to advance microtasks queue as well as you do with fake timers.

More on microtasks/macrotasks queue: https://abc.danch.me/microtasks-macrotasks-more-on-the-event-loop-881557d7af6f

Jest repo has open proposal on handling pending Promises in more clear way https://github.com/facebook/jest/issues/2157 but no ETA so far.

That is a bug that came with node v11.11. You can downgrade to v11.10 or wait for the fix which facebook has already pushed (jest error in Node version over 11.11).

If your problem is TravisCI related then you can set a fixed version which works:

node_js:
  - "11.10.1"

UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:

$ npx create-react-app my-app --typescript

For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

and then you can simply rename .js to .ts files.

---

I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.

1. Create a temporary react project with typescript by running the command create-react-app --scripts-version=react-scripts-ts (Note - requires create-react-app to be installed globally)
2. In your own project - under package.json file remove the react-scripts
3. Add react-scripts-ts to your project by running the command yarn add react-scripts-ts or if your are using npm then npm install react-scripts-ts. Or, add "react-scripts-ts": "2.8.0" to package.json.
4. From the project you created in step 1 copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
5. Under your own project, in package.json, under scripts section, change react-scripts instances to react-scripts-ts (should be under start, build, test and eject
6. Install the typings for react by installing the following modules using yarn or npm: @types/node, @types/react and @types/react-dom. Put in devDependencies section if using package.json.
7. Change index.js file name to index.tsx
8. In your tsconfig.json file add the following configuration: "allowSyntheticDefaultImports": true - for more info

NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).

Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files. What we need to do is to change the project configuration. The way I found doing it without running eject is using react-app-rewired package. This package lets you configure external configuration which will be added/override the default project settings. What we'll do is using babel to load these type of files. Let's moved on:

1. Install the package react-app-rewired using yarn or npm

2. In your root folder (where package.json is located) create a new file with the name config-overrides.js

3. Put this code in config-overrides file:

   var paths = require('react-scripts-ts/config/paths')
   
   module.exports = function override(config) {
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       include: paths.appSrc,
       loader: require.resolve('babel-loader'),
       options: {
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
           cacheDirectory: true,
       },
     })
   
     return config
   }
   

Edit package.json so the start/start-js, build, test, and eject scripts use react-app-rewired as shown in the project readme. E.g. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".

Now you can start you the project and the problem should be solved. You might need additional modifications depending on your project (additional types and so).

Hope it helps

As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without react-app-rewired. Thanks for mention this!

To assert a function to throw an error, you have to pass a function to the expect statement. In your case:

test('...', () => {
  expect(() => {
    render(<Component />);
  }).toThrowError();
});

If you want to check that console.log received the right parameter (the one that you passed in) you should check mock of your jest.fn().
You also have to invoke your log function, otherwise console.log is never invoked:

it('console.log the text "hello"', () => {
  console.log = jest.fn();
  log('hello');
  // The first argument of the first call to the function was 'hello'
  expect(console.log.mock.calls[0][0]).toBe('hello');
});

or

it('console.log the text "hello"', () => {
  console.log = jest.fn();
  log('hello');
  // The first argument of the first call to the function was 'hello'
  expect(console.log).toHaveBeenCalledWith('hello');
});

If you're going with this approach don't forget to restore the original value of console.log.

Another option is to use jest.spyOn (instead of replacing the console.log it will create a proxy to it):

it('console.log the text "hello"', () => {
  const logSpy = jest.spyOn(console, 'log');

  console.log('hello');

  expect(logSpy).toHaveBeenCalledWith('hello');
});

Read more here.

es6 imports are "hoisted", meaning wherever you write them in the code, they'll get processed before the importing module is executed, so the imported module is always executed before the importing module. In your case, this means foo.js executes before foo.test.js, so even if you properly mock your property of window in your tests, foo.js will not see your mock.

You can get around this by using require in your tests to import foo.js after the property of window has been mocked.

// foo.test.js
window.myValue = { nestedValue: MOCK_NESTED_VALUE };

const { dependency } = require('./foo');

describe('...', () => {
  it('...', () => {
    // use dependency
  })
})

As other answers have pointed out, if myValue is one of existing "sytem" properties of window such as window.location, you might have to delete it first. When deleting, don't forget to back it up so that you can restore it when cleaning up after your test.

From this docs: https://airbnb.io/enzyme/docs/api/ShallowWrapper/instance.html

NOTE: can only be called on a wrapper instance that is also the root instance. With React 16 and above, instance() returns null for stateless functional components.

Test component behavior, not implementation details.

E.g.

index.jsx:

import React, { useState } from 'react';

const Counter = () => {
  const [counter, setCounter] = useState(0);
  const incCounter = () => {
    setCounter(counter + 1);
  };
  return (
    <>
      <p>Counter value is: {counter}</p>
      <button className="increment" onClick={incCounter}>
        Up
      </button>
    </>
  );
};
export default Counter;

index.spec.jsx:

import React from 'react';
import Counter from './';
import { shallow } from 'enzyme';

describe('Counter', () => {
  let counter;
  beforeEach(() => {
    counter = shallow(<Counter />);
  });

  it('calls incCounter function when button is clicked', () => {
    expect(counter.find('p').text()).toBe('Counter value is: 0');
    const incButton = counter.find('button');
    incButton.simulate('click');
    expect(counter.find('p').text()).toBe('Counter value is: 1');
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/59475724/index.spec.jsx (10.045s)
  Counter
    ✓ calls incCounter function when button is clicked (17ms)

-----------|----------|----------|----------|----------|-------------------|
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:       1 passed, 1 total
Snapshots:   0 total
Time:        11.697s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59475724

Version Info

As is noted in the question, property matchers were introduced in Jest 23.0.0. Note that apps bootstrapped with create-react-app as of today (Aug 5, 2018) are still < 23.

OBJECT

Here is an example using a property matcher for a single object:

test('sportsBallPerson', () => {
  expect(sportsBallPeople[0]).toMatchSnapshot({
    createdAt: expect.any(Date)
  })
});

The snapshot generated:

exports[`sportsBallPerson 1`] = `
Object {
  "createdAt": Any<Date>,
  "name": "That one famous guy from Cleveland",
}
`;

This will correctly match createdAt to any date and the name to exactly "That one famous guy from Cleveland".

ARRAY

To test an array of objects using property matchers use forEach to loop over the array and snapshot test each object individually:

test('sportsBallPeople', () => {
  sportsBallPeople.forEach((sportsBallPerson) => {
    expect(sportsBallPerson).toMatchSnapshot({
      createdAt: expect.any(Date)
    });
  });
});

The snapshots generated:

exports[`sportsBallPeople 1`] = `
Object {
  "createdAt": Any<Date>,
  "name": "That one famous guy from Cleveland",
}
`;

exports[`sportsBallPeople 2`] = `
Object {
  "createdAt": Any<Date>,
  "name": "That tall guy",
}
`;

forEach ensures that the objects are tested in order, and each object is properly snapshot tested as described above.

Additional Info

It is interesting to note that directly testing an array using property matchers does not work properly and has unexpected side-effects.

My first attempt to test an array was to create the following test:

test('sportsBallPeople as array', () => {
  expect(sportsBallPeople).toMatchSnapshot([
    { createdAt: expect.any(Date) },
    { createdAt: expect.any(Date) }
  ]);
});

It generated the following snapshot:

exports[`sportsBallPeople as array 1`] = `
Array [
  Object {
    "createdAt": Any<Date>,
  },
  Object {
    "createdAt": Any<Date>,
  },
]
`;

This is incorrect since the name properties are missing, but the test still passes (Jest v23.4.2). The test passes even if the names are changed and additional properties are added.

Even more interesting was that as soon as this test executed, any following tests using property matchers were adversely affected. For example, placing this test ahead of the the test looping over the objects changed those snapshots to the following:

exports[`sportsBallPeople 1`] = `
Object {
  "createdAt": Any<Date>,
}
`;

exports[`sportsBallPeople 2`] = `
Object {
  "createdAt": Any<Date>,
}
`;

In summary, directly passing an array to use with property matchers does not work and can negatively affect other snapshot tests using property matchers.

A spec file runs in isoloation to other specs unless included explicitly by the developer.

The exception here, is, it is possible to set up globals to run.

Treat each test within a spec as it's own application effectively.

They should not interact with each other. But if you import a file, that imports another file (and so on) all those files will be involved in the test and can affect the outcome (depending on what those file do/behave, but thats why we have tests - to find out).