使用react-cookie时如何正确测试cookie的值？

Question

我正在尝试使用 JestJS 测试以下场景，并且需要一些有关如何执行此操作的建议，因为我没有正确的线索。

当我第一次访问某个页面时，底部会出现一个横幅，并包含一个

Accept Cookies

按钮。当用户单击按钮时，将使用 react-cookie 包设置 cookie。

我需要在这里测试该 cookie 的值并检查它们是否是预期的值。

这是我到目前为止的代码：

import { fireEvent, render, screen } from '@testing-library/react'

jest.mock('react-cookie', () => {
    __esModule: true,
    useCookies: jest.fn()
})

const mockedUseCookies == useCookies as jest.Mock<any>

describe('Cookies Banner', () => {
    it('Cookie will get proper values after click on Accept Cookies button', () => {
        render(
            <CookiesBanner {...someCookieData}></CookiesBanner>
        )

        const acceptCookiesBtn = screen.getByTestId('acceptCookiesBtn')
        fireEvent.click(acceptCookiesBtn)

        //How do I check if the cookies have the right value here???
    })
})

但是如果我运行上述测试，它会失败并出现以下错误：

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    const [cookies, setCookie, removeCookie] = useCookies()

我可能会错过什么？

我检查了以下帖子，但没有一个适合我的场景：

• 使用 React cookies 运行测试时无效的 prop `cookies`
• 使用 Jest 测试安全 cookie 值
• 在react-cookie中模拟cookie

我还检查了如何为库编写测试（here），但我再次无法让我的测试正常工作

Answer 1

您已经模拟了 useCookies 以实现 jest.fn()。但 cookie 横幅可能会像这样消耗它：

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);

//jest.fn returns undefined so the previous line is equivalent to:

const [cookies, setCookie, removeCookie] = undefined;

//And then it tries to get the first, second, and the third indexed item for undefined which leads to your error "undefined is not iterable" and it is true.

正确的解决方案是模拟

react-cookie

，但它需要具有相同的合约。

import { fireEvent, render, screen } from '@testing-library/react'
import { useCookies } from '@testing-library/react'

//we mock it initially for all
jest.mock('react-cookie', () => {
    __esModule: true,
    useCookies: jest.fn(() => [
       // mock for cookies
       [],
       //mock for setCookie
       jest.fn(),
       //mock for removeCookie
       jest.fn()
    ])
})

const mockedUseCookies == useCookies as jest.Mock<any>

const getCookiesSpies = () => {

  const setCookieMock = jest.fn();
  const removeCookieMock = jest.fn();

  mockedUseCookies.mockImplementation(() => ([
       // mock for cookies
       [],
       //mock for setCookie
       setCookieMock,
       //mock for removeCookie
       removeCookieMock 
    ])
  ]));

  return {setCookieMock, removeCookieMock }
}

describe('Cookies Banner', () => {

   beforeEach(() => {
       // THIS IS IMPORTANT SO THAT EACH TEST IS IN ISOLATION
      jest.clearAllMocks();
   });

  it('Cookie will get proper values after click on Accept Cookies button', () => 
  {
       // OVERIDE setCookies BEFORE RENDERING !!!!

       const {setCookieMock, removeCookieMock } = getCookiesSpies();
        render(
            <CookiesBanner {...someCookieData}></CookiesBanner>
        )

        const acceptCookiesBtn = screen.getByTestId('acceptCookiesBtn')
        fireEvent.click(acceptCookiesBtn)

        //How do I check if the cookies have the right value here???
        expect(setCookieMock).toHaveBeenCalledWith('expected-cookie-name', 'expected-cookie-value')
    })
  })

这也可以扩展为在每次测试调用时将结果注入到 useCookies - cookie 参数中。