Is it possible to test exported hook methods of a provider?

[Macilias]

I can not wrap my head around how to test the functions provided by my chain of ContextProviders in React-Native properly. All the sources I found are either using mocking build-in context functions only spying on those being called, but I want to properly test them, like any other unit.
The closes source I got was this: https://www.samdawson.dev/article/react-context-testing#behavioral-testing-approaches still I was unable to adopt the reasoning in there.

Now the first Component in question looks (very simplified) like this:

export type Ontology = {
  ontologyIsInitialized: boolean;
  getNodes: (
    type: NodeType,
    name?: string,
  ) => Results<Node & Realm.Object>;

const OntologyContext = React.createContext<Ontology>(null);

const OntologyProvider = ({  children, testing = false  }) => {
  const [ontologyIsInitialized, setInitialized] = useState<boolean>(false);
  const ontologyRef = useRef<Realm>(null);

   useEffect(() => {
    if (!ontologyIsInitialized || !ontologyRef.current) {
      Realm.open(testing ? api.testConfig : api.ontologyConfig).then(ontology => {
        ontologyRef.current = ontology;
        setInitialized(true);
      });
    }

    return () => {
      // cleanup function
      setInitialized(false);
      const ontology = ontologyRef.current;
      if (ontology) {
        ontologyRef.current = null;
      }
    };
  }, []);

  const getNodes = (
    type: NodeType,
    name?: string,
  ): Results<Node & Realm.Object> => {
    const ontology = ontologyRef.current;
    if (type) {
      return ontology
        .objects<Node>('Node')
        .filtered('type == $0 && name ==[c] $1', type, name);
    }

    return ontology.objects<Node>('Node').filtered('name == $0', name);
  };

  return (
    <OntologyContext.Provider
      value={{
        ontologyIsInitialized,
        getNodes,
      }}>
      {children}
    </OntologyContext.Provider>
  );
};

const useOntology = (testing = false) => {
  const ontology = useContext(OntologyContext);
  if (ontology == null && !testing) {
    throw new Error('useOntology() called outside of a OntologyProvider?');
  }

  return ontology;
};
    
export { OntologyProvider, useOntology };

Now regarding the tests that's how far I could get it before running into troubles with the context and custom export methods (here getNodes):

// import '@testing-library/jest-native';
import { act, renderHook } from "@testing-library/react-hooks";
import { render, waitFor } from "@testing-library/react-native";
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { NodeType } from './model';
import { OntologyProvider, useOntology } from './OntologyProvider';

const OntologyProviderTester = () => {

  const [testIsInitialized, setInitialized] = useState<boolean>(false);

  const {
    ontologyIsInitialized,
    createNode,
    getNodes,
  } = useOntology();

  useEffect(() => {
    if (ontologyIsInitialized) {
      console.log('test ontology is initialized now');
      setInitialized(true);
    }
    return () => {
      // cleanup function
      setInitialized(false);
    }
  }, [ontologyIsInitialized]);

  return (
    <>{testIsInitialized && <View testID='the1'>Test is initialized: {testIsInitialized}</View>}</>
  );
}

describe("Nodes", () => {

  it("test creation", async () => {
    const provider = render(
      <OntologyProvider testing={true}>
        <OntologyProviderTester />
      </OntologyProvider>
    );
    await waitFor(() => provider.getByTestId('the1'));

    const { result, waitForNextUpdate } = renderHook(() => useOntology(true));
    await waitForNextUpdate();

    await act(async () => {
      result.current.createNode(NodeType.Complex, 'Peter Pan');
    })
  });

});

As you can see, I apply the config for realm based on a variable and use api.testConfig instead of api.ontologyConfig but beside this, I want it to behave identically to how it would when used by other components. My problem is that my test component does not get the update of ontologyIsInitialized being changed to true after initialization of the provider.
So it looks like the waiting for the init does not work. I also get the confusing error:

 console.error
    Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);

which is confusing because I do call waitFor and act with await!

Beside this is there any other way to test the methods exported via useOntology directly?
I don't want to create a fake consumer component, and I really don't want to test side effects on it, what I need is to unit test the exported functions directly!

Thanks!

[thymikee]

You could pass the realm configuration as a prop.

[Macilias]

hi, sure, either this or build it based on the path, which is the only difference here.

export const ontologyConfig: Realm.Configuration = {
  path: 'ontology.realm',
  schema: ontologySchema,
  deleteRealmIfMigrationNeeded: true, // TODO remove on release
};

export const testConfig: Realm.Configuration = {
  path: 'testOntology.realm',
  schema: ontologySchema,
  deleteRealmIfMigrationNeeded: true, // TODO remove on release
};

[Macilias]

but this is not the issue here. My issue is how to lay hand on the getNodes method for testing via useOntology.

[Macilias]

YEAH, i found the solution, and its quite simple:

import { act, renderHook } from "@testing-library/react-hooks";
import { waitFor } from "@testing-library/react-native";
import React from 'react';
import { NodeType } from './model';
import { OntologyProvider, useOntology } from './OntologyProvider';

describe("Nodes", () => {

  it("node creation", async () => {
    const wrapper = ({ children }) => <OntologyProvider testing={true}>{children}</OntologyProvider>
    const { result } = renderHook(() => useOntology(true), { wrapper });
    await waitFor(() => result.current.ontologyIsInitialized);
    await act(async () => {
      result.current.createNode(NodeType.Complex, 'Peter Pan');
    })
  });

});