(ERROR: internal) Testing Firebase functions using React Native Expo - javascript

I'm trying to test my firebase functions in my React Native Expo app. Here's my initialization code:
import { connectFunctionsEmulator, getFunctions } from 'firebase/functions'
// ...Initialize app
export const fucntions = getFunctions()
connectFunctionsEmulator(fucntions, "localhost", 5001)
I then have code which maps functions in an object:
import { httpsCallable } from "firebase/functions";
import { fucntions } from "../../firebase";
export default {
helloFirebase: httpsCallable(fucntions, "helloFirebase")
}
And I call the function as follows:
functionsObj.helloFirebase({ myParam: "Hello!" })
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error.message)
})
But when I call the function I get the following, very small and unspecific error message in the console:
ERROR: internal
I'm guessing it's something to do with not being able to access localhost, but I still don't know how to fix the issue.
Any help would be appreciated, thanks!

FIXED: I found this article on this exact issue.
Make sure to run firebase serve --only functions -o ${YOUR_LOCAL_IP} once you've followed all the steps

Related

Why do not reconnect server while I changed file on watch mode in nestJs

In my nestJs project When I run "nest start --watch" it's running fine. But when I changed something it's reload and does not connect to server. Show "Error: listen EADDRINUSE: address already in use :::3000". How do I fix it.
Not sure if you are still suffering from this phenomenon.
I too encountered this phenomenon when running nest app on wsl2.
Adding app.enableShutdownHooks() to main.ts worked for me.
src/main.ts
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule, { cors: true });
> app.enableShutdownHooks();
await app.listen(Number(process.env.PORT) || 3000);
}
bootstrap();

How to view logs (Console.log) after ejecting from expo?

In my react native app am using expo.In order to implement InAppPurchase feature using expo-in-app-purchases,am ejecting my app using expo eject.Then i running it on my device(ios 14.2).But I am no longer able to see log outputs.where should i see the logs.After ejecting i build the solution with xcode.What i have is:
App.js
componentDidMount = async () => {
console.log("componentDidMount");//this logs
try {
await SplashScreen.preventAutoHideAsync();
} catch (e) {
console.warn(e);
}
connectSocket(store);
const history = await InAppPurchases.connectAsync();
console.log("history", history);//this logs where should i see those logs?
}
If anyone can provide any help or advice would be really appreciated.

SWR not returning any data

I'm trying to get SWR to work. Every example I have found doesn't seem to work when i apply it to my code. I'm not sure what i'm doing wrong the code appears to be the same, i'm sure something super simple that i just can't see.
I have a boilerplate next.js app.
my index.js has;
import useSWR from 'swr'
export default function Home({ isConnected }) {
const { data, error } = useSWR('/api/')
return() //jsx here
}
when i start the development server up it tells me http://localhost:3000 is where the development server can be viewed. when i debug and pause in the on the return line it tells me that data and error are undefined. when i go to http://localhost:3000/api/ i get well formed json back(firefox renders it as json).
You need a method to make the request, for you case, it could be like:
import useSWR from 'swr'
import axios from 'axios';
export default function Home({ isConnected }) {
const fetcher = async () => {
return await axios.get('http://mipage/some/');
};
const { data, error } = useSWR('/api/', fetcher)
return() //jsx here
}

Trying to mock just certain named exports (e.g. PushNotificationsIOS) in react-native with jest

Given I have an implementations files that looks something :
import ReactNative, { PushNotificationIOS, AsyncStorage } from 'react-native';
export function tryNotify() {
PushNotificationIOS.addEventListener('register', token => {
callback(token);
});
PushNotificationIOS.requestPermissions();
}
export function trySave(token) {
AsyncStorage.setItem('blah', token);
}
So if I want to write a test that spies on:
PushNotificationIOS.addEventListener.
However, I can't work out how to mock it, because as soon as I mock react-native...
describe('notify()', () => {
let generator;
beforeAll(() => {
jest.mock('react-native', () => ({
PushNotificationIOS: {
addEventListener: jest.fn(),
requestPermission: jest.fn(),
},
}));
});
afterAll(() => {
jest.unmock('react-native');
});
// No tests yet!
});
...I start getting the following error in my test:
Invariant Violation: Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html
My best guess is I'm interfering with the inbuilt react-native mocks that jest provides:
The Jest preset built into react-native comes with a few defaults mocks that are applied on a react-native repository.
-jest docs
But I don't know where to look for to confirm this.
Does anyone have experience with this?
Thanks!
Edit
So I have two solutions:
AsyncStorage: the answer below works, as does this SO answer
PushNotificationsIOS: the answer below does not work for me, but this SO answer did
You can't jest.mock('react-native',... because react-native does some slightly nasty things with its exports, such that they can't be imported en-masse by jest or anything else.
You'll need to bypass this by targeting the module more directly:
jest.mock('react-native/Libraries/PushNotificationIOS', () => {})

Vuex store is undefined in NUXT middleware

I'm practicing NUXT and from tutorial its working well. mine fail when entering the NUXT middleware. the logic is if page is redirecting to other page it will enter middleware and fetch the result using axios.
middleware/search.js
import axios from 'axios';
export default function ({ params, store }) {
console.log(store)
return axios.get(`https://itunes.apple.com/search?term=~${params.id}&entity=album`)
.then((response) => {
console.log(response.data.results);
store.commit('add', response.data.results)
})
}
when entering here the store.commit('add'... will result
Cannot read property 'commit' of undefined
when I echo commit = undefined.
What I'm missing? I already tried this.$store.commit(...) still undefined.
VUEX
store/index.js
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state: {
albums: []
},
mutations: {
add (state, payload) {
state.albums = payload
}
}
})
}
export default createStore
I found a solution from the comments of the said tutorial but I want to share here if others struggle it too.
halt your development server ctrl+C
then restart the your dev server
npm run dev
then VUEX will be seen now in the middleware tnx
Restarting the Dev Server worked for me as well. It seems Vuex isn't reloaded when changes are made.
Run npm run dev and it should work.

Categories