Upgrade to Jazz 0.9.0

08 January 2025

Version 0.9.0 simplifies the application setup and makes Jazz more intellisense friendly by replacing the createJazzRNApp API with top-level imports.

We have also introduced some new API to make testing Jazz components a breeze. 🌬️

New provider setup

The JazzProvider is now imported from jazz-react-native instead of createJazzRNApp.

While createJazzRNApp was originally designed to setup strong typing for custom Account schemas in useAccount, we found that this approach made the Jazz setup awkward and confusing for some users.

So we decided to remove createJazzRNApp step and to provide the types through namespace declarations:

import { JazzProvider, useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
import { MyAppAccount } from "./schema";

// Remove these lines  
const Jazz = createJazzRNApp({ AccountSchema: MyAppAccount }); 
export const { useAccount, useCoState } = Jazz; 

export function JazzAndAuth({ children }: { children: React.ReactNode }) {  
    const [auth, state] = useDemoAuth();  

    return (
        <>
            {/* Replace Jazz.Provider with provider from jazz-react */}
            <JazzProvider
                auth={auth} 
                peer="wss://cloud.jazz.tools/?key=you@example.com" 
                AccountSchema={MyAppAccount} {/* The custom Account schema is passed here */}
            >
                {children} 
            </JazzProvider>
            <DemoAuthBasicUI appName="My App" state={state} /> 
        </> 
    );
}

// Register the Account schema so `useAccount` returns our custom `MyAppAccount`
declare module "jazz-react-native" {
    interface Register {
        Account: MyAppAccount;
    }
}

Top level imports for hooks

All Jazz hooks are now available as top-level imports from the jazz-react-native package.

This change improves IDE intellisense support and simplifies imports:

// Replace local imports with "jazz-react-native" imports
import { useAccount } from "./main"; 
import { useAccount } from "jazz-react-native"; 

export function Hello() {
    const { me } = useAccount();

    return (
        <>
          Hello {me.profile?.name}
        </>
    );
}

New testing utilities

Removing createJazzRNApp also makes testing way easier!

We can now use createJazzTestAccount to setup accounts and testing data and pass it to your components and hooks using JazzTestProvider:

import { createJazzTestAccount, JazzTestProvider } from "jazz-react-native/testing";
import { renderHook } from "@testing-library/react-native"; 
import { usePlaylist } from "./usePlaylist"; 
import { Playlist, MusicAccount } from "./schema"; 

test("should load the playlist", async () => {
  // ✅ Create a test account with your schema
  const account = await createJazzTestAccount({ AccountSchema: MusicAccount });

  // ✅ Set up test data
  const playlist = Playlist.create({
    name: "My playlist",
  }, account);

  // ✅ Use JazzTestProvider in your tests
  const { result } = renderHook(() => usePlaylist(playlist.id), {
    wrapper: ({ children }) => (
      <JazzTestProvider account={account}>
        {children}
      </JazzTestProvider>
    ),
  });

  // The result is resolved synchronously, so you can assert the value immediately
  expect(result.current?.name).toBe("My playlist");
});