jest

plaintext
node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand

then click Inspect on the target in chrome://inspect

Dump the current wrapper or results from find to console with .html()

https://airbnb.io/enzyme/docs/api/ShallowWrapper/html.html

Jest cutting off stack traces too early when tests fail? Make them longer with:

plaintext
Error.stackTraceLimit = 50;

shell
npm i -D jest-skipped-reporter
npm run test -- --reporters jest-skipped-reporter

Problem

Mocking a function that is called within the same module and asserting on the caller does not work - the original function will be called and not the mock.

myModule.ts

typescript
export const myFunction = () => {
  return "not mocked";
};

export const myCallingFunction = () => {
  return myFunction();
};

myModule.test.ts

typescript
import * as myModule from "./myModule";

beforeEach(() => {
  jest.spyOn(myModule, "myFunction").mockReturnValue("mocked");
});

it("should mock", () => {
  const result = myModule.myFunction();
  expect(result).toBe("mocked");
});
it("should mock caller", () => {
  const result = myModule.myCallingFunction();
  expect(result).toBe("mocked");
});

Fails with:

plaintext
 FAIL  src/myModule.test.ts
  ✓ should mock (3 ms)
  ✕ should mock caller (3 ms)

  ● should mock caller

    expect(received).toBe(expected) // Object.is equality

    Expected: "mocked"
    Received: "not mocked"

      11 | it("should mock caller", () => {
      12 |   const result = myModule.myCallingFunction();
    > 13 |   expect(result).toBe("mocked");
         |                  ^
      14 | });
      15 |

      at Object.<anonymous> (src/machines/myModule.test.ts:13:18)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total

Solution

To fix, import the module into itself and reference the import in the caller:

myModule.ts - fixed

typescript
import * as self from "./myModule";

export const myFunction = () => {
  return "not mocked";
};

export const myCallingFunction = () => {
  return self.myFunction();
};

Passes:

plaintext
 PASS  src/myModule.test.ts
  ✓ should mock (3 ms)
  ✓ should mock caller (1 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total

Other options include switching to class or splitting into separate files.

See facebook/jest#936, specifically the summary, and then using a self reference

Mock luxon’s time to be 2021-02-25 UTC:

javascript
Settings.now = () => new Date(Date.UTC(2021, 1, 25, 0, 0, 0)).valueOf();

myModule.js

js
export const myFunction = () => "hello";

myModule.test.js

js
import * as myModule from "./myModule";

jest.spyOn(myModule, "myFunction").mockImplementation(() => "goodbye");

If we have a module:

someModule.js

javascript
export const someFunction = () => {
  console.log("does something");
};

which is a dependency of another module under test:

moduleUnderTest.js

javascript
import { someFunction } from "./someModule";

export const underTest = () => {
  // ...
  someFunction();
  // ...
};

then, in our test, we can mock and inspect the dependency:

moduleUnderTest.test.js

javascript
import { underTest } from "./moduleUnderTest";
import { someFunction } from "./someModule"; // this bit was weird

jest.mock("./someModule");

describe("underTest", () => {
  it("called someFunction", () => {
    underTest();
    expect(someFunction).toHaveBeenCalled();
  });
});

Use hooks and mock them instead;

javascript
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: () => ({
    myRoute: 'some-route-value',
  }),
}));

Run in shell:

bash
npm i --save-dev jest \
    @types/jest \
    babel-jest \
    @babel/core \
    @babel/preset-env \
    @babel/preset-typescript

Save to babel.config.js:

js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
  ],
};

• Hacky workaround
• Nicer workaround