I have a component with a lifecycle method added by the navigation library - React Native Navigation (https://wix.github.io/react-native-navigation/#/docs/Usage?id=screen-lifecycle).
I must call this lifecycle method (componentDidAppear) in tests so that my component render correctly.
I was able to call this method on the component instance when I used React Test Renderer. How do I call it with React Native Testing Library? How can I get test renderer instance in RN Testing-Library?
You can get to it via the getByType function:
const subject = render(<SomeComponent />);
subject.getByType(SomeComponent).instance.componentDidAppear()
Note how instance is a property on the interface, not a function (as is the case for some other libraries).
Related
I want to mock a native module for jest test case.
I tried this -
jest.mock('NativeModules', () => {
return {
UtilityFunc.getConstants: jest.fn(),
};
});
I know we can't access a property in such a way.
My Native module is UtilityFunc and my property is getConstant that returns appversion.
react-native-device-info - I'm using this library as native module for internal stable usage.
Pls share how to use mock with nativeModules in react native.
For My project I am using one custom hook for navigation some of my screens as from one screen to another screen based on the parameters provide to the function of custom hook. How could I Unit Test it for React Native Custom
const {result} = renderHook(() => {useShoppingCartNavigator()});
The problem is I am getting result.current as void and unable to call function of the hook
But according to the doc it should be like
result.current.customHookFn();
The callback inside your renderHook is not returning anything because you wrapped your customHook on curlybraces. It should be
const {result} = renderHook(() => useShoppingCartNavigator());
React Native app with Expo.
Installed Jest and Enzyme
Want to run Enzyme Mount on the component so I can test state updates.
I have this simple test
describe("State checking", () => {
test("Make sure that State gets added from Route params", () => {
const component = mount(<Categories/>);
const instance = component.instance();
console.log(instance);
})
})
When running this, I get this error from the test:
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
What is going on here? Does it not recognize that I am using React Native?
I have researched this issue but get nothing useful.
Thank you for your time.
i'm using a global variable that is declared in a app.tsx as a functional component like
const App = () => {
useEffect(r => global.some = 'anything')
}
i'm using this global variable in other functional component very vell like this
const SomeComponent = () => {
useEffect(r => console.log(some)) //annything
}
but when i using this in a class component i gives me an error called unexpected token
like
class NewClass extends React.Component {
useEffect(r => console.log(some) //error : unexpected token
}
do someone has the answer what is going wrong what should i have to do to to log the data
useEffect belongs to react hooks and hooks only works with a functional component, not with class component.
According to docs.
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class
Link to docs
Edit: Hooks are basically a replacement of lifecycle methods in functional component, Before 16.8 we can't use lifecycle methods inside the functional component hooks made possible this for us in 16.8 version of react.
Now coming back to your question if you are doing something in functional component and wanted to do class component for the same logic you have to use lifecycle methods which since until now hooks are not available in-class component.
There is nothing that you can do with hooks and can't do with classes and vise versa.
As your comment, you have achieved the same thing with componentWillUpdate
but this method is gone a deprecate from v17 of react so if you wanted to do something while component updates you have to use componentDidUpdate is the recommended way.
here is a list that how hooks represent lifecycle methods.
https://medium.com/javascript-in-plain-english/lifecycle-methods-substitute-with-react-hooks-b173073052a
I’d like to add an accessibilityIdentifier to a React Native component, so that I can use Xcode’s UI testing to navigate around my app.
Is there a way to specify the accessibilityIdentifier (not the accessibilityLabel) for React Native?
You can add an accessibilityIdentifier on React Native components (View, Text, Image...) using the testID property. This gets added to the component as a accessibilityIdentifier on iOS.
Note that it doesn't work on custom components.
Here's an example:
<TextInput
placeholderTextColor="#dddddd"
style={[styles.main, styles.textColor]}
placeholder="Add a new todo item"
onChangeText={this.handleInputChanges}
value={inputValue}
testID="addToDoItem"
/>