我有一个带有模态对话框的Reaction组件(使用reactstrap
,但其他人也报告了类似的问题react-bootstrap
以及其他类型的模态部件)。酶在模态中找不到任何成分,即使它们在实际的应用程序中呈现得很好。最起码的例子:
import React from 'react'
import { Modal } from 'reactstrap'
export default class MyModal extends React.Component {
render() {
return (
<div className="outside"> Some elements outside of the dialog </div>
<Modal isOpen={this.props.modalOpen}>
<div className="inside"> Content of dialog </div>
</Modal>
);
}
}
我想测试内容(在本例中使用jest
)像这样
import React from 'react'
import MyModal from './MyModal'
import { mount } from 'enzyme'
it('renders correctly', () => {
const wrapper = mount( <MyModal modalOpen/> );
expect(wrapper).toMatchSnapshot();
// Passes
expect(wrapper.find('.outside')).toHaveLength(1);
// Fails, 0 length
expect(wrapper.find('.inside')).toHaveLength(1);
});
测试正确地找到了Modal之外的内容,但是没有在里面找到任何东西。查看快照显示,实际上,在<Modal>
被渲染。但是,如果我替换mount
带着shallow
。问题是我需要mount
测试生命周期方法,如componentDidMount
。
为什么不mount
渲染模态的内容?我认为关键在于它呈现了整个子元素树。
相似问题