I'm fixing some unit tests and trying to test a method like this:
onComponentNameBlur = (event) => {
const ordercodeName = event.target.value;
const { component, showEditComponentName, currentStep, session } = this.props;
if (ordercodeName && ordercodeName != component.Name) {
Promise.resolve(ApplicationActions.ChangeComponentName(currentStep, session, component.ComponentId, ordercodeName)).then(() => {
showEditComponentName(false);
});
}
else { //default the input to component name when input is left blank
event.target.value = component.Name;
showEditComponentName(false);
}
this.setState({
isValid: true,
validationMessage: ''
});
}
In my unit test, I want to check that the function ChangeComponentName is called so I know that the if statement is working correctly.
this is what I have currently:
describe('should call onComponentNameBlur', () => {
it('should update component component name', () => {
const updateActionSpy = sinon.spy(ApplicationActions, 'ChangeComponentName');
const input = stepcardcomponentnameeditmode.find('input[className="ordercodename-input-box"]');
input.simulate('blur', { target: { value: 'Test Name' } });
expect(updateActionSpy.called).to.true;
ApplicationActions.ChangeComponentName.restore();
});
});
here is the trace stack and error message:
1) StepCardComponentName
should call onComponentNameBlur
should update component component name:
Uncaught TypeError: The "url" argument must be of type string. Received undefined
at new NodeError (node:internal/errors:387:5)
at validateString (node:internal/validators:162:11)
at Url.parse (node:url:168:3)
at urlParse (node:url:155:13)
at new Request (node_modules\node-fetch\lib\request.js:27:16)
at C:\...\node_modules\node-fetch\index.js:51:17
at new Promise (<anonymous>)
at new Fetch (node_modules\node-fetch\index.js:49:9)
at Fetch (node_modules\node-fetch\index.js:37:10)
at fetch (node_modules\isomorphic-fetch\fetch-npm-node.js:8:19)
at _callee2$ (src\Services\/fetch.js:54:28)
at tryCatch (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:54:17)
at Generator.<anonymous> (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:136:22)
at Generator.next (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:80:21)
at asyncGeneratorStep (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:4:24)
at _next (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:23:9)
at C:\GitLab\GJ_g4\complex-product-guided-journey-ux\node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:28:7
at new Promise (<anonymous>)
at new Wrapper (node_modules\core-js-pure\internals\export.js:18:24)
at Object.apply (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:20:12)
at Object.post (src\Services\/fetch.js:40:11)
at ApplicationActionsClass.changeComponentName (src\Actions\/ApplicationActions.js:104:22)
at ApplicationActionsClass._callee3$ (src\Actions\/ApplicationActions.js:82:47)
at tryCatch (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:54:17)
at Generator.<anonymous> (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:136:22)
at Generator.next (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:80:21)
at asyncGeneratorStep (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:4:24)
at _next (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:23:9)
at C:\...\node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:28:7
at new Promise (<anonymous>)
at new Wrapper (node_modules\core-js-pure\internals\export.js:18:24)
at ApplicationActionsClass.apply (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:20:12)
at ApplicationActionsClass.ChangeComponentName (src\Actions\/GuidedJourneyActions.js:90:6)
at Function.invoke (node_modules\sinon\lib\sinon\spy.js:302:51)
at ApplicationActionsClass.ChangeComponentName (node_modules\sinon\lib\sinon\spy.js:105:30)
at C:\...\src\Components\SideNavigation\/StepCardComponentName.js:98:50
at fn (node_modules\@wojtekmaj\enzyme-adapter-react-17\src\ReactSeventeenAdapter.js:682:20)
at withSetStateAllowed (node_modules\@wojtekmaj\enzyme-adapter-utils\src\Utils.js:85:18)
at Object.simulateEvent (node_modules\@wojtekmaj\enzyme-adapter-react-17\src\ReactSeventeenAdapter.js:678:30)
at ShallowWrapper.call (node_modules\enzyme\src\ShallowWrapper.js:1134:7)
at ShallowWrapper.single (node_modules\enzyme\src\ShallowWrapper.js:1654:21)
at ShallowWrapper.simulate (node_modules\enzyme\src\ShallowWrapper.js:1133:17)
at Context.<anonymous> (test\Components\SideNavigation\/stepcardcomponentname-test.js:102:19)
at processImmediate (node:internal/timers:466:21)
I assume the issue is with the promise in the function that is causing the issue, but when I change the spy to a stub instead and using sandbox, to mock the return value of ChangeComponentName, it causes the unit tests of the parent component to fail when the parent component is mounted with enzyme.