Mocking a cookie in react-cookie

Question

I'm trying to set a cookie in my test to make sure it's getting cleared out in my component:

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/>)
})

But in my Logout component the cookies object is empty:

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

Is there another way to do this? Preferably one that isn't passing the cookie as a prop.

I don't know the inner working of those two packages, but it seems like you are trying to use 2 different cookie packages; react-cookie and universal-cookie. If you are using ssr use the first, else the second. Do you have any more context that may help? — Devin, Oct 13 '19 at 16:34
@Devin One package has a dependency on the other. It's really a `react-cookie` question I think. — dan-klasson, Oct 13 '19 at 16:37
Cookies in react cookie are provided contextually. Is it possible your cookie is not being provided because the cookie provider is not being rendered? Docs example export default function Root() { return ( ); } — Devin, Oct 13 '19 at 16:49
@Devin I tried putting `` in the `render` method too. But still no dice. — dan-klasson, Oct 13 '19 at 17:01

dan-klasson · Answer 1 · 2019-10-13T17:31:15.637

So the problem was what @Oleg and @Devin were hinting at. To render the provider as well. But I also had to pass the cookies as parameter like so:

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>
  )
})

score 0 · Answer 2 · answered Oct 13 '19 at 16:37

0

By adding

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

answered Oct 13 '19 at 16:37

Oleg

3,580
1
7
12

The `cookies` object in the `Logout` component is still empty unfortunately – dan-klasson Oct 13 '19 at 16:40
Look at examples for more use cases: https://github.com/reactivestack/cookies/blob/master/packages/universal-cookie/src/__tests__/Cookies-test.js – Oleg Oct 13 '19 at 16:41
Try without hook, cookie.get – Oleg Oct 13 '19 at 16:42
Yeah, `console.log(document.cookie)` is also empty. Probably a hook thing. But there must be some way to do this no? – dan-klasson Oct 13 '19 at 16:46
Try like document.cookie = 'test=' + cookieValue; – Oleg Oct 13 '19 at 16:47
That works. The cookie is passed over to the component. But the `cookies` object is still empty – dan-klasson Oct 13 '19 at 16:49
For mockup may be you can make single tone for this object and export – Oleg Oct 13 '19 at 17:02
Not sure what that means – dan-klasson Oct 13 '19 at 17:09
export const cookie; and import in login – Oleg Oct 13 '19 at 17:11
I rather not write code specifically to get my test passing – dan-klasson Oct 13 '19 at 17:14
Try with like in example : https://github.com/reactivestack/cookies/blob/master/packages/react-cookie/src/__tests__/useCookies-test.js – Oleg Oct 13 '19 at 17:18
Already did. But finally got it working by doing ``, where `cookie` is the cookie object – dan-klasson Oct 13 '19 at 17:22

Devin · Answer 3 · 2019-10-13T17:03:27.673

0

According to react-cookie, you can access the cookies directly using the DOM.

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

This function is to clear cookies.

Something else that I was thinking in an earlier comment was that you render the component with cookies via "

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

"

A link to this information and it's context can be found at: https://github.com/reactivestack/cookies/blob/master/packages/universal-cookie/src/utils.ts

edited Oct 13 '19 at 17:03

answered Oct 13 '19 at 16:57

Devin

134
9

This should be the same as `document.cookie='foo'` no? Tried it as well and no dice unfortunately – dan-klasson Oct 13 '19 at 17:03
Seems like according to the docs `withCookies` sets some props on the component, which is not what I want. Tried as well and still no luck – dan-klasson Oct 13 '19 at 17:12
Well, i'm working on my own ssr application. I'm going to integrate cookies at the global level right now. I'll let you know if I run into this problem or why it works if I don't. – Devin Oct 13 '19 at 17:24
See my answer for the solution. It's not really ideal though as all I'm doing is passing in the cookie so it's available in the component. – dan-klasson Oct 13 '19 at 17:30

Mocking a cookie in react-cookie

3 Answers3