在 react-cookie 中模拟 cookie答案

【问题标题】：Mocking a cookie in react-cookie在 react-cookie 中模拟 cookie
【发布时间】：2020-02-10 09:49:42
【问题描述】：

我正在尝试在我的测试中设置一个 cookie，以确保它在我的组件中被清除：

import Cookies from 'universal-cookie';

test('successfully logs the user out', async () => {
  const cookie = new Cookies()
  cookie.set('authtoken', 'some-token')
  const { getByText } = render(<Logout/>)
})

但在我的注销组件中，cookies 对象是空的：

export default function Logout() {
  const [cookies, setCookie, removeCookie] = useCookies(['authtoken'])
  console.log(cookies)
}

还有其他方法可以做到这一点吗？最好不要将 cookie 作为道具传递。

【问题讨论】：

我不知道这两个包的内部工作原理，但您似乎正在尝试使用 2 个不同的 cookie 包；反应饼干和通用饼干。如果您使用的是 ssr，请使用第一个，否则使用第二个。您还有更多可能有帮助的上下文吗？
@Devin 一个包依赖于另一个包。我认为这真的是一个react-cookie 的问题。
react cookie 中的 cookie 是根据上下文提供的。是否可能因为未呈现 cookie 提供程序而未提供您的 cookie？文档示例 export default function Root() { return ( ); }
@Devin 我也尝试将<CookiesProvider> 放入render 方法中。但仍然没有骰子。

标签： reactjs react-cookie

【解决方案1】：

所以问题出在@Oleg 和@Devin 所暗示的问题上。也渲染提供者。但我还必须像这样将cookies 作为参数传递：

import Cookies from 'universal-cookie';

test('successfully logs the user out', async () => {
  const cookie = new Cookies({authtoken: 'some-token'});
  const { getByText } = render(
    <CookiesProvider cookies={cookie}>
      <Router>
        <Logout/>
      </Router>
    </CookiesProvider>
  )
})

【讨论】：

【解决方案2】：

通过添加

 const cookie = new Cookies();
 cookie.HAS_DOCUMENT_COOKIE = false;

【讨论】：

不幸的是Logout组件中的cookies对象仍然是空的
查看更多用例示例：github.com/reactivestack/cookies/blob/master/packages/…
不带钩试试，cookie.get
是的，console.log(document.cookie) 也是空的。应该是钩子吧但是一定有办法做到这一点吗？
试试 document.cookie = 'test=' + cookieValue;

【解决方案3】：

根据 react-cookie，可以直接使用 DOM 访问 cookie。

 document.cookie.split(';').forEach(function(c) {
    document.cookie = c
      .replace(/^ +/, '')
      .replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');
 });

这个功能是清除cookies。

我在之前的评论中想到的另一件事是，您通过“

使用 cookie 呈现组件

const cookied = withCookies(<Login />)
render(cookied)

可以在以下位置找到此信息的链接及其上下文：https://github.com/reactivestack/cookies/blob/master/packages/universal-cookie/src/utils.ts

【讨论】：

这应该和document.cookie='foo'一样吧？也试过了，不幸的是没有骰子
似乎根据文档withCookies 在组件上设置了一些道具，这不是我想要的。也试过了，还是没有成功
好吧，我正在开发自己的 ssr 应用程序。我现在要在全球范围内集成 cookie。如果我遇到这个问题，或者如果我没有遇到这个问题，我会告诉你为什么它会起作用。
查看我的答案以获得解决方案。这并不是很理想，因为我所做的只是传递 cookie，因此它可以在组件中使用。