jest.mock - Cannot find module in React test file - reactjs

I want to mock broadcast-channel in my test case and was following the jest documentation on how to mock a module. However when I run the test, I get an error 'Cannot find module 'BroadcastChannel' from 'broadcast.test.js''
I tried looking at the githubs of both jest and broadcast-channel for similar issues but nothing came up.
Inside broadcast.test.js
import BroadcastChannel from 'broadcast-channel';
jest.mock('BroadcastChannel');
It should run the test case using the mock broadcast-channel. However, I only get the error:
'Cannot find module 'BroadcastChannel' from 'broadcast.test.js''

You can set up a setupTests file, where you can create a manual mock for the BroadcastChannel and set it for the window.
if (!window.BroadcastChannel) window.BroadcastChannel = BroadcastChannelMock;
This applies when you use react-scripts test for running tests.

Related

Jest React - Test suite failed to run, Cannot find module 'react-dotenv'

I used Create React App to make a new project, and now i try to implement each feature i will need.
I am facing an issue i dont understand while trying to configure jest with reactjs.
One my node_modules, react-dotenv break jest test.
If i try to copy/past the issue line import env from 'react-dotenv'; directly in the root tested file Login.tsx there is no error.
I tried to configure moduleNameMapper and search around without success..
I dont understand the problem, what am i missing?
Ok, i was missing mocks and transformIgnorePatterns
Didn't really make transformIgnorePatterns working using:
transformIgnorePatterns: ["node_modules/(?!react-dotenv)"],
but the mocks
moduleNameMapper: {
'^.+\\.(css|scss)$': '<rootDir>/__mocks__/CSSStub.config.js',
'react-dotenv': '<rootDir>/__mocks__/react-dotenv.tsx'
},
did the job.

cy.mockGraphql is not a function

Trying to run a test using cypress-graphql-mock in Next.js project but getting this error: cy.mockGraphql is not a function
Both cypress and cypress-graphql-mock are installed.
In the description of the library it says: "Adds commands for executing a mocked GraphQL server using only the client", But I have no idea why it is not adding a function.
Op was able to solve it by adding import "cypress-graphql-mock"; into the support/command.js file.

React enzyme jest test cases are failing with antv g2plot

I'm using the React Enzyme Jest module to test my React app which contains the antv/g2plot module for charts. While I am using the module, the test case isn't running but after removing it, it's working perfectly fine. There is a problem with the model I think. Do you know any possible solution?
I'm trying to test the file which is using the antv/g2plot module for chart while testing. It's failing and giving a random error which is not relevant (the error variable not defined in my React app). If I try to run the test without this file it's running pretty well but with it it returns this error.
I'm the member of G2Plot dev-team. When you write unit test for chart with canvas, you should:
mock the canvas API, see https://github.com/hustcc/jest-canvas-mock
give the real document(include canvas) env, see https://github.com/hustcc/jest-electron
G2Plot use jest-electron for unit test and debugger.

Unit testing a service in angularJS

I'm relatively new to unit testing but was now tasked to write tests for a existing code base that I know quite well.
Sadly I'm unable to achieve any progress what so ever nor find really helpful documentation.
The main component of the code base is a service to retrieve data from an api but I'm unable to get an instance of the module the service belongs to:
TypeError: module is not a function in /home/faebser/workspace/GridSense-CMS-App/dev/test/unit/api.test.js (line 13)
karma config: http://sprunge.us/ObSP?js
tests: http://sprunge.us/AJWL?js
karma output: http://sprunge.us/WYHI?bash
What is the problem? why am I not able to get a instance of the module?
UPDATE1:
I'm managed to load my module by reinstalling the same version of angular and angular mocks. But now I run into the following error:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
I managed to track the error down to the following:
"[$injector:modulerr] Failed to instantiate module ui.router due to:[$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ui.routerminErr/<#http://localhost:9876/base/bower_components/angular/angular.js:63:12module/<#http://localhost:9876/base/bower_components/angular/angular.js:1774:1ensure#http://localhost:9876/base/bower_components/angular/angular.js:1698:38module#http://localhost:9876/base/bower_components/angular/angular.js:1772:1loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4115:22forEach#http://localhost:9876/base/bower_components/angular/angular.js:323:11loadModules#http://localhost:9876/base/bower_components/angular/angular.js:4099:5loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4116:40forEach#http://localho"
Okay, simply forgot to add ui-router to karma-config.
It's looks like angular-mock is not loaded.
Checks well your path. For the moment, for karma it's look like :
-dev
|-test/
|-js/
|-bower_components/
|-karma.conf
Because in karma.conf, you have :
base: '',
Okay, I managed to get this to work.
The main problem was the strange error messages that angular gave me:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
To work around this I used the karma debug window and set a breakpoint at angular.js:63 in function minErr(module, ErrorConstructor):
return new ErrorConstructor(message);
that way you can see the arguments and the compiled error message. In the end i just forgot to add a few dependencies in the karma config file.

karma-browserify with angularjs unit tests: name collision on 'module' causes 'object is not a function' error

I have an angular app that I am testing with karma unit tests and I am attempting to add karma-browserify so that I can require npm modules in my unit tests.
Once I added the browserify preprocessor to my karma.conf.js config file my tests began to break, even though I have not even tried to require any modules yet.
I get the following error:
object is not a function
If I follow the trace I see that the line causing the error is in the browserify bundled js temp file on a call to 'module'
Just saw an older post with same question so I answered it there as well: angular mock `module` resulting in '[Object object] is not a function'
Change the call to load the app in the unit test from:
beforeEach(module("app"))
to:
beforeEach(window.angular.mock.module("app"))
This is a documented issue here which appears unlikely to be fixed:
https://github.com/xdissent/karma-browserify/issues/10
I hope this doesn't cost you a day like it did me.

Resources