react-native-test-preview v0.2.2

React native test preview

Features

• Preview your app state while writing tests
• Auto reload the screen when your test executes
• Supports all style libraries out the box
• Supports external libraries with registerComponent

How to use

npm i react-native-test-preview

In your App.tsx file:

+import { TestPreviewComponent } from 'react-native-test-preview/setup';

function App() {
  //...
-  return ...;
+  return <TestPreviewComponent />;
}

And in your test files:

+import savePreview from 'react-native-test-preview/savePreview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+   savePreview(screen.toJSON());
  });
});

Caveats

If you test components that have external libraries with custom native components, like ReactNativeMaps, you have to register them with registerComponent fn.

Example:

import { registerComponent } from 'react-native-test-preview/setup';
import MyLibraryComponent from 'external-library';

registerComponent(MyLibraryComponent)

or

import { registerComponent } from 'react-native-test-preview/setup';
import MyLibraryComponent from 'external-library';

registerComponent(MyLibraryComponent, { prop1: value, prop2: value2 })

Contribution

See the Contribution Guide at CONTRIBUTING.md