Cypress组件测试before钩子加载的fixture首测后失效如何解决

算力阿峰

2026-8-26

问题原因

Cypress 默认开启测试隔离机制，每个 it 测试用例执行结束后，会自动清空测试上下文（即通过 .as() 挂载到 this 上的所有属性）。before() 钩子仅会在所有用例启动前执行一次加载操作，第一个用例执行完成后上下文被清空，第二个用例自然无法读取到 this.fixture。

修复方案

方案1：替换为 beforeEach 钩子加载fixture

将 before 替换为 beforeEach，每个用例执行前都会重新加载fixture并挂载别名，写法最简洁，符合Cypress测试隔离的设计逻辑：

beforeEach(() => {
  cy.fixture('my-fixture').as('fixture')
})

it('test1', function() {
  mount(component, {
    propsData: {'data': this.fixture},
  })
})

it('test2', function() {
  mount(component, {
    propsData: {'data': this.fixture}, // 可正常访问
  })
})

注意：通过 this 访问别名的用例，回调函数不能使用箭头函数，必须写为 function() {} 形式，否则this指向错误会导致读取失败。

方案2：闭包缓存fixture数据（仅加载1次，性能更优）

如果fixture文件体积较大，不想每个用例重复读取文件，可以将fixture数据存储在describe块的作用域变量中，不受测试上下文清理逻辑影响，整个测试块仅需加载一次：

describe('目标组件测试', () => {
  let testFixture; // 块级作用域缓存fixture数据

  before(() => {
    cy.fixture('my-fixture').then(fixtureData => {
      testFixture = fixtureData
    })
  })

  it('test1', () => {
    mount(component, {
      propsData: {'data': testFixture},
    })
  })

  it('test2', () => {
    mount(component, {
      propsData: {'data': testFixture}, // 可正常访问
    })
  })
})

这种写法的用例回调可以正常使用箭头函数，不需要额外处理this指向问题。