Component in test is not updating despite signal change

I am currently writing some tests for a library I'm building with Solid. I have the following test:
const AuthStateComponent = () => {
const { user, signIn, signOut } = useSSO();

createEffect(() => {
console.log("auth state user >>>>", user());
});

return (
<Show
when={user()}
fallback={
<>
<div>Not Authenticated</div>
<button onClick={signIn}>Sign In</button>
</>
}
>
<div>Authenticated</div>
<div>{user()!.profile.name}</div>
<button onClick={signOut}>Sign Out</button>
</Show>
);
};

test("handles successful sign in", async () => {
let userManagerInstance!: UserManager;

function TestWithUserManager() {
const { userManager } = useSSO();
userManagerInstance = userManager();
return <AuthStateComponent />;
}

const signinRedirectMock = vi.fn(async () => {
await userManagerInstance.events.load(mockUser, true);
});

vi.spyOn(UserManager.prototype, "signinRedirect").mockImplementationOnce(signinRedirectMock);

const { findByText } = render(() => (
<SSOProvider authority={TEST_AUTHORITY} client_id={TEST_CLIENT_ID}>
<TestWithUserManager />
</SSOProvider>
));

expect(userManagerInstance).not.toBeUndefined();

await userEvent.click(await findByText("Sign In"));

expect(signinRedirectMock).toHaveBeenCalled();

await waitFor(async () => {
expect(await findByText("Authenticated")).toBeInTheDocument();
});
});
const AuthStateComponent = () => {
const { user, signIn, signOut } = useSSO();

createEffect(() => {
console.log("auth state user >>>>", user());
});

return (
<Show
when={user()}
fallback={
<>
<div>Not Authenticated</div>
<button onClick={signIn}>Sign In</button>
</>
}
>
<div>Authenticated</div>
<div>{user()!.profile.name}</div>
<button onClick={signOut}>Sign Out</button>
</Show>
);
};

test("handles successful sign in", async () => {
let userManagerInstance!: UserManager;

function TestWithUserManager() {
const { userManager } = useSSO();
userManagerInstance = userManager();
return <AuthStateComponent />;
}

const signinRedirectMock = vi.fn(async () => {
await userManagerInstance.events.load(mockUser, true);
});

vi.spyOn(UserManager.prototype, "signinRedirect").mockImplementationOnce(signinRedirectMock);

const { findByText } = render(() => (
<SSOProvider authority={TEST_AUTHORITY} client_id={TEST_CLIENT_ID}>
<TestWithUserManager />
</SSOProvider>
));

expect(userManagerInstance).not.toBeUndefined();

await userEvent.click(await findByText("Sign In"));

expect(signinRedirectMock).toHaveBeenCalled();

await waitFor(async () => {
expect(await findByText("Authenticated")).toBeInTheDocument();
});
});
So the context summary is, I have two primary things under test: SSOProvider and the useSSO hook. As you can see above, I have an internal test component called AuthStateComponent that is using the useSSO to either show an authenticated or unauthenticated view. The issue is, when I run my test and trigger a user update, the test component does not re-render to show the authenticated view. It always remains in the unauthenticated despite the fact the user has been updated internally within useSSO (I verified this via console logging everything). So that little createEffect log that I have within the test component only ever runs once, outputting a null, and it does not re-run after the user signal updates internally. I'm currently stuck in testing this particular area and can't proceed. Not sure exactly what I'm doing wrong here.
1 Reply
bigmistqke
bigmistqke3w ago
I would do a sanity check and test some code that you know 100% will work. Like counter going up and testEffect checking it. My guess is that something is wrong in the environment.

Did you find this page helpful?