How to use returnArguments method in Jest

It looks like expect.anything doesn't match unset values by design. If you need a "really anything" matcher, here's one:

export const expectAnythingOrNothing = expect.toBeOneOf([expect.anything(), undefined, null]);

You'll need jest-extended for the toBeOneOf matcher -- but it's a useful package anyway :)

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.

jest sets an environment variable called JEST_WORKER_ID so you check if this is set:

function areWeTestingWithJest() {
    return process.env.JEST_WORKER_ID !== undefined;
}

I also see that if NODE_ENV is not set the jest CLI sets it to the value 'test'. This might be another way to check.

I found this library that a colleague of mine wrote recently: jest-when

import { when } from 'jest-when';

const fn = jest.fn();
when(fn).calledWith(1).mockReturnValue('yay!');

const result = fn(1);
expect(result).toEqual('yay!');

Here's the library: https://github.com/timkindberg/jest-when

You can create a jest config file jest.config.js and put the following entry into it:

module.exports = {
  ...
  setupFiles: ['<rootDir>/test/setup.js'],
  ...
};

And then in your setup.js file, you can do something like this:

process.on('unhandledRejection', (err) => {
  fail(err);
});

And unhandledRejection will fail a test, though there are two caveates to be aware of:

1. Unhandled rejections from promises that reject when there is no test running will end the process. This is probably what you want and expect.
2. Unhandled rejections from promises that reject when a new test is running (not the one that initiated the promise) will fail the new test, not the original test. This is confusing and can make for difficult to track bugs.

As a commenter mentioned above, if your tests are well written, then you should never hit this scenario, but you don't always have that much control.

A working solution nowadays would be to use userEvent.tab() instead of fireEvent.keyDown().

import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'

import { render, screen } from '@testing-library/react'
import Component from './buttons'

it('changes focus on tab', async () => {
  render(<Component />)
  const one = screen.getByTestId('one')
  const two = screen.getByTestId('two')

  one.focus()
  expect(one).toHaveFocus()

  await userEvent.tab()
  expect(two).toHaveFocus()
})

you should refactor index.js and create app.js

app.js

const express = require("express");
const app = express();
app.get("/", (req, res) => res.send("Hello World!"));

index.js

const app = require('./app')
const port = process.env.PORT
app.listen(port, () => { console.log(`listening on ${port}) . })

the reason why we restructure the code like this is we need to access to express app() but we do not want "listen" to be called.

in your test file

const request = require("supertest");
const app = require("../src/app");

describe("/", () => {
  test("it says hello world", done => {
    request(app)
      .get("/")
      .expect(200)
      .end(function(err, res) {
        console.log("err", err);
      });
  });
});

With the code you submitted, you should not have the error you specified. In order to test without decorating your component with Redux, you want your test to import you App component like this:

import { App } from './App'

Which you already did! However, the output from your test looks like you did have it like this at some point:

import App from './App'

So check again, make sure you saved your test file, etc...

The problem is that Jest is hitting these CSS imports and trying to parse them as if they were JavaScript.

The "Unexpected token ." message probably comes because the first line of the file it is choking on is a CSS class declaration, i.e. .datepicker: { ... }.

Anyway, as pointed out in this answer, the way to get around this is to create a file containing a module which exports an empty object. I called mine styleMock.js.

module.exports = {};

Then, you need to create a jest.config.js file in your project root and add:

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
  }
};

The moduleNameMapper setting tells Jest how to interpret files with different extensions. In this case we simply need to point it at the empty file we just created. Obviously adjust the path to your file accordingly.

And note that you can expand the regex above for whichever file endings you need. Mine looks like:

moduleNameMapper: {
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    '<rootDir>/test/jest/__mocks__/fileMock.js',
  '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
},

where fileMock.js is identical to styleMock.js

Alternatively, you could use a module such as jest-transform-stub, which does the same thing for you.