Using @remix-run/testing

[neviaumi]

Hi , i have component used with <Outlet context={}/> and useOutletContext

how can i test that component with @remix-run/testing ?

Given below code block

import { useOutletContext } from '@remix-run/react';
export default function Comp() {
    const {revokeAuthToken} = useOutletContext()
    return <div>Hello</div>
}

And it test , it got similar that

import { unstable_createRemixStub as createRemixStub } from "@remix-run/testing"; // I stil using 1.19.3
import {Outlet} from "@remix-run/react";
import {json} from "@remix-run/node"
import Comp from "./Comp"

const RemixStub = createRemixStub([
  {
    path: "/partners",
    Component: Comp,
    loader() {
      return json({ message: "hello" });
    },
  }])

cy.mount(<RemixStub/>)

it print the error Cannot destructure property 'revokeAuthToken' of 'useOutletContext(...)' as it is null.

What do i missing ?

[kiliman]

You need a parent route that sets <Outlet context>. Your Comp is trying to get context that doesn't exist yet. Your tests need to set the same conditions as your production code.

[neviaumi]

Thanks @kiliman ! It working after add context in parent route.

Below is working example for who jump in here with same question :)

import {Outlet} from "@remix-run/react"
import { unstable_createRemixStub as createRemixStub } from '@remix-run/testing';
import { json } from '@remix-run/node';

function WithOutLetContext() {
  return (<Outlet context={{revokeAuthToken: () => {}}}/>)
}

const RemixStub = createRemixStub(
      [
        {
          path: '/',
          element: (<WithOutLetContext/>),
          children: [
            {
              path: '/partners',
              Component: Comp,
              loader() {
                return json({ message: 'hello' });
              },
            },
          ]
        },
      ]
    );

cy.mount(<RemixStub/>)