react-native-vector-icons + mocha：不变违规答案

【问题标题】：react-native-vector-icons + mocha: Invariant Violationreact-native-vector-icons + mocha：不变违规
【发布时间】：2018-12-17 16:16:46
【问题描述】：

这是我的组件。它在模拟器/手机上运行没有问题：

// mycomponent.js
import React, {Component} from 'react';
import {View} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export class MyComponent extends Component {
    // ...
    render () {
        return (
            <View>
               <Icon
                   name="check"
                   size={25}
                   color={'#62B300'}
               />
            </View>
        )
    }
}

但是当我在这个文件中运行单元测试时（mocha --recursive test/**/*.js）：

// mycomponent.spec.js
import chai from 'chai';
import TestRenderer from 'react-test-renderer';
import mock from 'mock-require';
import 'react-native-mock-render/mock';
import {MyComponent} from '../app/components/MyComponent';

mock('react-native-vector-icons/FontAwesome', {});


describe('MyComponent', () => {
    it('should render', () => {
       const mycomponent = TestRenderer.create(<MyComponent>);

       return expect(mycomponent.root).to.exist;
    }
}

它抛出：

Invariant Violation：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从文件中定义它，或者您可能混淆了默认值和命名进口。

检查MyComponent的渲染方法。

如果我使用<View> 而不是<Icon>，它会起作用，但它应该被嘲笑。我该如何解决这个问题？

【问题讨论】：

标签： javascript react-native mocha.js react-test-renderer react-native-vector-icons

【解决方案1】：

解决了。为了使这个工作，mock 需要返回一个返回 null 而不是 Object 的函数。

mock('react-native-vector-icons/FontAwesome', () => null);

【讨论】：