Question

我正在使用jest-enzyme进行测试，在使用mount方法时，我无法测试材料中的组件-ui的主题提供者

我的测试看起来像这样

＆＃13;

import React from 'react';
import PropTypes from 'prop-types';
import {mount} from 'enzyme';

// import API
import * as API from '..//utils/api.js';
import MyComponent from './MyComponent';

import getMuiTheme from 'material-ui/styles/getMuiTheme';

// Syntactic sugar, see:
// https://github.com/facebook/jest/issues/2157#issuecomment-279171856 something
// like this will maybe added to the Jest API
function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}

const muiTheme = getMuiTheme();

it('renders without crashing', () => {
    fetch
        .__orig__
        .mockResponse(JSON.stringify({message: "hello"}), {status: 200});

    const component = mount(
        <MyComponent/>, {
        context: {
            muiTheme
        },
        childContextTypes: {
            muiTheme: PropTypes.object
        }
    });

    return flushPromises().then(() => {
        component.debug();
        console.log(component.html());
        expect(fetch.__orig__.mock.calls).toHaveLength(1);
        expect(component.find('h1')).toHaveLength(1);
    });
});

＆＃13;

该测试未返回MyComponent的HTML，而是返回：

＆＃13;

{"length": 1, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__rendere
r__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode
], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmo
unt": [Function unmount]}, Symbol(enzyme.__root__): {"length": 1, Symbol(enzyme.
__unrendered__): <MyComponent />, Symbol(enzyme.__renderer__): [Object], Symbol(
enzyme.__root__): [Circular], Symbol(enzyme.__node__): [Object], Symbol(enzyme._
_nodes__): [Array], Symbol(enzyme.__options__): [Object]}, Symbol(enzyme.__node_
_): {"instance": [Object], "key": undefined, "nodeType": "class", "props": [Obje
ct], "ref": null, "rendered": [Object], "type": [Function VerifyModal]}, Symbol(
enzyme.__nodes__): [[Object]], Symbol(enzyme.__options__): {"adapter": [Object],
 "childContextTypes": [Object], "context": [Object]}}

＆＃13;

如您所见，<MyComponent/>出现在该字符串中，但我无法访问它以查看内部的HTML。

如何使用Material-UI进行mount测试。我不能使用浅，我也不想升级到material-ui v1

测试React组件不使用Material-UI

0 个答案: