Reactjs 如何在组件中测试React模板块

Reactjs 如何在组件中测试React模板块,reactjs,karma-runner,karma-jasmine,Reactjs,Karma Runner,Karma Jasmine,我试图测试一个小的React组件-模板块语句。 但是我能做到吗?因为我甚至无法从renderResult()方法中记录该block语句 可能吗?我看只有一个办法。它只是通过酶来测试最终结果。但我只是想知道——这可能吗 谢谢你提供的任何信息 import React, { PropTypes } from "react"; export function zeta() { return "zeta"; } export default class AppComponent extend

我试图测试一个小的React组件-模板块语句。 但是我能做到吗?因为我甚至无法从renderResult()方法中记录该block语句

可能吗?我看只有一个办法。它只是通过酶来测试最终结果。但我只是想知道——这可能吗

谢谢你提供的任何信息

import React, { PropTypes } from "react";

export function zeta() {
    return "zeta";
}

export default class AppComponent extends React.Component {

    some() {
        return "some";
    }

    renderResult() {
        let res;

        if (process.env.NODE_ENV === "production") {
            res =  ( <main><h1>App Component PROD</h1>{ this.props.children }</main> );
        } else {
            res = ( <main><h1>App Component DEV 11</h1>{ this.props.children }</main> );
        }

        return res;
    }

    render() {
        return this.renderResult();
    }

}

AppComponent.propTypes = {
    children : PropTypes.object
};
import React,{PropTypes}来自“React”;
导出函数zeta(){
返回“泽塔”;
}
导出默认类AppComponent扩展React.Component{
一些(){
返回“一些”;
}
renderResult(){
让我们重新来过;
if(process.env.NODE_env==“生产”){
res=(应用程序组件PROD{this.props.children});
}否则{
res=(应用程序组件DEV 11{this.props.children});
}
返回res;
}
render(){
返回此.renderResult();
}
}
AppComponent.propTypes={
子项:PropTypes.object
};
我的测试

import jasmineEnzyme from "jasmine-enzyme";

import React from "react";
import {mount} from "enzyme";

import AppComponent, {zeta} from "../App.component";

describe("<AppComponent /> test", () => {
    let wrapper;

    beforeEach(() => {
        jasmineEnzyme();

        wrapper = mount(<AppComponent />);
    });

    it("App Component should contain h1", () => {
        expect(wrapper.find("h1")).toBePresent();
    });

    it("h1 Should contain a dev text in case of dev mode", () => {
        const compInst = wrapper.instance();
        const res = compInst.some();

        console.log(compInst.renderResult());

        console.log(res);
        expect(res).toMatch("some");
    });
});


});
从“茉莉酶”进口茉莉酶;
从“React”导入React;
从“酶”导入{mount};
从“./App.component”导入AppComponent,{zeta};
描述(“测试”,()=>{
让包装纸;
在每个之前(()=>{
茉莉酶();
包装器=mount();
});
它(“应用程序组件应包含h1”,()=>{
expect(wrapper.find(“h1”)).toBePresent();
});
它(“如果是开发模式,h1应该包含一个开发文本”,()=>{
const compInst=wrapper.instance();
const res=compInst.some();
log(compInst.renderResult());
控制台日志(res);
期望(res.toMatch)(“一些”);
});
});
});

所以我像以前说的那样解决了这个问题。我通过Enzume测试了html结果。不幸的是,我没有找到上述问题的答案。