代码之家 › 专栏 › 技术社区 › Andrew

使用带有“Target is not a DOM element”的浅层错误的酶基本测试

enzyme reactjs

Andrew · 技术社区 · 6 年前

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

mount ,但为什么要用 浅的 索引.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))

1 回复 | 直到 6 年前

Brian Adams 6 年前

这个错误意味着 index.tsx 不小心被导入 LogoButton.test.tsx

解决方案

追溯 import LogoButton.test.tsx 直到你找到地方不小心被导入并修复或删除声明。

如果 索引.tsx ReactDOM.render . 在本例中,该语句试图将组件呈现到 root 元素。

的默认测试环境 Jest 是 jsdom 它提供了类似浏览器的环境,但是 document 提供单位 jsdom公司 document.getElementById('root') 会回来的 null . 什么时候? ReactDOM.render 试图渲染成 无效的