Базовый тест фермента с использованием мелких ошибок с «Цель не является элементом DOM»

Question

Я пытаюсь провести невероятно простой тест, используя shallow.У меня сложилось впечатление, что shallow требует нулевых зависимостей вне самого компонента, но я столкнулся с этой ошибкой:

 FAIL  src/test/app/AppHeader/buttons/LogoButton.test.tsx
  ● Test suite failed to run

    Invariant Violation: Target container is not a DOM element.

      16 |   })
      17 | }
    > 18 | 
      19 | ReactDOM.render(
      20 |   <Provider store={store}>
      21 |     <Router history={history}>

      at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)

Мой код для теста:

import * as React from 'react'
import { shallow } from 'enzyme'
import LogoButton from 'components/app/AppHeader/buttons/LogoButton'

describe('test of initial load', () => {
    it('test', () => {
        const wrapper = shallow(
            <LogoButton />
        )
        expect(true).toBe(true)
    })
})

иМой index.tsx (где находится ошибка):

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import './index.css'
import registerServiceWorker from 'registerServiceWorker'
import store from 'redux/Store'
import { Provider } from 'react-redux'
import { createHashHistory } from 'history'
import { Router } from 'react-router-dom'
import Root from 'routes/Root'

export const history = createHashHistory()

if (process.env.NODE_ENV !== 'production') {
  Object.defineProperty(window, 'store', {
    get: () => store.getState()
  })
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
        <Root />
    </Router>
  </Provider>,
  document.getElementById('root') as HTMLElement
)
registerServiceWorker()

Я считаю, что тот факт, что я использую TypeScript, не имеет отношения к моей проблеме.Я, честно говоря, понятия не имею, что не так.На общем уровне я мог понять, почему это произошло бы, если бы я использовал mount, но почему с shallow?Почему в этом тесте возникают проблемы с моим кодом в index.tsx?

class LogoButton extends React.Component<Props> {
    handleReset = async () => {
        history.push('/')
        this.props.setUIElementStatus({
            uiElement: UI_ELEMENTS.UI_SEARCH_BAR, show: false
        })
        this.props.setSearchInputValue({ text: '' })
    }

    render() {
        const { titleFilled, titleBlank } = this.props.classes
        const titleClass = this.props.uiStatus.searchBar ? titleFilled : titleBlank
        const navButtonProps = {
            onClick: this.handleReset,
            className: titleClass,
            variant: 'flat' as 'flat',
            disableFocusRipple: true,
            disableRipple: true
        }
        return (
            <Button {...navButtonProps}>
                Tansaki
            </Button>
        )
    }
}

const mapStateToProps = (state: storeTypes.Store) => {
    const { uiStatus } = state
    return { uiStatus }
}

const { setSearchInputValue } = InputActions
const { setUIElementStatus } = UiActions

const mapDispatchToProps = { setSearchInputValue, setUIElementStatus }

export default withStyles(styles)(connect(
    mapStateToProps, mapDispatchToProps
)(LogoButton))

Answer 1

Issue

Эта ошибка означает, что index.tsx случайно импортируется в LogoButton.test.tsx.

Solution

Отслеживание операторов import, начиная с LogoButton.test.tsx пока вы не найдете, куда index.tsx случайно импортируется и исправите или удалите этот оператор import.

Подробности

Если index.tsx когда-либо будет импортирован во время теста, он будет немедленно запущенReactDOM.render.В этом случае этот оператор пытается отобразить компонент в элемент root.

Средой тестирования по умолчанию для Jest является jsdom, которая обеспечивает среду, подобную браузеру, но document, предоставляемуюjsdom пусто по умолчанию, что означает, что document.getElementById('root') вернет null.Когда ReactDOM.render пытается выполнить рендеринг в null, выдается ошибка, показанная выше.