Replies: 1 comment 4 replies
-
|
Your concerns about testing loaders/actions and route components individually are valid. Testing them in isolation can sometimes lead to focusing on implementation details rather than the overall behavior. However, you can approach testing in Remix in a way that balances the need to verify behavior while also ensuring that your loaders/actions and components work as expected. To test both the route (rendering component) and the loader/action together, you can take an integration testing approach. Here’s how you can achieve this: import { render } from "@testing-library/react";
import { setupServer } from "msw/node";
import { handlers } from "../mocks/handlers"; // Your MSW handlers
import { MemoryRouter, Route } from "@remix-run/react";
import MyComponent from "../routes/my-route";
const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test("renders the route with loader data", async () => {
const { getByText } = render(
<MemoryRouter initialEntries={["/my-route"]}>
<Route path="/my-route" element={<MyComponent />} />
</MemoryRouter>
);
// Assuming your loader fetches some data and renders it
expect(getByText("Expected Loader Data")).toBeInTheDocument();
});For more complex interactions, end-to-end testing with Playwright allows you to test the entire route, including the loader/action, in a real browser environment. import { test, expect } from '@playwright/test';
test('full route test', async ({ page }) => {
await page.goto('/my-route');
// Verify loader data is rendered
await expect(page.locator('text=Expected Loader Data')).toBeVisible();
// Simulate user interaction that triggers the action
await page.click('button#do-something');
// Verify the result of the action
await expect(page.locator('text=Expected Action Result')).toBeVisible();
}); |
Beta Was this translation helpful? Give feedback.
-
|
This answer is a month old -- but I don't think MemoryRouter is inside of @remix-run/react. |
Beta Was this translation helpful? Give feedback.
-
|
I created a document that shows how to do unit tests, route tests, and end-to-end testing with Remix. https://github.com/kiliman/remix-vite-template/blob/main/docs/testing.md |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! i'm having possibly a related issue with trying to do the above.. if I ever try to 'stub out the loader' then the route component never renders: (just renders: |
Beta Was this translation helpful? Give feedback.
-
|
Hmm.. not sure. Looks like 
Also, if I use a fake loader, it appears to be rendering it correctly. async function fakeLoader() {
return json({ count: 123 });
}
test("counter increments when clicked", async () => {
const App = createRemixStub([
{
path: "/counter",
Component: Counter,
loader: fakeLoader,
action,
},
]);
await render(<App initialEntries={["/counter"]} />);
console.log(screen.debug());
const button = await screen.findByRole("button", { name: /count:/i });
console.log(button);
});
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm creating tests for my application using @remix-run/testing, Playwright, MSW and React Testing Library. So far, the types of tests I've been able to perform are:
My question is, so far I've been able to test loader/action or a page individually, but I still don't know how to test both together. Is there any way to test an entire route, including the rendering component and the loader/action?
One way I thought of is to test the loader/action and the route component individually, but my fear of testing loader/action individually is that I would be testing implementation, not behavior, as explained in this article
Do my concerns make sense? How do you normally test your Remix applications?
Beta Was this translation helpful? Give feedback.
All reactions