如何mock context.req.headers.referer修复getServerSideProps测试报错

错误根因 #

你在测试用例中构造的ctx上下文对象缺少业务代码依赖的req属性，导致ctx.req取值为undefined，访问undefined.headers就触发了当前报错。

修复方案 #

你可以直接在构造测试用的ctx对象时补全req和headers层级，需要模拟referer的场景直接给headers.referer赋值即可，具体实现如下：

1. 修复现有基础测试用例

it('getServerSideProps should return product', async () => {
    mocked(getProductByKey).mockResolvedValueOnce(mockedProducts[0])
    const ctx = {
      query: { productKey: mockedProducts[0].key } as ParsedUrlQuery,
      // 补全req、headers层级，无特殊需求时给空对象即可兼容原有逻辑
      req: {
        headers: {}
      }
    }

    const result = await getServerSideProps(ctx as GetServerSidePropsContext)
    expect((result as any).props.product).toEqual(mockedProducts[0])
})

2. 模拟referer场景的测试用例

如果需要验证带referer的重定向逻辑，直接在headers内传入指定的referer值即可：

it('getServerSideProps should use referer as backlink when exists', async () => {
    const mockReferer = 'https://your-domain.com/previous-page'
    mocked(getProductByKey).mockResolvedValueOnce(mockedProducts[0])
    const ctx = {
      query: { productKey: mockedProducts[0].key } as ParsedUrlQuery,
      req: {
        headers: {
          referer: mockReferer
        }
      }
    }

    const result = await getServerSideProps(ctx as GetServerSidePropsContext)
    expect((result as any).props.backlink).toEqual(mockReferer)
})

如果需要验证无referer的兜底逻辑，不传referer字段或者赋值为空字符串即可覆盖对应分支。

内容的提问来源于stack exchange，提问作者BrownieBrown