Using react-hooks-testing-library with jest.spyOn - spy is not called - jestjs

I am having an issue setting up a unit test to determine that a function is called with the correct arguments. useAHook returns function foo which calls function bar. The code looks like this
//myModule.js
export const useAHook = (arg1, arg2) => {
const foo = useCallback(() => {
bar(arg1, arg2);
}, [arg1, arg2]);
return foo;
}
export const bar = (a, b) => {
//does some stuff with a and b
}
I am trying to unit test this code using renderHook and jest.spyOn. I want to confirm that calling function foo results in bar being called with the correct arguments. My unit test looks like this
//myModule.spec.js
import * as myModule from './myModule.js'
it('should call foo with correct arguments', () => {
const spy = jest.spyOn(myModule, 'bar');
const { result } = renderHook(() => myModule.useAHook('blah', 1234));
const useAHookFunc = result.current;
useAHookFunc();
// fails, spy is not called
expect(spy).toBeCalledWith('blah', 1234);
});
The result is that the test fails saying that spy is never called. Am I doing something wrong here or using either tool incorrectly?

This line:
import * as myModule from './myModule.js'
...imports the module bindings for myModule.js into myModule.
Then this line:
const spy = jest.spyOn(myModule, 'bar');
...wraps the module export for bar in a spy...
...but the spy never gets called because useAHook doesn't call the module export for bar, it just calls bar directly.
If you modify useAHook to call the module export for bar then the spy will get called.
There are a couple of ways to do that.
You can move bar into its own module...
...or you can import the module bindings for myModule.js so you can call the module export for bar:
import { useCallback } from 'react';
import * as myModule from './myModule'; // <= import the module bindings
export const useAHook = (arg1, arg2) => {
const foo = useCallback(() => {
myModule.bar(arg1, arg2); // <= call the module export for bar
}, [arg1, arg2]);
return foo;
}
export const bar = (a, b) => {
//does some stuff with a and b
}

import * as myModule from './...'
const mockedFn = spyOn(myModule, "useSomething")

I managed to spy on the hook export method (using import * as), then inject a mock function into the implementation:
import * as useThingHook from 'useThing'
it('a test', () => {
const methodMock = jest.fn()
jest.spyOn(useThingHook, 'usething').mockImplementation(() => ({
method: methodMock
}))
act()
expect(methodMock).toHaveBeenCalled()
})

Related

How to spyOn an internal static function call?

I have the following event handler and I want to test that updateOrAddNew is being called.
const { Events } = require('client');
const User = require('../models/User');
module.exports = {
name: Events.MemberAdd,
async execute(member) {
User.updateOrAddNew(member);
}
}
I've written the following test:
import {it, expect, vi } from 'vitest';
import User from '../models/User';
import memberAdd from './memberAdd';
it('calls updateOrAddNew on memberAdd', async () => {
const spy = vi.spyOn(User, 'updateOrAddNew').mockReturnValue(true);
User.updateOrAddNew = spy;
const member = {...};
await memberAdd.execute(member);
expect(spy).toBeCalled();
});
I've tried numerous different syntax but the spy is never called. updateOrAddNew is a static method. How can I test whether it's being called when memberAdd.execute is run?
I'm pretty new to testing so any help would be appreciated.
What if you declare in that file globally like this:
jest.spyOn(User, 'updateOrAddNew').mockReturnValue(true);
This should update any usage of this method with mock

jest mock requires requireActual

Its unclear for me why requireActual (3) is required to use the mock in __mocks__/global.ts (2) instead of global.ts (1) inside app.ts
According to the docs https://jestjs.io/docs/jest-object#jestrequireactualmodulename it says
Returns the actual module instead of a mock, bypassing all checks on
whether the module should receive a mock implementation or not.
What are the mentioned checks?
// __mocks__/global.ts
export const globalConfig = {
configA: "mockedConfigA"
};
export const globalLibA = jest.fn((msg) => {
return msg + "+mockedLibA"
});
// app.ts
import { globalConfig, globalLibA } from "./global"
export const app = function (msg) {
console.log("Called app")
return globalLibA(msg);
}
export const globalConfigConfigA = globalConfig.configA;
Full source: https://github.com/Trenrod/testjest/tree/master/src

Jest - getting error when mocking FS modules and calling config module

