Continue Logo
bdougie/testing-react icon
public
Published on 4/24/2025
bdougie/testing-react

Rules

Rules for Testing JavaScript and React Applications

Drawing from the content and philosophy of [TestingJavaScript.com][1][3][2], as well as established industry best practices, here are clear cursor rules to guide coding agents on how to test JavaScript and React applications effectively.

General JavaScript Testing Rules

  • Test Behavior, Not Implementation

    • Write tests that focus on the observable behavior of your code, not its internal implementation or private variables. This ensures your tests remain robust even as the code evolves[10][7].

  • Keep Tests Small and Focused

    • Each test should cover a single scenario or behavior. Avoid writing tests that try to verify multiple things at once[4].

  • Use Descriptive Test Names

    • Name your tests so that anyone can understand what is being tested and why. Good names improve test readability and maintainability[4][8].

  • Organize Tests by Type and Feature

    • Group related tests together (unit, integration, end-to-end) and structure them to reflect your application's features[4].

  • Mock External Dependencies Only When Necessary

    • Use mocks and stubs to isolate the unit under test, but avoid over-mocking. Prefer real implementations when possible to keep tests meaningful and less brittle[8][10].

  • Maintain Test Code Quality

    • Treat test code as production code: keep it clean, organized, and up-to-date[4][6].

React Application Testing Rules

  • Test Components as Users Would Use Them

    • Use tools like React Testing Library to test the behavior of components from the user's perspective, interacting with the DOM as a user would. Avoid testing internal component state or methods directly[5][7][9].

  • Prefer Queries Based on Accessible Attributes

    • When selecting elements in tests, use queries that reflect how users interact (e.g., by label text, role, or placeholder) rather than brittle selectors like CSS classes or IDs[9].

  • Use the Arrange-Act-Assert (AAA) Pattern

    • Structure each test to first arrange the environment, then act (perform user interaction or trigger logic), and finally assert the expected outcome[7].

  • Write Unit, Integration, and End-to-End Tests

    • Unit tests: Test individual functions or components in isolation.
    • Integration tests: Test how multiple components or modules work together.
    • End-to-end tests: Simulate real user workflows in a browser environment[5].

  • Use Jest and React Testing Library for Unit and Component Tests

    • Jest is the recommended test runner and assertion library for React apps. Use React Testing Library for rendering and interacting with components in tests[5].

  • Automate and Run Tests Regularly

    • Integrate tests into your development workflow and CI/CD pipelines to catch regressions early[4][6].

Common Anti-Patterns to Avoid

  • Don’t Test Private/Internal Implementation Details

    • Testing internal logic makes tests brittle and harder to maintain[10][7].

  • Don’t Overuse Mocks or Test Helpers

    • Excessive mocking can make tests less reliable and harder to understand[8][10].

  • Don’t Rely on Unstable Selectors

    • Avoid querying elements by CSS classes or IDs that may change with design updates; use data attributes or accessible queries instead[9].

  • USE VITEST INSTEAD OF JEST ALWAYS

Summary Table

| Rule | Rationale/Example | |-----------------------------------------------|-----------------------------------------------------------------------------------| | Test behavior, not implementation | Focus on what the user sees, not how it’s built[10][7] | | Use user-centric queries in React tests | getByText, getByRole over .className[9] | | Keep tests small, focused, and descriptive | Easier to maintain and debug[4][8] | | Use Arrange-Act-Assert pattern | Improves clarity and structure[7] | | Automate and run tests regularly | Detects regressions early[4][6] | | Avoid over-mocking and unstable selectors | Keeps tests robust and meaningful[8][9][10] |

By following these cursor rules, coding agents can ensure their JavaScript and React application tests are robust, maintainable, and focused on delivering real value to users and developers alike.[1][3][2][4][5][6][7][8][9][10]

Sources [1] www.testingjavascript.com https://www.testingjavascript.com [2] Testing JavaScript | Testing JavaScript https://www.testingjavascript.com/ [3] Testing JavaScript | Testing JavaScript https://www.testingjavascript.com [4] How to Test JavaScript Applications: Tools, Techniques, and Best ... https://codedamn.com/news/programming/test-javascript-applications-tools-techniques [5] How to test React Apps - BrowserStack https://www.browserstack.com/guide/how-to-test-react-apps [6] Testing in JavaScript: Best Practices and Tools - DEV Community https://dev.to/mattryanmtl/testing-in-javascript-best-practices-and-tools-4bkb [7] Testing React Components: Best Practices and Tools - LinkedIn https://www.linkedin.com/pulse/testing-react-components-best-practices-tools-alex-lomia [8] Javascript Unit Testing Best Practices to Follow - BrowserStack https://www.browserstack.com/guide/javascript-testing-best-practices [9] goldbergyoni/javascript-testing-best-practices - GitHub https://github.com/goldbergyoni/javascript-testing-best-practices [10] 13 JavaScript Testing Best Practices You Should Know [2025] https://www.lambdatest.com/blog/javascript-testing-best-practices-you-should-know/ [11] Testing JavaScript Applications | <Blog /> - Colin Brooks https://colinrobertbrooks.github.io/blog/testing-javascript-applications/ [12] How to properly test react applications? What are the best ways to ... https://www.reddit.com/r/reactjs/comments/17kfmuf/how_to_properly_test_react_applications_what_are/ [13] Effective Testing in JavaScript | AppSignal Blog https://blog.appsignal.com/2024/05/08/effective-testing-in-javascript.html [14] React Functional Testing Best Practices - Daily.dev https://daily.dev/blog/react-functional-testing-best-practices [15] How to properly learn testing in JavaScript/TypeScript in 2022 - Reddit https://www.reddit.com/r/reactjs/comments/y4qbap/how_to_properly_learn_testing_in/ [16] How to properly unit test a React component? - Stack Overflow https://stackoverflow.com/questions/38815439/how-to-properly-unit-test-a-react-component [17] JavaScript Unit Testing Tutorial | BrowserStack https://www.browserstack.com/guide/unit-testing-in-javascript [18] React Testing for Beginners: Start Here! - YouTube https://www.youtube.com/watch?v=8Xwq35cPwYg [19] Testing Your JavaScript: Best Practices for Robust Applications. https://dev.to/dharamgfx/testing-your-javascript-best-practices-for-robust-applications-428a [20] Testing React Apps - Jest https://jestjs.io/docs/tutorial-react [21] JavaScript testing: 9 best practices to learn - LogRocket Blog https://blog.logrocket.com/javascript-testing-best-practices/ [22] Best practices for writing good unit tests for components? : r/reactjs https://www.reddit.com/r/reactjs/comments/wqy6rz/best_practices_for_writing_good_unit_tests_for/ [23] How to quickly test some javascript code? [closed] - Stack Overflow https://stackoverflow.com/questions/8869783/how-to-quickly-test-some-javascript-code