一起工作
当前我正在手动将Quill Editor在ComponentDidmount上初始化Quill Editor，而Jest测试对我来说是失败的。看来我获得的参考价值在JSDOM中是无效的。这里存在和问题：https：//github.com/facebook/react/issues/7371，但看来ref应该有效。有什么想法我应该检查什么？
组件：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount() {
console.log(this._p)
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro" ref={(c) => { this._p = c }}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
测试：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import renderer from 'react-test-renderer'
it('snapshot testing', () => {
const tree = renderer.create(
<App />
).toJSON()
expect(tree).toMatchSnapshot()
})
结果，console.log输出null。但是我希望p tag
由于没有将测试渲染器耦合到react dom，因此对Ref应该是什么样子一无所知。React 15.4.0添加了模拟REFS的能力，以进行测试渲染器，但您应该为自己提供这些模拟。React 15.4.0发行说明包括这样做的示例。
import React from 'react';
import App from './App';
import renderer from 'react-test-renderer';
function createNodeMock(element) {
if (element.type === 'p') {
// This is your fake DOM node for <p>.
// Feel free to add any stub methods, e.g. focus() or any
// other methods necessary to prevent crashes in your components.
return {};
}
// You can return any object from this method for any type of DOM component.
// React will use it as a ref instead of a DOM node when snapshot testing.
return null;
}
it('renders correctly', () => {
const options = {createNodeMock};
// Don't forget to pass the options object!
const tree = renderer.create(<App />, options);
expect(tree).toMatchSnapshot();
});
请注意，它仅与React 15.4.0及更高。
我使用此存储库中的基于酶的测试来解决此问题：
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
describe('< SomeComponent />', () => {
it('renders', () => {
const wrapper = shallow(<SomeComponent />);
expect(toJson(wrapper)).toMatchSnapshot();
});
});