Question

这是我的组件。它可以在模拟器/电话上正常运行：

// 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;
    }
}

它抛出：

不变违反：元素类型无效：预期为字符串（对于   内置组件）或类/函数（用于复合组件）   但得到：对象。您可能忘记了从   定义的文件，或者您可能混淆了默认名称和名称   进口。

检查MyComponent的呈现方法。

如果我使用<View>而不是<Icon>可以使用，但是应该模拟它。我该如何解决？

Answer 1

解决了。为了使这项工作有效，模拟程序需要返回一个返回null的函数而不是一个Object。

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

react-native-vector-icons +摩卡：不变违规

1 个答案: