How to use createDefaultSnapshotResolver method in Jest

You might already know but Supertest is designed to shutdown the server after calling .end() in a test. As proof you can see the declaration for this functionality in the supertest lib code.

An alternative to calling end() is to force shutdown of both the database connection and the server in the jest afterEach() or afterAll() jest teardown hooks:

afterAll(() => {
  mongoose.connection.close();
  server.close();
});

I haven't tested this, but you might be able to achieve what you're after with the Aggregating/re-exporting modules syntax and overwriting your loadResources() function.

To do this, import your actual module into ./ducks/stubs/students.js, export all from that module, then define/overwrite loadResources() and export it as well. You can then use the NormalModuleReplacementPlugin as normal and pass in your stub file as the newResource that will contain all of your actual module reducers/actions that you wanted to keep with the thunk overwritten and stubbed out:

//ducks.stubs.students.js

export * from './ducks/students.js';

//override students.loadResources() with our stub
//order matters as the override must come after 
//the export statement above
export const loadResources() = //some stubbed behavior;

//webpack.config.js

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /ducks\.students\.js/,
      './ducks.stubs.students.js'
    )
  ]
}

A couple of notes/caveats/gotchas with this solution:

1. You might have to update your exports to use let vs. const (not a big deal)
2. Per this issue, the export * from expression isn't supposed to handle default exports. As such, you might have to add export { default } from './ducks/students.js';. Of course, keep in mind that you won't be able to export a default function native to your stubs file (unless you're overriding the original default function with a stub of course).

I changed:

"unit": "jest --config test/unit/jest.conf.js --coverage"

to

"unit": "jest"

I don't know why that fixes anything, but im happy it does (please comment why this has fixed it)

The timeout you specify here needs to be shorter than the default timeout.

The default timeout is 5000 and the framework by default is jasmine in case of jest. You can specify the timeout inside the test by adding

jest.setTimeout(30000);

But this would be specific to the test. Or you can set up the configuration file for the framework.

Configuring Jest

// jest.config.js
module.exports = {
  // setupTestFrameworkScriptFile has been deprecated in
  // favor of setupFilesAfterEnv in jest 24
  setupFilesAfterEnv: ['./jest.setup.js']
}

// jest.setup.js
jest.setTimeout(30000)

See also these threads:

setTimeout per test #5055

Make jasmine.DEFAULT_TIMEOUT_INTERVAL configurable #652

P.S.: The misspelling setupFilesAfterEnv (i.e. setupFileAfterEnv) will also throw the same error.

This is a known bug: https://github.com/facebook/jest/issues/11640

Downgrading to @types/node v15.14.0 seems to work around the bug for me.

The 768 and 1024 is a default, Jest is configuring jsdom for your test with.

You can overwrite window.innerHeight in your test. But TypeScript says no, because window is an unwritable member.

For me Object.defineProperty works as expected with TypeScript.

So with JEST this test should pass green:

describe('test window height', () => {
  it('test the height',
    () => {
      Object.defineProperty(window, 'innerHeight', {
        writable: true,
        configurable: true,
        value: 150,
      });

      window.dispatchEvent(new Event('resize'));

      expect(window.innerHeight).toBe(150);
    });
});

Example of use of Object.defineProperty with TS found here: How to test that a media query css applies to an element upon screen resize using jest and enzyme in reactjs

Looking at your code, you can achieve it with only two replace calls:

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
}

camelize("EquipmentClass name");
camelize("Equipment className");
camelize("equipment class name");
camelize("Equipment Class Name");
// all output "equipmentClassName"

Edit: Or in with a single replace call, capturing the white spaces also in the RegExp.

function camelize(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

I was able to get state by doing this:

<Link
  to={"/posts"}
  state={{test: 'test'}}>
    Posts
</Link>

I opened the type declaration and finally realized state was a prop, and not part of the to object https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md#link

As mentioned by @RiZKiT in the comment below, since Jest v27.0 the default test environment has changed from "jsdom" to "node".

Your problem relies on the configuration.

In the moment you set:

"testEnvironment": "jest-environment-node"

You are changing the default configuration from Jest which is browser-like to jest-environment-node (Node.js-like) meaning that your test will be run under a Node.js environment

To solve it either you set your testEnvironment to jsdom Or you remove the testEnvironment from your configuration, so it will take the default value in yourpackage.json:

 ...
  "jest": {
    "verbose": true,
    "collectCoverageFrom": [
      "src/js/helpers/preparePayload.js",
      "src/js/components-ni",
      "!**/node_modules/**",
      "!**/dist/**"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 50,
        "branches": 50,
        "functions": 50,
        "lines": 75
      }
    }
  }

This is what they say in the documentation

testEnvironment [string] # Default: "jsdom"

The test environment that will be used for testing. The default environment in Jest is a browser-like environment through jsdom. If you are building a node service, you can use the node option to use a node-like environment instead.

As I could see, your tests are meant to be run under a browser-like environment.

If you ever need an explicit Node.js environment, better you isolate that case using @jest-environment:

/**
 * @jest-environment node
 */

test('use node in this test file', () => {
  expect(true).not.toBeNull();
});

Or the other way around, if you are meant to run the tests under a Node.js environment:

/**
 * @jest-environment jsdom
 */

test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

With this you can avoid importing jsdom manually and setting global variables. jsdom will mock the DOM implementation automatically.

If you need to change the environment for your tests, use the notation @jest-environment.