Asking and/or suggesting best practices on how to test Signals

[cafesanu]

Hey there! Just wanted to start by saying I'm really liking the simplicity of this library – it's pretty cool.

I've been on a bit of a hunt online trying to find some best practices for testing signals, but no luck finding anything official. Got any tips or resources you could share?

We're in the process of checking out Jotai and Signals, considering a move away from Redux Toolkit. We're really into how straightforward Signals are, but hitting a bit of a snag with the lack of testing guidance.

Our packages for this exploration includes React 18, Testing Library, @preact/signals-react, and @preact/signals-react-transform.

Here’s what we’ve found and been thinking about:

• We know mocks are an option, but we're trying to steer clear of them as much as possible, keeping in line with Testing Library's spirit.
• The simplest method seems to be just tweaking the signal directly, like theSignal.value = "something", but it ends up affecting all tests in that file. We can reset the signal with a beforeEach for each test, but this seems cumbersome and not scalable. We are curious if there's a better way to handle it.
• Not here to compare libraries, just sharing some thoughts:
  • Jotai has this Provider setup for testing, detailed nicely here: Jotai Testing Guide, which is super handy for plugging in whatever values and letting Jotai do its thing.
  • Redux Toolkit uses a similar approach with its Provider.

In a nut shell, setting it up in redux or Jotai looks something like this:

// Pseudocode...
import { render } from "@testing-library/react";
...
render(
   <Provider fakeState={fakeState}>
      <ComponentToTest />
    <Provider />
);

• Wondering if there is anything similar in this library? Or even if not, wondering what is the official recommendation
• More that an answer here on how to do it for my case, I would love an official way on how to do this, regarless of how similar or different it is compared with the examples I gave.
• If there is no official way or this has not been thought, I would like to suggest a similar approach to the Provider. This way, each test is completely isolated white having an easy way to pass testing values to atoms.

Thank you! Love your project ❤❤❤

[rschristian]

You can just use the Context API directly, you don't need the lib to export a provider itself. User code works just fine.

There isn't an official recommendation, testing is very diverse. Use whatever works best for you & your team.

[cafesanu]

Hey @rschristian thanks for your prompt response. Sorry I meant to put this in discussions..

You can just use the Context API directly

I'm not sure I follow you. What do you mean by using Context here. Yeah I can create a Context, but I'm not following on how this would make sure the signal is isolated and not affecting other tests.

Use whatever works best for you

Well, that's the issue. I have not found a way other that using mocks (not good) or adding a beforeEach to save initial value and an after Each to restore it, also, not good.

Totally agree that tests are diverse, but some guidance would truly help on how to isolate signals that are imported in a hook/component during testing. I took a looks at the tests here in signal cores, but each test creates the signal inside the test, which makes sense since you are testing the library itself. But a real case scenario is using them within components that import signals and having multiple tests for that component. This breaks testing as signals are not isolated.

Since you folks are the experts, would love some guidance on how to achieve this.

Thanks again! 😊

[rschristian]

You could isolate by passing in a signal, then using Context to make it available to the rest of your app.

// app.js
const AppState = createContext(signal(0));

export function App(props) {
    return (
        <AppState.Provider value={props.signal}>
            ...
        </AppState.Provider>
    );
}

// test.js
test('should display initial count', () => {
    const { container } = render(<App signal={signal(5)} />);
    ...
});