如何在React / Jest单元测试中访问更新的DOM?

时间:2016-05-25 14:09:59

标签: javascript unit-testing reactjs jestjs

我正在体验整个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);
}
});

回购文件:https://github.com/jprivard/scrum-companion/blob/9436903050697be3eb15cb31075e832980eb0b9f/app/modules/emoting/tests/display.test.js

不知何故,当我在网上寻找答案时,我可以看到完全相同的代码运行和工作。还有一些时候,我看到其他方法,但它似乎与我当前版本的React / Jest / Jasmine /...

不兼容

请帮助:)

0 个答案:

没有答案