Skip to content

fix: make bindActionCreators thunk example runnable#310

Open
narutamaaurum wants to merge 2 commits into
piotrwitek:masterfrom
narutamaaurum:fix-212-bind-action-creators
Open

fix: make bindActionCreators thunk example runnable#310
narutamaaurum wants to merge 2 commits into
piotrwitek:masterfrom
narutamaaurum:fix-212-bind-action-creators

Conversation

@narutamaaurum

Copy link
Copy Markdown

Summary

  • add redux-thunk to the playground store middleware chain so the delayed counter example can dispatch thunks at runtime
  • add a regression test covering the FCCounterConnectedBindActionCreators increment flow

Validation

  • cd playground && export CI=true && npm test -- --runInBand --watch=false src/connected/fc-counter-connected-bind-action-creators.spec.tsx
  • cd playground && npm run tsc
  • cd playground && npx eslint src/store/store.ts src/connected/fc-counter-connected-bind-action-creators.spec.tsx

Closes #212

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request introduces a new test suite for the connected counter component and integrates redux-thunk middleware into the global store. The review feedback suggests several improvements to the test file, including replacing the any type in the mock reducer with a more specific action type, removing redundant cleanup() calls that are automatically handled by the testing library, and adopting more idiomatic screen.getByText assertions for better clarity and robustness.


const reducer = combineReducers({
counters: combineReducers({
reduxCounter: (state: number = 0, action: any) => {

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

Using any for the action parameter in the reducer disables type checking. It is recommended to use a more specific type, such as RootAction from MyTypes or at least { type: string }, to maintain type safety even in test mocks.

Suggested change
reduxCounter: (state: number = 0, action: any) => {
reduxCounter: (state: number = 0, action: { type: string }) => {

Comment on lines +23 to +26
afterEach(() => {
jest.useRealTimers();
cleanup();
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

The cleanup() call is redundant because @testing-library/react automatically performs cleanup after each test when used with Jest. This block can be simplified.

afterEach(() => {
  jest.useRealTimers();
});

renderWithRedux(<ConnectedCounter label={label} />);

fireEvent.click(screen.getByText('Increment'));
expect(screen.getByText(RegExp(label)).textContent).toBe(label + ': 0');

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

Using screen.getByText with a template literal is more direct and idiomatic than using a regex and checking textContent separately. Since getByText throws if the text is not found, the assertion is also more robust.

Suggested change
expect(screen.getByText(RegExp(label)).textContent).toBe(label + ': 0');
expect(screen.getByText(`${label}: 0`)).toBeDefined();

jest.advanceTimersByTime(1000);
});

expect(screen.getByText(RegExp(label)).textContent).toBe(label + ': 1');

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

Similar to the previous assertion, using a direct string match with screen.getByText is preferred for clarity and precision.

Suggested change
expect(screen.getByText(RegExp(label)).textContent).toBe(label + ': 1');
expect(screen.getByText(`${label}: 1`)).toBeDefined();

@narutamaaurum

narutamaaurum commented May 23, 2026

Copy link
Copy Markdown
Author

Addressed the review suggestions in 9d36ac4. The regression spec now uses AnyAction instead of any, drops the redundant explicit cleanup(), and switches to direct screen.getByText assertions while keeping the thunk timing check intact. Validation: CI=true npm test -- --runTestsByPath src/connected/fc-counter-connected-bind-action-creators.spec.tsx --watch=false and npm run tsc -- --noEmit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

'fc-counter-connected-bind-action-creators.usage' component cannot work

1 participant