1

これは私のコンポーネントです。エミュレーター/電話で問題なく動作します。

// 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>の代わりにa を使用すると機能<Icon>しますが、嘲笑する必要があります。どうすればこれを修正できますか?

4

1 に答える 1

1

解決しました。nullこれを機能させるには、モックはオブジェクトの代わりに関数を返す必要があります。

mock('react-native-vector-icons/FontAwesome', () => null);
于 2018-12-17T17:28:18.963 に答える