I just updated react-scripts to 4.0 which includes Jest@26 and some acpanying test packages here's the package.json diff:
After upgrading, some Jest mocks have begun to fail. It seems like the mocked return value is just undefined? Am I missing something? Here's one of the failing mocks
import useFetch from "use-http";
jest.mock("use-http", () => ({
__esModule: true,
default: jest.fn()
}));
describe("the user context", () => {
beforeAll(() => {
useFetch.mockReturnValue({
get: async () => Promise.resolve({ foo: 666 }),
response: { ok: true }
});
});
Tests that try to utilize the 'get' method fail with:
TypeError: Cannot destructure property 'get' of '(0 , _useHttp.default)(...)' as it is undefined.
And another that isn't default, doesn't import the package for one-time mocks:
jest.mock("_hooks", () => ({
useBaseUrls: jest.fn().mockReturnValue({
app: "bar"
})
}));
Tests that access the 'app' property throw TypeError: Cannot read property 'app' of undefined
I just updated react-scripts to 4.0 which includes Jest@26 and some acpanying test packages here's the package.json diff:
After upgrading, some Jest mocks have begun to fail. It seems like the mocked return value is just undefined? Am I missing something? Here's one of the failing mocks
import useFetch from "use-http";
jest.mock("use-http", () => ({
__esModule: true,
default: jest.fn()
}));
describe("the user context", () => {
beforeAll(() => {
useFetch.mockReturnValue({
get: async () => Promise.resolve({ foo: 666 }),
response: { ok: true }
});
});
Tests that try to utilize the 'get' method fail with:
TypeError: Cannot destructure property 'get' of '(0 , _useHttp.default)(...)' as it is undefined.
And another that isn't default, doesn't import the package for one-time mocks:
jest.mock("_hooks", () => ({
useBaseUrls: jest.fn().mockReturnValue({
app: "bar"
})
}));
Tests that access the 'app' property throw TypeError: Cannot read property 'app' of undefined
-
It seems like the mocked return value is just undefined? Am I missing something? - yes, it's undefined, because
jest.fn()doesn't return anything. It's not workable regardless of Jest 26, did you try to fix this? Tests that access the 'app' property throw - please, provide stackoverflow./help/mcve that can reproduce the problem. – Estus Flask Commented Dec 19, 2020 at 8:40 -
These tests were functional prior to upgrading -- for the first example note the mocked return value of
jest.fn()before each test. For the second, a return value is defined explicitly inline. Neither test expectsjest.fn()to return anything, just to enable mocking. – eej Commented Dec 23, 2020 at 17:00 - Double check that you don't have resetMocks config option or jest.resetAllMocks anywhere, initial mocks are naturally inpatible with them. – Estus Flask Commented Dec 24, 2020 at 7:42
1 Answer
Reset to default 20Jest 26 changed the default behavior of resetMocks to true, which resets mock state before each test.
You can revert to the prior behavior by disabling resetMocks in package.json
"jest": {
"resetMocks": false
}
A discussion to change the default back again is currently an open issue on their Github: https://github./facebook/create-react-app/issues/9935