How do I reload screen using the react testing library? - testing

I am using the react testing library (https://testing-library.com/) and I am having an issue where in between tests I change global values (that change the layout of the app) but the screen will not do these updates.
My temporary solution is to import a file where I set the globals but that will only work once for the whole file. I need some way to refresh the page with the new global values.

Related

Fast Refresh in production mode - React Native

i am new to react native. i already build mobile apps which take configuration from ENV file. i use Config from react-native-config. but now i want to change value of some property in that Config file.
I managed to call hook and get data. let's say the data is "X" and i success to store "X" in "Config.name". but nothing change in my app. i had to do fast refresh in order to see the changing.
my question is, is it possible to do fast refresh in production mode? if not, how can i work around with this? i have to call hook in order to get the data first so i think it was the problem since i couldn't call hook when the app in prebuilt. so the app took value from ENV file instead of waiting from hook call.

Download on demand resources for react native app

I am trying to figure out a way to update one of the static files in my react native project.
The requirement being after client downloads the app, we can either update the app using code-push (I just want to update some static files).
Or maybe create some resource pack kind of thing, so that when user clicks on download/update resource, the file gets downloaded or updated.
So, how do I create this resource pack thing, whose content are being used in the app, consider I want to update an logo. So, downloading it, and then using that image instead of the old one.
Or any other alternatives are welcome.

React Native Dynamically load modules/plugins?

As far as I've searched it appears to be impossible to load modules (=plugins/libraries?) dynamically (I'm very new to React Native..).
What I'd like to accomplish is to let the user of the app load additional functions as she/he desires.
Example:
A user wants to add a music plugin to the app.
Intuitively, I'd long for something like dynamic library loading. The user would fetch the library, it'll be loaded into the code and can then be executed. However, in React Native it seems like there are only modules that can be loaded?
Alternatively, I'd hope that auto-updating the app would allow to add modules "on-the-fly" ( https://github.com/aerofs/react-native-auto-updater or www.npmjs.com/package/react-native-hot-load ). But I fear that this is only for JS and data content?
The ability to dynamically add functionality to the app is an essential part of the app. I have no previous experience worth mentioning in mobile app development.
Question: Is it possible to dynamically add functionality (also native in nature) to React Native apps?
If not, would there be a workaround?
EDIT: I have found the following repository on github: https://github.com/yusefnapora/react-dynamic-linking-example .
Unfortunately, without any description. I have no idea about Objective-C, but the repo name sounds promising. Anybody knows what its purpose is?

Hot reloading doesn't work on a react-native app with react-router-native and redux

I'm starting with react native and I have a little experience with React, Because of that I want to use redux, react-router, and react-router-redux, which I have used in the past for a web React app.
All those packages can be used in react-native, except for react-router, the closest I could find is react-router-native which seems to work much like the browser version. So far so good, I made a quick and dirty app to test the router, redux, etc.
But I'm having some issues I can't figure out how to solve or debug: When changing the visuals like the text or some styles, the HMR seems to work fine, applying the changes in real time, but when I change some other module/file, like the container element (where the redux connect() function is called) or some code on the reducers, the HMR doesn't change anything and I have to reload all the app to see the changes.
Here is my code: https://github.com/DenJohX/test-react-router-native It basically just changes the color of some text by toggling a variable in the redux store. Sorry for just linking it but I think its better to show you all the folders and project structure, maybe I'd just goofed something in there or didn't use the correct folder structure.
I'm using https://github.com/jhen0409/react-native-debugger to debug the app, and by the console messages, the HMR does run and patches something but without affecting the current loaded code.
To test the problem, try to edit the colors in src/screens/pageOneContainer.js, the HMR should change the code, re-render the screen, and show the new colors, but they just stays the same.
Thanks in advance.

How can I dynamically remove / replace a ReactJS class at runtime in the browser?

I'm playing around with the idea of a web based IDE for building React applications. Basically the user defines and modifies the class entirely within the browser.
I know I can create a class using React.createClass but how can I delete it or redefine it when the user makes modifications to the class.
I know Webpack HMR does this but how can I do it entirely in the browser?