React Native : Invariant Violation: `new NativeEventEmitter()` requires a non-null argument - reactjs

I am writing jest test case for a particular file, the file has NativeModule import in it.
While running the test case, I am getting the following error:
● Test suite failed to run
Invariant Violation: `new NativeEventEmitter()` requires a non-null argument.
at invariant (node_modules/invariant/invariant.js:40:15)
at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:45:7)
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:322)
After googling the above error, I did few changes by adding the following code inside the test file.
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
After adding the above line then I got the following error:
Test suite failed to run
TypeError: Cannot set properties of undefined (setting 'eventType')
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:367)
After googling again, I modified the above code with the following code.
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter.js', () => {
const {EventEmitter} = require('events');
return EventEmitter;
});
After above modification I am getting the below error.
● Test suite failed to run
TypeError: _reactNative.NativeEventEmitter is not a constructor
at Object.<anonymous> (node_modules/react-native-quantum-metric-library/index.js:1:322)
Can anyone please help me to resolve the above issue.

Related

TypeError [ERR_UNKNOWN_FILE_EXTENSION]

I am trying to do a mini react project and am using external API. I am getting this weird error. Before I was getting error when doing any type of import, but then I added type: "module" in package.json, so now instead I get completely different type of error.
Error:
node:internal/errors:484
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".tmp" for /Users/rokas/Projects/quiz-website/src/node_7c47523b50d8c.tmp
at new NodeError (node:internal/errors:393:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:605:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v18.12.1
Thoughts?

CssSyntaxError - unknown word in Tailwind and Next.js project

10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.

How do I find where 'given node is not an Element, the node type is: string' error occurred from stack trace? (react/JS)

I'm writing a react app as a practice and I get the following error on several components, however I can't see that it tells me where it comes from? It doesn't prevent tests (jest/react testing library) passing or indeed build (WIP app is successfully deployed to netlify). Nevertheless, I'd like to track it down if only for understanding:
Error: The given node is not an Element, the node type is: string.
at getWindowFromNode (/Users/learning/Documents/projects/mol-bio-tools/node_modules/#testing-library/dom/dist/helpers.js:58:11)
at hasPointerEvents (/Users/learning/Documents/projects/mol-bio-tools/node_modules/#testing-library/user-event/dist/utils/misc/hasPointerEvents.js:11:49)
at click (/Users/learning/Documents/projects/mol-bio-tools/node_modules/#testing-library/user-event/dist/click.js:116:63)
at typeImplementation (/Users/learning/Documents/projects/mol-bio-tools/node_modules/#testing-library/user-event/dist/type/typeImplementation.js:24:36)
at Object.type (/Users/learning/Documents/projects/mol-bio-tools/node_modules/#testing-library/user-event/dist/type/index.js:27:60)
at Object.<anonymous> (/Users/learning/Documents/projects/mol-bio-tools/src/__tests__/transcribe.test.js:33:15)
at Promise.then.completed (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/utils.js:391:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/utils.js:316:10)
at _callCircusTest (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/run.js:218:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/run.js:155:3)
at _runTestsForDescribeBlock (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/run.js:66:9)
at _runTestsForDescribeBlock (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/run.js:60:9)
at run (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/run.js:25:3)
at runAndTransformResultsToJestFormat (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
at jestAdapter (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
at runTestInternal (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-runner/build/runTest.js:389:16)
at runTest (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-runner/build/runTest.js:475:34)
at Object.worker (/Users/learning/Documents/projects/mol-bio-tools/node_modules/jest-runner/build/testWorker.js:133:12)
Current complete code is here and live app is here (again: WIP - I know various links/etc don't work yet).
Turns out if I actually read that trace it highlights an error in my test:
at Object.<anonymous> (/Users/learning/Documents/projects/mol-bio-tools/src/__tests__/transcribe.test.js:33:15)
Turns out I'd managed to use a hybrid of #testing-library/userevent v13.5 and v14 syntax, and there are breaking changes between the 2 versions. Updated to v14, updated syntax, all good.

React-Native tests failed

i searched on stackoverflow but i didn't find my problem.
I dev an apps only on android, using React-Native-cookies's native module, and now i have to create some unit test. I am using Jest, and i make one.
But now, everytime i want to test it, it is not possible because i didn't configured my xCode project. It doesn't take sense because i haven't changed evything on the ios app. Here is my error :
> jest
PASS __tests__\index.ios.js
FAIL __tests__\index.android.js
● Test suite failed to run
Invariant Violation: react-native-cookies: Add RNCookieMangerIOS.h and RNCookieManagerIOS.m to your Xcode project
at invariant (node_modules/invariant/invariant.js:42:15)
at Object.<anonymous> (node_modules/react-native-cookies/index.js:10:1)
at Object.<anonymous> (App/App/Cookie.js:7:25)
at Object.<anonymous> (App/App/Mattermost.js:11:13)
FAIL App\App\__tests__\Mattermost.test.js
● Test suite failed to run
Invariant Violation: react-native-cookies: Add RNCookieMangerIOS.h and RNCookieManagerIOS.m to your Xcode project
at invariant (node_modules/invariant/invariant.js:42:15)
at Object.<anonymous> (node_modules/react-native-cookies/index.js:10:1)
at Object.<anonymous> (App/App/Cookie.js:7:25)
at Object.<anonymous> (App/App/Mattermost.js:11:13)
Test Suites: 2 failed, 1 passed, 3 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.547s, estimated 3s
Ran all test suites.
npm ERR! Test failed. See above for more details.
So i wonder if someone could help me? Thanks
EDIT : forgetted to post the unit test :
import Mattermost from "../Mattermost";
let mattermost = new Mattermost();
test('Rendering Test', () => {
mattermost.setState({
MMAUTHTOKEN : "test debug",
});
expect(mattermost.render.contain(<WebView ref={'webview'} automaticallyAdjustContentInsets={false} style={Style.webview} source={{uri: URLMATTERMOST}} javaScriptEnabled={true} onNavigationStateChange={this.onNavigationStateChange.bind(this)} startInLoadingState={true} scalesPageToFit={true}/>)).to.equal(true);
});

Protractor: Invalid locator error with isElementPresent

I have the following simple line of code in my e2e test...
var promise = ptor.isElementPresent(element(by.binding('firstName')));
I get an error that says TypeError: Invalid locator. I don't see many other people getting this error after googling it. Where did I make an error?
I believe the syntax is(remove element(...)...
var promise = ptor.isElementPresent(by.binding('firstName'));

Resources