Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[testing] Helmet.peek() returns previous elements in unit testing #460

Open
andrastothtw opened this issue Jun 17, 2019 · 4 comments
Open

[testing] Helmet.peek() returns previous elements in unit testing #460

andrastothtw opened this issue Jun 17, 2019 · 4 comments

Comments

@andrastothtw
Copy link

andrastothtw commented Jun 17, 2019 •
edited
Loading

This is a question/bug report.

How can you 'reset' elements put into <head> by Helmet? Helmet.peek() returns elements from previous tests in the same file? See code below:

Code to reproduce

import * as React from 'react';
import { mount } from 'enzyme';
import Helmet from 'react-helmet';

it('affects the other test :O', () => {
  mount(<div>
    <Helmet>
      <link rel="canonical" href="http://lol" />
    </Helmet>
  </div>);

  const helmetContent = Helmet.peek();
  const canonicalLinkTag = (helmetContent as any).linkTags.find((link: any) => link.rel === 'canonical');

  expect(canonicalLinkTag).toHaveProperty('href', 'http://lol');
});

it('finds the previous as being defined', () => {
  mount(<div>
    Wat
  </div>);

  const helmetContent = Helmet.peek();
  const canonicalLinkTag = (helmetContent as any).linkTags.find((link: any) => link.rel === 'canonical');

  expect(canonicalLinkTag).not.toBeDefined();
});

What is the expected behavior?
These two cases should be independent.

Which versions of React and react-helmet...?
react-helmet: 5.2.1
react: 16.4.1
@yes-mam
Copy link

yes-mam commented Jan 3, 2020

I have the same issue

@petetrickey
Copy link

petetrickey commented Feb 25, 2020 •
edited
Loading

I've managed to get this working when using 'https://testing-library.com/docs/react-testing-library/'

// Home.js

<>
    <Helmet>
        <title>I am a meta title</title>
    </Helmet>
    <h1>I am a title</h1>
</>

// Home.test.js

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

it('Should render the correct meta data', async () => {
        render(<Home />)
        await wait(() => expect(document.title).toEqual('I am a meta title'))
})

@dylanjeffers
Copy link

@andrastothtw I've found the following setup works:

import React from "react"
import {Helmet} from "react-helmet"
import {render} from "enzyme"

Helmet.canUseDOM = false

describe("react-helmet", () => {
  afterEach(() => {
    Helmet.rewind()
  })

  it("test 1", () => {
    render(<MyApp />)
    const helmet = Helmet.peek()
    expect(...).toBeTruthy()
  })

  it("test 2", () => {
    render(<MyApp someProp />)
    const helmet = Helmet.peek()
    expect(...).toBeFalsy()
  })
})

From what I can tell, rewind is the reset function you are looking for, but it doesn't work unless you set Helmet.canUseDOM = false which tells Helmet to render in a server context.

If it helps, the peek and rewind functions come from react-side-effect, which helped me debug this problem.

@sandeep609
Copy link

Any update regarding this issue or any workarounds from other engineers?

Facing the same issue, the order of unit tests within a test class is changing the values I get from Helmet.peek() as Helmet seems to be keeping track of all the mounted components as part of the earlier tests.

@erral erral mentioned this issue Jan 18, 2025
Merged
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sandeep609 @petetrickey @dylanjeffers @andrastothtw @yes-mam