vendredi 25 septembre 2020

StyledComponents/Jest: Trying to insert a new style tag, but the given Node is unmounted

I have been looking around for answers, I find few ones very similar to mine, but still could not find a solution for the problem I had. I have also tried reinstalling my modules, running npm link after reinstalling my modules. It just has not really worked out for me.

This is the complete error:

Trying to insert a new style tag, but the given Node is unmounted!

    - Are you using a custom target that isn't mounted?
    - Does your document not have a valid head element?
    - Have you accidentally removed a style tag manually?

      18 | } from '../visual-elements/responsive-button'
      19 | 
    > 20 | const StyledSelect = styled(Select)`
         |                                     ^
      21 |   width: 100%;
      22 | `
      23 | 

As for my testing File, I am using Jest/MSW/React Testing Library + it is TypeScript.

import React from 'react'
import { useFlag } from '@boxine/tonies-ui'
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import * as utils from '../../mocks/utils'
import { render, screen } from '../../utils/test-utils'
import { useAudioLibraryFlag } from '../../hooks/useAudioLibraryFlag'
import Home from '.'

jest.mock('../../hooks/useAudioLibraryFlag')

const requiredHomeProps = {
  location: {
    search: '',
  },
}

const households = [
  utils.generateHousehold(),
  utils.generateHousehold(),
  utils.generateHousehold(),
]

const server = setupServer(
  rest.post('https://api.tonie.cloud/v2/graphql/', (req, res, ctx) => {
    return res(
      ctx.json({
        data: {
          households,
        },
      })
    )
  })
)

describe('Home component', () => {
  beforeEach(() => {
    ;(useAudioLibraryFlag as jest.Mock).mockImplementation(() => true)
    ;(useFlag as jest.Mock).mockImplementation(() => true)
  })

  // Enable API mocking before tests.
  beforeAll(() => server.listen())

  // Reset any runtime request handlers we may add during the tests.
  afterEach(() => server.resetHandlers())

  afterAll(() => {
    ;(useAudioLibraryFlag as jest.Mock).mockRestore()
    ;(useFlag as jest.Mock).mockRestore()
    // Disable API mocking after the tests are done.
    server.close()
  })

  test('renders correctly', () => {
    render(<Home {...requiredHomeProps} />)

    expect(
      screen.getByText(/Ready to add some new Tonies to your collection/)
    ).toBeInTheDocument()
    expect(screen.getByText('Go to the shop')).toBeInTheDocument()
    expect(screen.getByText('to download')).toBeInTheDocument()
  })
})```

Aucun commentaire:

Enregistrer un commentaire