Wasp•4mo ago

Unit testing

Hello, Are there any recommended ways for integrating unit testing in a Wasp project? I do have e2e tests via Playwright following the OpenSaaS template approach, but they're slow and expensive to maintain. I'd like to add a layer of unit tests but I don't know if there is any recommended way to do it with Wasp

3 Replies

kapa.ai•4mo ago

Hi @Sergio Visinoni. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Wasp currently provides good support for unit testing on the frontend, but not yet for backend code. Frontend Unit Testing:
Wasp projects use Vitest for unit and component testing. You can write standard unit tests for your frontend logic (e.g., utility functions, React components) using Vitest and Testing Library. Place your test files in the src directory with .test.js, .test.ts, .test.jsx, or .test.tsx extensions. For example:

// src/helpers.js
export function areThereAnyTasks(tasks) {
  return tasks.length === 0;
}

// src/helpers.test.js
import { test, expect } from "vitest";
import { areThereAnyTasks } from "./helpers";

test("areThereAnyTasks", () => {
  expect(areThereAnyTasks([])).toBe(false);
});

// src/helpers.js
export function areThereAnyTasks(tasks) {
  return tasks.length === 0;
}

// src/helpers.test.js
import { test, expect } from "vitest";
import { areThereAnyTasks } from "./helpers";

test("areThereAnyTasks", () => {
  expect(areThereAnyTasks([])).toBe(false);
});

To run your tests, use:

wasp test client

wasp test client

or for a single run:

wasp test client run

wasp test client run

You can also use --ui for a visual interface. All arguments after wasp test client are passed to the Vitest CLI, so you can use any Vitest options you need.
See more in the docs Mocking APIs and Queries:
Wasp provides helpers like mockServer, mockQuery, and mockApi to mock backend data in your frontend/component tests. This allows you to test components in isolation without relying on real backend responses.
See React testing helpers Backend Unit Testing:
Currently, Wasp does not provide first-class support for backend/server-side unit testing. The recommended approach is to extract your business logic into pure functions or helpers and test those using your preferred testing framework (e.g., Vitest, Jest) as you would in any Node.js project. You can add your own test setup in package.json if needed.
See discussion and docs Summary:
- Frontend: Use Vitest and Wasp's helpers for unit/component tests. - Backend: Extract logic to pure functions and test with your preferred framework; no built-in support yet. - e2e: Playwright or similar tools are used for end-to-end tests, but these are slower and more expensive, as you noted. If you need examples or further guidance on setting up frontend unit tests, the Wasp testing documentation provides sample code and best practices. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sergio Visinoni, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

toticozeni•4mo ago

Hello @Sergio Visinoni, you can pick out anything that works for you for unit testing yourself and install it in your wasp project. Vitest is a good option. Currently, we don't provide any tooling around unit testing. But we want to make E2E headless testing easier in future, and we will have tools for that.

Sergio VisinoniOP•4mo ago

Thanks @toticozeni , noted

Gaming

Programming

Unit testing

Did you find this page helpful?