Jest 27 Update and error fixes:

Couple of days ago I updated the version of Node in our organisation’s react app repo and i had to update the version of jest from 25 to jest 27 and all the hell break loose around 90% of the tests failed it was a night mare so I decided to share with you how i fixed it.

1st Error: ReferenceError: window is not defined

ReferenceError: window is not defined

1st Fix: To fix that error you need to add the below code in your jest config file Or if you keep the jest config in your package.json file you can add it there as well.

 "globals": {
      "window": {}
    }

2nd Error:

 ReferenceError: document is not defined

1st option Fix for 2nd error: To fix above error you two options. option 1 is to add the below line on top of test file where test is failing, its just a comment but it fixes the error trust me. problem is if you have ten test files failing you would need to add it ten times.

/**
 * @jest-environment jsdom 
 */

2nd option fix for 2nd error: To fix the same error is to add the below in your jest config you add it once and it will work for all the tests that failed due to same error but it might cause some other errors in my case i choose the option 1 and add it on top of all failing files.

testEnvironment: 'jsdom'

3 Eror: TypeError: tabbable.tabbable is not a function

Your focus-trap must have at least one container with at least one tabbable node in it at all times

TypeError: tabbable.tabbable is not a function

3rd Fix:

You need to create tabbanle.js file inside your __mocks__ folder, now if you do not have the folder in you IDE look for __test__ folder in my repository I added the folder in the src/server/models/__mocks__/tabbable.js

And add the below code in that file.

// __mocks__/tabbable.js

const lib = jest.requireActual('tabbable');

const tabbable = {
   ...lib,
   tabbable: (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
   focusable: (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
   isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
   isTabbable: (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
};

module.exports = tabbable;

just save the file and run your tests again and the error would have magically disappeared.

4th Error: TypeError: require(…) is not a function

TypeError: require(...) is not a function 

I was getting this error in all of the mocks that i added with the require and below is how I fixed it.

BEFORE:
const inlineReferenceHelpers = require.requireMock(
    '../../server/models/helpers/inlineReferenceHelpers',
);


AFTER:
import inlineReferenceHelpers from '../../server/models/helpers/inlineReferenceHelpers';

One other error that I saw regarding the dotenv requre is below:

Error: 

TypeError: Cannot read property 'exports' of undefined
require('dotenv').config();


Fix: 
import {} from 'dotenv/config';

There you have it, I hope it help you.