我正在体验整个React,我很难清楚地理解我现在在单元测试中遇到的问题。我承诺(并推动)我的整个项目,以便更容易获得所有必要的细节来理解问题。
但基本上,我不能对更新的DOM元素进行任何断言,因为它不断给我原始的DOM。
这是单元测试:
jest.unmock('../display.js');
import React from 'react';
import ReactDOM from 'react-dom';
import sinon from 'sinon';
import TestUtils from 'react-addons-test-utils';
import EmoticonDisplay from "../display.js";
describe('Selector', () => {
var component, renderedDOM;
beforeEach(() => {
renderComponent(true);
});
afterEach(() => {});
it('is not displayed if IsLoggedIn returns false', () => {
expect(renderedDOM()).not.toBe(null);
//Why do I need to re-render? If I change the value of isLoggedIn and I try to access the DOM
//it is still the same value as before
renderComponent(false);
expect(renderedDOM()).toBe(null);
});
it('sets default states', () => {
expect(component.state.stack).toEqual([]);
expect(component.state.isAnimating).toEqual(false);
expect(component.state.currentItem).toEqual({emote: 'none', username: ''});
expect(TestUtils.findRenderedDOMComponentWithTag(component, 'img').src).toBe('images/none.svg');
});
it('animates a newly received emoticon', () => {
var data = {emote:'cool', username:'swilson'};
component.animate(data);
expect(component.state.stack).toEqual(jasmine.objectContaining(data));
//Same potential issue as explained earlier. Altough everything I find online tells me I should get the
//updated DOM, I still have images/none.svg even though the code changes the source of the picture
console.log(TestUtils.scryRenderedDOMComponentsWithTag(component, 'img')[0].src);
});
function renderComponent(isLoggedIn) {
component = TestUtils.renderIntoDocument(<EmoticonDisplay isLoggedIn={ isLoggedIn } />);
renderedDOM = () => ReactDOM.findDOMNode(component);
}
});
不知何故,当我在网上寻找答案时,我可以看到完全相同的代码运行和工作。还有一些时候,我看到其他方法,但它似乎与我当前版本的React / Jest / Jasmine /...
不兼容请帮助:)