React Native Test Preview

Key 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() callback

How to Setup

Install the package:

npm i @react-native-test-preview/test-preview -D

or

yarn add @react-native-test-preview/test-preview -D

In your App.tsx file:


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

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

ℹ️ You can use package such as react-native-dotenv to enable/disable the PreviewComponent on start

To run the preview server:


//inside package.json
"scripts": {
  "preview-server": "test-preview"
}

Then in the terminal:

npm run preview-server

And in your test files:


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

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

FAQ

Is React Native Test Preview free to use?

Yes, this library is open-source and completely free to use.

Does it support TypeScript?

Absolutely! The library fully supports TypeScript, enhancing your development experience.

What about styling libraries - are they supported?

Yes, it supports all styling libraries out of the box.

Where can i find an example project?

You can find an example project here.

Can I see the actual state of my tests on devices?

Indeed! You'll see the actual state of your test on both emulator and physical devices.

Does it work with both physical and emulator devices?

Yes, it supports both physical and emulator devices.

How does React Native Test Preview enhance UI testing?

It provides an interactive preview of component tests, leveraging advanced test renderer capabilities for efficient UI testing and visualization.

What makes React Native Test Preview a powerful utility?

It offers real-time visual testing feedback, streamlining the process of identifying and resolving UI issues, thus enhancing the quality and consistency of React Native user interfaces.

Can it help with both comprehensive testing and fine-tuning?

Absolutely! Whether you're conducting comprehensive UI testing or fine-tuning individual components, React Native Test Preview offers an intuitive platform for visualizing and validating your React Native components in various test scenarios.