diff --git a/frontend/src/__tests__/pr27Features.test.js b/frontend/src/__tests__/pr27Features.test.js
index f2007e3..02ab2b7 100644
--- a/frontend/src/__tests__/pr27Features.test.js
+++ b/frontend/src/__tests__/pr27Features.test.js
@@ -444,3 +444,58 @@ describe('unit system — PR30', () => {
     expect(hasProduct).toBe(true)
   })
 })
+
+// ---------------------------------------------------------------------------
+// PR31: Retail price column alignment logic
+// ---------------------------------------------------------------------------
+describe('retail price column alignment — PR31', () => {
+  function hasAnyRetail(ingredients, retailMap) {
+    return ingredients.some(ing => retailMap[ing.oil] && retailMap[ing.oil] > 0)
+  }
+
+  it('shows retail column when at least one ingredient has retail price', () => {
+    const ings = [{ oil: '薰衣草', drops: 3 }, { oil: '无香乳液', drops: 30 }]
+    const retailMap = { '薰衣草': 0.94, '无香乳液': 0 }
+    expect(hasAnyRetail(ings, retailMap)).toBe(true)
+  })
+
+  it('hides retail column when no ingredient has retail price', () => {
+    const ings = [{ oil: '无香乳液', drops: 30 }, { oil: '玫瑰护手霜', drops: 20 }]
+    const retailMap = { '无香乳液': 0, '玫瑰护手霜': 0 }
+    expect(hasAnyRetail(ings, retailMap)).toBe(false)
+  })
+
+  it('all rows render when column is shown (empty string for missing retail)', () => {
+    const ings = [{ oil: '薰衣草', drops: 3 }, { oil: '无香乳液', drops: 30 }]
+    const retailMap = { '薰衣草': 0.94, '无香乳液': 0 }
+    const showColumn = hasAnyRetail(ings, retailMap)
+    expect(showColumn).toBe(true)
+    const values = ings.map(i => retailMap[i.oil] > 0 ? `¥${(retailMap[i.oil] * i.drops).toFixed(2)}` : '')
+    expect(values[0]).toBe('¥2.82')
+    expect(values[1]).toBe('')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// PR31: Volume field in recipe store mapping
+// ---------------------------------------------------------------------------
+describe('volume field in recipe mapping — PR31', () => {
+  it('maps volume from API response', () => {
+    const apiRecipe = { id: 1, name: 'test', volume: 'single', ingredients: [], tags: [] }
+    const mapped = { volume: apiRecipe.volume || '' }
+    expect(mapped.volume).toBe('single')
+  })
+
+  it('defaults to empty string when volume is null', () => {
+    const apiRecipe = { id: 1, name: 'test', volume: null, ingredients: [], tags: [] }
+    const mapped = { volume: apiRecipe.volume || '' }
+    expect(mapped.volume).toBe('')
+  })
+
+  it('volume values map to correct display labels', () => {
+    const labels = { 'single': '单次', '5': '5ml', '10': '10ml', '15': '15ml', '': '' }
+    expect(labels['single']).toBe('单次')
+    expect(labels['5']).toBe('5ml')
+    expect(labels['']).toBe('')
+  })
+})