A. 1. 测试标题应采用 '当 {情况/场景} 时，那么 {某些期望}' 的模式，例如，'当添加有效订单时，那么它应该可以被检索' #customize
A. 3. 语句和表达式不超过 10 个。不要将单个表达式拆分成多行来计数 #customize
A. 4. 如果准备阶段的某些数据在断言阶段被使用，不要重复这些值。相反，直接引用准备好的数据——这形成了一个闭环，向读者展示了准备阶段的 🔫 确凿证据如何导致断言中的结果。示例：使用 expect(result.id).toBe(activeOrder.id)，而不是 expect(result.id).toBe('123')
A. 5. 测试应至少包含三个阶段：准备、执行和断言。要么在测试中存在这些阶段名称，要么在第二阶段和第三阶段之前必须有换行符
A. 10. 断言不超过 3 个
A. 13. 完全扁平化，没有 try-catch、循环、注释、console.log
A. 15. 🥨 面包屑原则：重要：任何直接影响测试的东西都应该直接存在于测试中（例如，将在断言阶段被检查的数据）。如果某些东西可能隐式地影响测试，它应该存在于本地测试钩子中（例如，在 beforeEach 中模拟身份验证，而不是在外部设置中）。避免外部设置文件带来的隐藏影响
A.18. 为了获得愉快的测试体验，确保所有变量都隐式或显式地进行了类型标注。不要使用 'any' 类型。如果需要构造一个故意无效的输入，请使用 'myIllegalObject as unknown as LegalType'
🇺🇸English
Testing Rules for AI
You're a testing expert that is keen to keep the tests simple, clean, consistent and short. Here is a list of best practices to follow. When you find some issues in a test, mention the violated bullet number
These rules are not applicable to end-to-end tests that spans multiple processes and components, only for unit, integration, component, Microservice, API tests. If you realize tests that don't mock the backend, these are end-to-end tests, in this case apply the rules from references/e2e-testing-rules.md
The 6 most important (!) rules:
Tests must never become another system to maintain, so we keep its complexity ridiculously low. Building a super simple reading experience is a top priority. Always stop coding a test if you can't follow these rules. While all rules in this document are mandatory, these 6 are absolutely critical:
Important: The test should have no more than 10 statements #customize
Important: Like a good story, the test should contain no unnecessary details, yet include all details that directly affect the test result
Important: Anything beside flat statements is not allowed - no if/else, no loops, no try-catch, no console.log
Important: Given the test scope, it should COVER all the layers of the code under test (e.g., frontend page, backend Microservice). In other words, never mock INTERNAL parts of the application, only pieces that make calls to external systems
🔫 The smoking gun principle: Important: Each data or assumption in the assertion/expectation phase, must appear first in the arrange phase to make the result and cause clear to the reader
Important: Each test that is self-contained and never relies on other tests state or generated artifacts. Consequently, if a test depends on any state, it should create it itself or ensure it was created in a hook
Section A - The Test Structure
A. 1. The test title should have the pattern of 'When {case/scenario}, then {some expectation}', For example, 'When adding a valid order, then it should be retrievable' #customize
A. 3. No more than 10 statements and expressions. Don't count a single expression that was broken to multiple lines #customize
A. 4. If some data from the arrange phase is used in the assert phase, don't duplicate values. Instead, reference the arranged data directly - this closes the loop showing the reader how the 🔫 smoking gun from the arrange phase leads to the result in the assertion. Example: Use not
A. 5. A test should have at least three phases: Arrange, Act and Assert. Either the phase names exist in the test or a line break must appear before the 2nd and 3rd phases
A. 10. No more than 3 assertions
A. 13. Totally flat, no try-catch, no loops, no comments, no console.log
A. 15. 🥨 The breadcrumb principle: Important: Anything that affects a test directly should exist directly in the test (e.g., a data that will get checked in the assert phase). If something implicitly might affect the test, it should exist in a local test hook (e.g., mock authentication in beforeEach, not in external setup). Avoid hidden effects from extraneous setup files
A.18. For a delightful test experience, ensure all variables are typed implicitly or explicitly. Don't use 'any' type. Should you need to craft a deliberately invalid input, use 'myIllegalObject as unknown as LegalType'
A.23. For clarity, assertions should exist only inside test and never inside helpers or hooks
A.25. Assertions should exist only in the /Assert phase, never in start or middle of a test
A.28. If some specific arrangement demands 3 or more lines, move into a function in the /test/helpers folder. It's OK if the overall Arrange is more than 2 lines, only if specific setup that aims to achieve one thing grabs 3 or more lines - it should be extracted to a helper file
Section B - The Test Logic
B. 3. 🔫 The smoking gun principle: Important: Each data or assumption in the assertion phase, must appear first in the arrange phase to make the result and cause clear to the reader
B. 5. Details that are not directly related with understanding the test result, should not be part of the test
B. 10. There should be no redundant assertions
B. 15. Don't assert and compare huge datasets but rather focus on a specific topic or area in a test
B. 20. If a test assumes the existence of some records/data, it must create it upfront in the Arrange phase
B. 23. Don't test implementation details. Mention this issue only if seeing assertions that check internal implementation and not user-facing behavior like screen elements
B. 25. Avoid any time-based waiting like setTimeout or page.waitForTimeout(2000)
B. 28. Clean up before each test (beforeEach) anything that might leak between tests: mocks, environment variables, local storage, globals, and other resources that make tests step on each other's toes
Section C - The Test Data
C.3. Data like JSON and entities should come from a data factory in the data folder. Each type of data should have its own data factory file with a main function to build the entity (e.g., buildOrder, buildUser)
C.4. The factory function should return default data but also allow the caller to provide overrides to specific fields, this way each test can modify specific field values
C.5. When setting a common universal data in a field like dates, addresses or anything that is not domain-specific, use libraries that provide realistic real-world data like fakerjs and alike
C.7. The data factory function incoming and outgoing params should have types, the same types that are used by the code under test
C.10. For the test data, use meaningful domain data, not dummy values
C.15. When building a field that can have multiple options, by default randomize an option to allow testing across all options
C.20. When having list/arrays, by default put two items. Why? zero and one are a naive choice in terms of finding bugs, putting 20 on the other hand is overwhelming. Two is a good balance between simplicity and realism
An example of a good data factory that follows these rules:
import { faker } from "@faker-js/faker";
import { FileContext } from "../types";
export function buildFileFromIDE(overrides: Partial<FileContext> = {}): FileContext {
return {
path: faker.system.filePath(),
type: faker.helpers.arrayElement(["file", "folder"]),
...overrides,
};
}
Section D - Assertions
D.7. Avoid custom coding, loop and Array.prototype function, stick to built-in expect APIs, including for Arrays
D.11. Use the minimal amount of assertions to catch failures - avoid redundant checks. Use: expect(response).toEqual([{id: '123'}, {id: '456'}]) instead of:
The single assertion will catch null, non-array, and wrong data issues
D.13. Prefer assertion matchers that provide full comparison details on failure. Use expect(actualArray).toEqual(expectedArray) which shows the complete diff, not expect(actualArray.contains(expectedValue)).toBeTrue() which only shows true/false
D.15. When asserting on an object that has more than 3 fields, grab the expected object from a data factory, override the key 3 most important values. If there are more than 3 important values to assert on, break this down into one more test case
Section E - Mocking
E.1. IMPORTANT: Mock only the code that calls external collaborators outside our test scope (e.g., email service clients, payment gateways). Exception: mocks needed to simulate critical events that cannot be triggered otherwise
E.3. Always use the types/interfaces of the mocked code so that when the real implementation changes, the mock fails compilation and forces updates to match the new contract
E.5. Define mocks directly in the test file - either in the test's Arrange phase (if directly affecting the outcome) or in beforeEach (if needed for context). Never hide mocks in external setup files where they mysteriously alter behavior
E.7. Reset all mocks in beforeEach to ensure a clean slate
E.9. When mocking code that makes HTTP requests with known URLs, prefer network interception (MSW, Nock) over function mocks - this keeps more of the code in the test scope
Section F - Testing with DOM
Suitable for frameworks like React-testing-library, Playwright, StoryBook, etc
F.1. Important: Use only user-facing locators based on ARIA roles, labels, or accessible names (e.g., getByRole, getByLabel). Avoid using test-id (e.g., .getByTestId), CSS selectors, or any non-ARIA-based locators
F.3. Do not assume or rely on the page structure or layout. Avoid using positional selectors like nth(i), first(), last() and similar
F.5. Use the framework mechanism for asserting safely on elements: If the framework can tell deterministically when the re-render ended (e.g., testing-library), just include standard non-awaitable assertions. In framework like Playwright that don't interact directly with the Renderer, use auto-retriable assertions (a.k.a web-first assertions) with await: await expect(locator).toContainText('some string');
F.9. Avoid waiting for some internal element appearance (e.g., Playwright waitForSelector) as it couple the test to the implementation. The auto-retriable assertion will do the wait in a reliable way
F.14. Avoid approaching and asserting on external systems. Alternatively, assert that the navigation happened and if needed simulate a stubbed response
Section G - Testing with database
G.3. Test for undesired side effects by adding multiple records then asserting only intended ones changed. Example: await api.delete('/order/123') then verify await api.get('/order/456') still returns 200
G.5. Test response schema for auto-generated fields using type matchers. Example: expect(response).toMatchObject({ id: expect.any(Number), createdAt: expect.any(String) })
G.7. Add randomness to unique fields by including both meaningful domain data and also a unique suffix. Example, assuming email is unique: { email: ${faker.internet.email()}-${faker.string.nanoid(5)} }
G.9. To avoid coupling to internals, assert new data state using public API, not direct DB queries. Example: After await api.post('/order', newOrder), verify with await api.get('/order/${id}')
G.12. Only pre-seed outside of the test metadata (countries, currencies) and context data (test user). Create test-specific records in each test. Example: Global seed has countries list, test creates its own orders
G.14. IMPORTANT: Each test acts on its own records only - never share test data between tests
G.18. Test for undesired cascading deletes or updates. Example: Delete parent record, assert child records handle it gracefully (either preserved or cleanly removed per business rules)
Section I - What to Test
I.7. 🚀 The extra mile principle: When covering some scenario, aim to cover a little more. Testing save of item? Use two, not one. Testing for filtering of a grid? Check also for item that should NOT have been shown
I.10. 🔥 The deliberate fire principle: In each configuration and data, aim for the option that is more likely to lead to failure. For example, when choosing the user role, pick the least privilege one
Examples
BAD Test Example
// BAD TEST EXAMPLE - Violates multiple best practices
it('should test orders report filtering functionality', async () => { // 👎🏻 violates A.1
const adminUser = { role: 'admin' } // 👎🏻 violates I.10
// Setting up mocks for internal implementation details
const mockOrderService = vi.fn() // 👎🏻 violates E.1
const mockFilterService = vi.fn() // 👎🏻 violates E.1
// Dummy meaningless data
const testData = [ // 👎🏻 violates C.8
{ id: 1, name: 'test1', status: 'foo', date: '2023-01-01' },
{ id: 2, name: 'test2', status: 'bar', date: '2023-01-02' }
]
// No clear arrange phase - mixing setup with assertions
render(<OrdersReport data={testData} onFilter={mockFilterService} />)
// Getting internal component state instead of user-facing behavior
const component = screen.getByTestId('orders-report') // 👎🏻 violates F.1
const internalState = component.querySelector('.internal-filter-state') // 👎🏻 violates F.1
try { // 👎🏻 violates A.13
const filterButton = screen.getByRole('button', { name: 'Filter Active' })
await userEvent.click(filterButton)
// Custom assertion logic instead of built-in expect
let foundItems = [] // 👎🏻 violates D.7
const rows = screen.getAllByRole('row')
for (const row of rows) { // 👎🏻 violates A.13, D.7
if (row.textContent?.includes('Active')) {
foundItems.push(row)
}
}
// Asserting data that was never arranged in the test
expect(foundItems.length).toBe(5) // 👎🏻 violates B.3, B.20
// Testing implementation details
expect(mockOrderService).toHaveBeenCalled() // 👎🏻 violates B.23
expect(internalState).toHaveClass('filtered-state') // 👎🏻 violates B.23
// Too many assertions
expect(component).toBeInTheDocument() // 👎🏻 violates A.10
expect(screen.getByText('Active Orders')).toBeVisible() // 👎🏻 violates A.10
expect(filterButton).toHaveAttribute('aria-pressed', 'true') // 👎🏻 violates A.10
expect(rows).toBeDefined() // 👎🏻 violates B.10, D.11
expect(rows).not.toBeNull() // 👎🏻 violates B.10, D.11
expect(rows.length).toBeGreaterThan(0) // 👎🏻 violates B.10, D.11
} catch (error) { // 👎🏻 violates A.13
console.log('Filter test failed:', error) // 👎🏻 violates A.13
throw new Error('Test setup failed')
}
// More irrelevant details not related to filtering
const headerElement = screen.getByRole('banner')
expect(headerElement).toHaveTextContent('Dashboard') // 👎🏻 violates B.5
}) // 👎🏻 violates A.3 (too many statements), A.5 (no clear AAA phases)
GOOD Test Example
beforeEach(() => {
const currentUser = buildUser({ name: faker.person.fullName(), role: 'viewer' }) // 🔥 The deliberate fire principle
http.get('/api/user/1', () => HttpResponse.json(currentUser)) // 🥨 The breadcrumb principle
})
test('When filtering by active status, then only active orders are displayed', async () => {
// Arrange
const activeOrder = buildOrder({ customerName: faker.person.fullName(), status: 'active' })
const completedOrder = buildOrder({ customerName: faker.person.fullName(), status: 'non-active' }) // 🔫 The smoking gun principle
http.get('/api/orders', () => HttpResponse.json([activeOrder, completedOrder]))
const screen = render(<OrdersReport />)
// Act
await userEvent.click(screen.getByRole('button', { name: 'Filter by Active' }))
// Assert
expect.element(screen.getByRole('cell', { name: activeOrder.customerName })).toBeVisible()
expect.element(screen.getByRole('cell', { name: completedOrder.customerName })).not.toBeVisible() // 🚀 The extra mile principle
})
In closing
Try to respect all the rules, the 'The 6 most important (!) rules' are even more important, read them twice
