Allows developers to render RNN screens without depending on the native hierarchy maintained by RNN.
npm install react-native-navigation-test-renderer- npm install react-native-navigation-test-renderer --save, or
- yarn add react-native-navigation-test-renderer
react-native-navigation-test-renderer provides you with the ability to move between screens, and to test complete flows with a fast feedback loop.TestComponent and wrap it with withNativeNavigation HOCjs
import React from "react";
import mockNavigation, {
withNativeNavigation
} from "react-native-navigation-test-renderer";// mock react-native-navigation imports with mockNavigation
jest.doMock("react-native-navigation", () => ({
Navigation: mockNavigation
}));
class TestComponent extends React.Component {
render() {
// withNativeNavigation injects the Screen to be rendered
const { Screen } = this.props;
return ;
}
}
export default withNativeNavigation(TestComponent)
`Now in your tests
`js
import React from "react";
import { render, wait } from "@testing-library/react-native";
import mockNavigation from "react-native-navigation-test-renderer";
import TestComponent from "../TestComponent";class SimpleScreen extends React.Component {
render() {
return (
Hello World
);
}
}
mockNavigation.registerComponent("EXAMPLES.SIMPLE_SCEEN", () => SimpleScreen)
describe("Simple Screen Tests", () => {
it("should render the screen", async () => {
const { getByText } = render(
component={{
name: "EXAMPLES.SIMPLE_SCEEN"
}}
/>
);
await wait();
expect(getByText(/hello world/i)).toBeTruthy();
});
});
``See \__test__ directory for more examples