I'm writing unit tests with Jest trying to test a module which uses FS.
The module file:
import fs from 'fs';
import logger from './logger.utils';
export const getNumberOfFiles = async (targetDir: string): Promise<number> => {
// get number of folders
logger.info(`getNumberOfFiles from ${targetDir}/${fileName}`);
const numberOfFiles = await fs.readdirSync(targetDir);
return numberOfFiles.length;
};
Test file
import fs from 'fs';
import { getNumberOfFiles } from '../../src/utils/fs.utils';
jest.mock('fs');
describe('fs.utils', () => {
describe('getNumberOfFiles', () => {
it('Should return number', async () => {
fs.readdirSync = jest.fn();
const readdirSyncMock = fs.readdirSync = jest.fn();
readdirSyncMock.mockResolvedValue([1, 2, 3]);
const result = await getNumberOfFiles('targetDir');
expect(result).toEqual(3);
expect(readdirSyncMock.mock.calls.length).toEqual(1);
});
});
});
When I run the test file, I get the following error:
Config file ..../config/runtime.json cannot be read. Error code is: undefined. Error message is: Cannot read property 'replace' of undefined
1 | const cheggLogger = require('#chegg/logger');
2 | import loggingContext from './loggingContext';
> 3 | import config from 'config';
| ^
4 | import os from 'os';
5 | import constants from '../../config/constants';
6 |
at Config.Object.<anonymous>.util.parseFile (node_modules/config/lib/config.js:789:13)
at Config.Object.<anonymous>.util.loadFileConfigs (node_modules/config/lib/config.js:666:26)
at new Config (node_modules/config/lib/config.js:116:27)
at Object.<anonymous> (node_modules/config/lib/config.js:1459:31)
at Object.<anonymous> (src/utils/logger.utils.ts:3:1)
Content of logger.utils.ts
const internalLogger = require('internalLogger');
import loggingContext from './loggingContext';
import config from 'config';
import os from 'os';
import constants from '../../config/constants';
const logger = internalLogger.createLogger({
level: config.get(constants.LOG_LEVEL)
});
export default logger;
I assume that config is using FS, and once I mock the module, it fails.
How can I resolve this? Please advise
I'm guessing the problem comes from config also using the fs api but you are now mock entire module fs which makes all methods should be mocked before using.
But I have an idea for you by using jest.doMock which you can provide a factory for each test and just mock only method we need. Here is a draft idea:
describe('fs.utils', () => {
describe('getNumberOfFiles', () => {
it('Should return number', async () => {
jest.doMock('fs', () => ({
// Keep other methods still working so `config` or others can use
// so make sure we don't break anything
...jest.requireActual('fs'),
readdirSync: jest.fn(pathUrl => {
// Mock for our test path since `config` also uses this method :(
return pathUrl === 'targetDir' ? Promise.resolve([1, 2, 3]) : jest.requireActual('fs').readdirSync(pathUrl)
})
}));
// One of the thing we should change is to switch `require` here
// to make sure the mock is happened before we actually require the code
// we can also use `import` here but requires us do a bit more thing
// so I keep thing simple by using `require`
const {getNumberOfFiles} = require('../../src/utils/fs.utils');
const result = await getNumberOfFiles('targetDir');
expect(result).toEqual(3);
// you might stop assert this as well
// expect(readdirSyncMock.mock.calls.length).toEqual(1);
});
});
});
Just also want to check, if you created a config file as described here: https://www.npmjs.com/package/config#quick-start

Test callback prop with Enzyme

I have React-Spring animation in my component:
<SpinnerKf state={status} onRest={changeView && status === 'SUCCESS' ? () => changeView(VIEW_MODES.RECEIPT) : null}>
....
</SpinnerKf>
Where I pass function call inside onRest prop - this is the prop from React-Spring Keyframe, which is called after animation end.
How can I cover this with a test? I'm opened for any tricks, just need to avoid complaining in test coverage.
You can use Enzyme to get the SpinnerKf component and then call its onRest property directly.
Here is a simplified example:
code.js
import * as React from 'react';
const SpinnerKf = () => null;
export const Component = () => (<SpinnerKf onRest={() => { return 'does something'; }}/>);
code.test.js
import * as React from 'react';
import { shallow } from 'enzyme';
import { Component } from './code';
test('callback', () => {
const wrapper = shallow(<Component />);
const result = wrapper.find('SpinnerKf').props().onRest();
expect(result).toBe('does something'); // Success!
});
Note that testing the return value or behavior of the callback is optional, as long as it runs during a unit test it will be included in the code coverage report.

Typescript: Uncaught ReferenceError: Morph is not defined

I got the following error:
Uncaught ReferenceError: Morph is not defined
at sketch (sketch.ts:7)
at new p5 (sketch.ts:28)
at Object.<anonymous> (sketch.ts:28)
at c (sketch.ts:28)
at Function.r.import (sketch.ts:28)
at sketch.ts:28
The morph.ts is in the same folder as sketch.ts and this is sketch.ts:
import 'p5'
import './morph'
var sketch = (p: p5) => {
const morph = new Morph();
p.preload = () => {
}
p.setup = () => {
p.createCanvas(p.windowWidth, p.windowHeight);
morph.setup(p);
}
p.windowResized = () => {
p.resizeCanvas(p.windowWidth, p.windowHeight);
}
p.draw = () => {
p.background(100);
morph.draw(p);
}
}
var sketchP = new p5(sketch);
Why the import of morph.ts does not work. What did I miss?
Thank you in advance.
You have to import everything as a namespace, the default export, or a specific export. So for example, since your code indicates that Morph is a class, it should be marked as an export class, or the default export. I prefer to not use default exports, so I would make sure Morph is exported where you declare it:
export class Morph {
Then in your sketch.ts do the following to import the Morph class:
import { Morph } from './morph'

Resources