@truedat/test 8.12.6 → 8.12.8

package/README.md

@@ -1,3 +1,16 @@
 # Truedat Web Test
 
 Testing support for Truedat Web Modules.
+
+Use `renderWithIntl` from `@truedat/test/renderWithIntl` for components that only
+need internationalization. It accepts `locale`, `messages` keyed by locale, and
+Testing Library render options. Pass `fallback` to add a Suspense boundary for
+components that suspend. It does not install fake timers; configure timers and
+the clock explicitly in tests that need them.
+
+Import `waitForLoad` from `@truedat/test/waitForLoad` when a component has loading
+indicators. This standalone helper does not mount providers or install timers.
+
+Use Testing Library's plain `render` for components without provider dependencies.
+Use `render` from `@truedat/test/render` when tests need the full Redux, Apollo,
+router, and internationalization setup.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/test",
-  "version": "8.12.6",
+  "version": "8.12.8",
   "description": "Truedat Web Test",
   "sideEffects": false,
   "module": "src/index.js",
@@ -66,5 +66,5 @@
   "dependencies": {
     "react-router": "^8.3.0"
   },
-  "gitHead": "fe7375c2d3c6ebdaf3dacd985f56433eda477712"
+  "gitHead": "682b801555be3f898e0502fd70a48ea32110c327"
 }

package/src/__tests__/render.spec.js

@@ -1,33 +1,58 @@
-import { screen, waitFor } from "@testing-library/react";
+import { lazy } from "react";
+import { MockedProvider } from "@apollo/client/testing";
+import { configureStore } from "@reduxjs/toolkit";
+import { screen } from "@testing-library/react";
+import { FormattedMessage } from "react-intl";
+import { Provider } from "react-redux";
+import { MemoryRouter } from "react-router";
 import { render, waitForLoad } from "../render";
+import { renderWithIntl } from "../renderWithIntl";
 
-describe("render utility", () => {
-  it("renders components with default options", () => {
-    const TestComponent = () => <div>Test Component</div>;
-    render(<TestComponent />);
-    expect(screen.getByText("Test Component")).toBeInTheDocument();
-  });
-
-  it("provides redux store with initial state", () => {
-    const initialState = { user: { name: "Test User" } };
-    const TestComponent = () => {
-      return <div>State Test</div>;
-    };
+jest.mock("@apollo/client/testing", () => ({
+  MockedProvider: jest.fn(({ children }) => children),
+}));
+jest.mock("@reduxjs/toolkit", () => ({
+  configureStore: jest.fn(() => ({ dispatch: jest.fn() })),
+}));
+jest.mock("react-redux", () => ({
+  Provider: jest.fn(({ children }) => children),
+}));
+jest.mock("react-router", () => ({
+  MemoryRouter: jest.fn(({ children }) => children),
+}));
 
-    render(<TestComponent />, { state: initialState });
-    expect(screen.getByText("State Test")).toBeInTheDocument();
-  });
+describe("render utility", () => {
+  it("configures its providers and renders the component", () => {
+    const state = { user: { name: "Test User" } };
+    const reducer = (currentState) => currentState;
+    const routes = ["/test-route"];
+    const mocks = [];
+    const dispatch = jest.fn();
 
-  it("handles routing with MemoryRouter", () => {
-    const TestComponent = () => <div>Route Test</div>;
-    render(<TestComponent />, { routes: ["/test-route"] });
-    expect(screen.getByText("Route Test")).toBeInTheDocument();
-  });
+    render(<div>Test Component</div>, {
+      state,
+      reducer,
+      routes,
+      routeIndex: 0,
+      mocks,
+      dispatch,
+    });
 
-  it("handles Apollo mocks", async () => {
-    const TestComponent = () => <div>Apollo Test</div>;
-    render(<TestComponent />, { mocks: [] });
-    expect(screen.getByText("Apollo Test")).toBeInTheDocument();
+    expect(configureStore).toHaveBeenCalledWith({
+      preloadedState: state,
+      reducer,
+    });
+    expect(configureStore.mock.results[0].value.dispatch).toBe(dispatch);
+    expect(MemoryRouter.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ initialEntries: routes, initialIndex: 0 }),
+    );
+    expect(Provider.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ store: configureStore.mock.results[0].value }),
+    );
+    expect(MockedProvider.mock.calls[0][0]).toEqual(
+      expect.objectContaining({ mocks, addTypename: false }),
+    );
+    expect(screen.getByText("Test Component")).toBeInTheDocument();
   });
 
   describe("waitForLoad", () => {
@@ -42,6 +67,7 @@ describe("render utility", () => {
       );
 
       const renderResult = render(<TestComponent />);
+      const defaultReducer = configureStore.mock.calls.at(-1)[0].reducer;
 
       // Simulate loader disappearing
       setTimeout(() => {
@@ -50,7 +76,25 @@ describe("render utility", () => {
       }, 100);
 
       await waitForLoad(renderResult);
+      expect(defaultReducer({ ready: true })).toEqual({ ready: true });
       expect(screen.getByText("Content")).toBeInTheDocument();
     });
   });
 });
+
+describe("renderWithIntl", () => {
+  it("keeps the Suspense boundary and messages when rerendering", async () => {
+    const LazyMessage = lazy(async () => ({
+      default: () => <FormattedMessage id="ready" />,
+    }));
+    const rendered = renderWithIntl(<div>Initial</div>, {
+      messages: { en: { ready: "Ready" } },
+      fallback: <div>Loading</div>,
+    });
+
+    rendered.rerender(<LazyMessage />);
+
+    expect(rendered.getByText("Loading")).toBeInTheDocument();
+    expect(await rendered.findByText("Ready")).toBeInTheDocument();
+  });
+});

package/src/render.js

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import { MockedProvider } from "@apollo/client/testing";
-import { render, waitFor } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { IntlProvider } from "react-intl";
 import { configureStore } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
@@ -82,16 +82,5 @@ const customRender = (
   return render(component, { wrapper: Wrapper, ...renderOptions });
 };
 
-export const waitForLoad = async (
-  { container, queryByText },
-  fallback = /loading/i,
-  options,
-) => {
-  await waitFor(() => {
-    if (fallback) expect(queryByText(fallback)).not.toBeInTheDocument();
-    expect(container.querySelector(".loader")).not.toBeInTheDocument();
-    expect(container.querySelector(".loading")).not.toBeInTheDocument();
-  }, options);
-};
-
+export { waitForLoad } from "./waitForLoad";
 export { customRender as render };

package/src/renderWithIntl.js

@@ -0,0 +1,28 @@
+import { Suspense } from "react";
+import { render } from "@testing-library/react";
+import { IntlProvider } from "react-intl";
+
+export const renderWithIntl = (
+  component,
+  { locale = "en", messages = { en: {} }, fallback, ...renderOptions } = {},
+) => {
+  // eslint-disable-next-line react/prop-types
+  function Wrapper({ children }) {
+    return (
+      <IntlProvider
+        onError={() => {}}
+        locale={locale}
+        defaultLocale={locale}
+        messages={messages[locale]}
+      >
+        {fallback === undefined ? (
+          children
+        ) : (
+          <Suspense fallback={fallback}>{children}</Suspense>
+        )}
+      </IntlProvider>
+    );
+  }
+
+  return render(component, { wrapper: Wrapper, ...renderOptions });
+};

package/src/waitForLoad.js

@@ -0,0 +1,13 @@
+import { waitFor } from "@testing-library/react";
+
+export const waitForLoad = async (
+  { container, queryByText },
+  fallback = /loading/i,
+  options,
+) => {
+  await waitFor(() => {
+    if (fallback) expect(queryByText(fallback)).not.toBeInTheDocument();
+    expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    expect(container.querySelector(".loading")).not.toBeInTheDocument();
+  }, options);
+};