我正在尝试使用React Fiber的portal为模态组件编写测试，但因为我的模态组件挂载到了位于<body />根部的domNode上，但由于该domNode不存在，测试失败了。
以下是一些提供上下文的代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="modal-root"></div>
<div id="root"></div>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Modal, ModalHeader } from './Modal';
class App extends Component {
constructor(props) {
super(props);
this.state = { show: false };
this.toggleModal = this.toggleModal.bind(this);
}
toggleModal(show) {
this.setState({ show: show !== undefined ? show : !this.state.show });
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={() => this.toggleModal()}>show modal</button>
<Modal toggle={this.toggleModal} show={this.state.show}>
<ModalHeader>
<span>I'm a header</span>
<button onClick={() => this.toggleModal(false)}>
<span aria-hidden="true">×</span>
</button>
</ModalHeader>
<p>Modal Body!!!</p>
</Modal>
</div>
);
}
}
export default App;
模态框.js
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
// the next components are styled components, they are just for adding style no logic at all
import {
ModalBackdrop,
ModalContent,
ModalDialog,
ModalWrap,
} from './components';
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
this.modalRoot = document.getElementById('modal-root');
this.outerClick = this.outerClick.bind(this);
}
componentDidMount() {
this.modalRoot.appendChild(this.el);
this.modalRoot.parentNode.style.overflow = '';
}
componentWillUpdate(nextProps) {
if (this.props.show !== nextProps.show) {
this.modalRoot.parentNode.style.overflow = nextProps.show ? 'hidden' : '';
}
}
componentWillUnmount() {
this.props.toggle(false);
this.modalRoot.removeChild(this.el);
}
outerClick(event) {
event.preventDefault();
if (
event.target === event.currentTarget ||
event.target.nodeName.toLowerCase() === 'a'
) {
this.props.toggle(false);
}
}
render() {
const ModalMarkup = (
<Fragment>
<ModalBackdrop show={this.props.show} />
<ModalWrap show={this.props.show} onClick={this.outerClick}>
<ModalDialog show={this.props.show}>
<ModalContent>{this.props.children}</ModalContent>
</ModalDialog>
</ModalWrap>
</Fragment>
);
return ReactDOM.createPortal(ModalMarkup, this.el);
}
}
Modal.defaultProps = {
show: false,
toggle: () => {},
};
Modal.propTypes = {
children: PropTypes.node.isRequired,
show: PropTypes.bool,
toggle: PropTypes.func,
};
export default Modal;
最后但并非最不重要的测试：Modal.test.js
import React from 'react';
import Modal from './Modal.component';
import {
ModalBackdrop,
ModalContent,
ModalDialog,
ModalWrap,
} from './components';
describe('Modal component', () => {
const Child = () => <div>Yolo</div>;
it('should render all the styled components and the children', () => {
const component = mount(
<Modal>
<Child />
</Modal>
);
expect(component.find(ModalBackdrop).exists()).toBeTruthy();
expect(component.find(ModalWrap).exists()).toBeTruthy();
expect(component.find(ModalWrap).contains(ModalDialog)).toBeTruthy();
expect(component.find(ModalDialog).contains(ModalContent)).toBeTruthy();
expect(component.find(ModalContent).contains(Child)).toBeTruthy();
});
});
一个CodeSandbox，以便您可以看到它的实际效果。
div#modal-root添加到其中，情况不都是一样的吗？ - Herick#modal-root上，所以如果你最后有 5 个测试，你将会有 5 个堆叠的Modal组件。这就是为什么我们需要在每个测试之后卸载它的原因。 - Fabio Antunesreact-transition-group的CSSTransition，具有类似的行为。 - Herick