Recommended setup for integration testing components that use telefuncs

[ludwigbacklund]

What would be a good way to setup telefunc for testing React components that use telefuncs? Right now, using react-testing-library and vitest, trying to render a component that imports a .telefunc.ts file results in 👇

You are loading the `telefunc` module in the browser, but the `telefunc` module can only be imported in Node.js.

This makes sense since the code transformation turning the telefunc into a network request isn't run during testing. But this is a problem since these integration tests run in the browser, and we can't run the telefunc there.

Alternatives I can see off the bat:

1. Run the telefunc code transformation during testing (how would I do that?), then mock the network layer to return expected results from the telefunc.
2. Mock the .telefunc.ts file and provide your own function as a replacement for the telefunc, that returns expected results. I tried to get this working but mocking the .telefunc.ts in the test file doesn't work, the component import will still resolve the real telefunc and result in the same error.
3. Somehow actually run the telefunc in a node environment, even though the test was initially started in a browser environment. This option would be most optimal for me if it was possible to do (unlikely?) as I've already set up everything I need (mocks, testing db client) for testing telefunc in a node environment.

Thanks!

[brillout]

Doesn't Vitest allow you to add Telefunc's Vite plugin?

[ludwigbacklund]

Doesn't Vitest allow you to add Telefunc's Vite plugin?

I didn't think about that! I tried it now though and got the same error back.

vitest.config.ts

import { telefunc } from 'telefunc/vite';

...

export default defineConfig({
  plugins: [react(), tsconfigPaths(), telefunc()],
  ...
});

👇

Error: [[email protected]][Wrong Usage] You are loading the `telefunc` module in the browser, but the `telefunc` module can only be imported in Node.js.

[brillout]

Hm. Normally, Telefunc's transformer should remove all .telefunc.js imports. Can you dig why that doesn't seem to happen?

[ludwigbacklund]

I tried running the test with DEBUG=vite:* but I'm not sure what it is supposed to look like when it is working, I've never really worked with vite before. If you have time to take a peek you can find a reproduction repo here: https://github.com/ludwigbacklund/telefunc-vite-plugin-bug-repro

yarn test and you'll see it

[brillout]

I'll have a look at it later today.

[brillout]

You want Vitest to run components/TodoList.test.tsx as if it was in the browser, correct?

It seems like Vitest loads components/TodoList.test.tsx as a server-side module (and that's why Telefunc thinks that components/TodoList.test.tsx is a server-side module). Can Vitest be configured to load test files as browser-side modules? FYI there was some work recently about adding browser support to Vitest, see this tweet.

[ludwigbacklund]

Can Vitest be configured to load test files as browser-side modules?

Running vitest with the jsdom or happy-dom environment should simulate being in a browser, like jest does. That's why I'm getting the You are loading the telefunc module in the browser... error. But maybe you mean then that when the telefunc plugin is running, it still acts as if it were running server-side? In that case, maybe it is possible in the plugin code to check what test environment (jsdom, happy-dom) it is being run under, and change the plugin behaviour based on that. Or just the fact that typeof window !== 'undefined'.

[brillout]

The problem is that Telefunc's Vite plugin believes the file should be transformed for the server-side.

Also package.json#exports of your dependencies will be wrongly resolved.

Have you tried Vitest's newly released browser mode? Curious to know whether it works. If it does then I think it should be Telefunc's official recommendation for testing telefunctions.

[ludwigbacklund]

Hmm, that's a real bummer.

I tried the vitest browser mode but couldn't get it to work, it just opened up a blank browser window that did nothing. Regardless, I don't think I'd want to use a browser mode for integration tests since my E2E tests already do that and I want these tests to run faster, and without the overhead of having to launch a browser (which is more of a pain in CI as well).

It's very unfortunate if that would have to be the only way to deal with this, having to shape the testing strategy of a whole application around one package isn't ideal. I really like what you've done with telefunc and the simplicity of using it so if you get an idea for a different way of dealing with this at some point, I'd be glad to hear it :)

[brillout]

I share the longing for quick unit tests.

I recommend to use a real browser environement because, otherwise, you'll may run into a mirad of subtle but profound issues that aren't easy to fix. Not only with Telefunc but with many if not most libraries.

Spinning off a playwright process is actually quick. So I'm thinking it may/should be possible to use playwright for running unit tests in a fast manner. (FYI I've implemented a custom E2E test runner directly using esbuild and playwright and I'm very happy with it and it's fast. It's an internal tool and does E2E tests so it isn't suitable for you, but it does show that playwright in itself is fast.)

So, I'd recommend to try Vitest's new browser mode again. FYI @Aslemammad who authored Vitest's browser mode is a Telefunc contributor. He also seems to be open about feedback about his browser mode implementation.

Alternatively, since you do SSR, you can run your component unit tests in Node.js in order to simulate a server-side render. But the problem with that is that you won't be able to test your component states (since SSR is stateless) nor will you be able to test mutations / telefunction calls.

I really like what you've done with telefunc and the simplicity of using it

I'm glad you like it. Btw. in case you think you can convince your company: https://github.com/sponsors/brillout. Sponsors are starting to make a tremendous impact.

[Aslemammad]

Actually, browser mode suits this case, I'm happy to help telefunc users in this case, if there's any issue with the vitest browser mode, please feel free to create a ticket so I'd put time into it.

[brillout]

Let's track progress on documentation at #104.