Skip to content

Add render test helper to follow suggested Redux testing practices #1392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
zetter-rpf wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Add render test helper to follow suggested Redux testing practices #1392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cc18563
test(save-button): reduce Redux setup boilerplate
cursoragent Mar 18, 2026
9067974
test(save-button): use a real Redux Toolkit store
cursoragent Mar 18, 2026
f4b9792
test(utils): add shared renderWithProviders helper
cursoragent Mar 18, 2026
179d072
test(save-button): inline shared renderWithProviders usage
cursoragent Mar 18, 2026
e32d54b
test(save-button): rename state fixtures to preloadedState
cursoragent Mar 18, 2026
ff165ec
test(save-button): fix lint warnings in setup blocks
cursoragent Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 31 additions & 67 deletions src/components/SaveButton/SaveButton.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";
import { triggerSave } from "../../redux/EditorSlice";
import { fireEvent, screen } from "@testing-library/react";
import renderWithProviders from "../../utils/renderWithProviders";
import SaveButton from "./SaveButton";

const logInHandler = jest.fn();
Expand All @@ -17,9 +15,7 @@ describe("When project is loaded", () => {

describe("who doesn't own the project", () => {
beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = {
const preloadedState = {
editor: {
loading: "success",
webComponent: true,
Expand All @@ -36,12 +32,9 @@ describe("When project is loaded", () => {
},
},
};
store = mockStore(initialState);
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
({ store } = renderWithProviders(<SaveButton />, {
preloadedState,
}));
});

test("Save button renders", () => {
Expand All @@ -54,10 +47,10 @@ describe("When project is loaded", () => {
).not.toBeInTheDocument();
});

test("Clicking save dispatches trigger save action", () => {
test("Clicking save updates the save-triggered state", () => {
const saveButton = screen.queryByText("header.save");
fireEvent.click(saveButton);
expect(store.getActions()).toEqual([triggerSave()]);
expect(store.getState().editor.saveTriggered).toBe(true);
});

test("Clicking save triggers a logInHandler event", () => {
Expand All @@ -69,9 +62,7 @@ describe("When project is loaded", () => {

describe("who does own the project", () => {
beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = {
const preloadedState = {
editor: {
loading: "success",
webComponent: true,
Expand All @@ -88,12 +79,9 @@ describe("When project is loaded", () => {
},
},
};
store = mockStore(initialState);
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
({ store } = renderWithProviders(<SaveButton />, {
preloadedState,
}));
});

test("Does not render save button", () => {
Expand All @@ -112,21 +100,16 @@ describe("When project is loaded", () => {
let store;

beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = {
const preloadedState = {
editor: {
loading: "success",
webComponent: false,
},
auth: {},
};
store = mockStore(initialState);
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
({ store } = renderWithProviders(<SaveButton />, {
preloadedState,
}));
});

test("Login to save button renders", () => {
Expand All @@ -137,10 +120,10 @@ describe("When project is loaded", () => {
expect(screen.queryByText("header.save")).not.toBeInTheDocument();
});

test("Clicking save dispatches trigger save action", () => {
test("Clicking save updates the save-triggered state", () => {
const saveButton = screen.queryByText("header.loginToSave");
fireEvent.click(saveButton);
expect(store.getActions()).toEqual([triggerSave()]);
expect(store.getState().editor.saveTriggered).toBe(true);
});

test("Clicking save triggers a logInHandler event", () => {
Expand All @@ -151,24 +134,17 @@ describe("When project is loaded", () => {
});

describe("with webComponent=false", () => {
let store;

beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = {
const preloadedState = {
editor: {
loading: "success",
webComponent: false,
},
auth: {},
};
store = mockStore(initialState);
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
renderWithProviders(<SaveButton />, {
preloadedState,
});
});

test("Renders a secondary button", () => {
Expand All @@ -178,24 +154,17 @@ describe("When project is loaded", () => {
});

describe("with webComponent=true", () => {
let store;

beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const initialState = {
const preloadedState = {
editor: {
loading: "success",
webComponent: true,
},
auth: {},
};
store = mockStore(initialState);
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
renderWithProviders(<SaveButton />, {
preloadedState,
});
});

test("Renders a primary button", () => {
Expand All @@ -211,17 +180,12 @@ describe("When project is loaded", () => {

describe("When project is not loaded", () => {
beforeEach(() => {
const middlewares = [];
const mockStore = configureStore(middlewares);
const store = mockStore({
editor: {},
auth: {},
renderWithProviders(<SaveButton />, {
preloadedState: {
editor: {},
auth: {},
},
});
render(
<Provider store={store}>
<SaveButton />
</Provider>,
);
});

test("Does not render a login to save button", () => {
Expand Down
23 changes: 23 additions & 0 deletions src/utils/renderWithProviders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import { render } from "@testing-library/react";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../redux/RootSlice";

const renderWithProviders = (
ui,
{ preloadedState, store, reducer = rootReducer, ...renderOptions } = {},
) => {
const testStore = store || configureStore({ reducer, preloadedState });
Copy link
Contributor Author

@zetter-rpf zetter-rpf Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the redux example, it set up the apps root store instead of using configure store.

I want to look at this again to see if we can follow that pattern - this would mean that tests would use the same initial store as the app which might mean less setup


const Wrapper = ({ children }) => (
<Provider store={testStore}>{children}</Provider>
);

return {
store: testStore,
...render(ui, { wrapper: Wrapper, ...renderOptions }),
};
};

export default renderWithProviders;
Loading