javascript - react-native-vector-icons + mocha: Invariant Violation
问题描述
This is my Component. It runs without problems on emulator/phone:
// 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>
)
}
}
But when I run the unit test in this file (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;
}
}
It throws:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up defau lt and named imports.
Check the render method of
MyComponent
.
It works if I use a <View>
instead of the <Icon>
but it should be mocked.
How can I fix this?
解决方案
解决了。为了使这个工作,模拟需要返回一个函数null
而不是一个对象。
mock('react-native-vector-icons/FontAwesome', () => null);
推荐阅读
- functional-programming - 如何修复 F# 函数参数中的类型错误
- java - 参数化测试不适用于 GuiceExtension
- javascript - How to split the String based on array elements into array retaining the array the split word in javascript
- javascript - 使用 momentjs 在 DST 期间获取时区缩写
- break - 如何在 InDesign 脚本中打断一行文本?
- pandas - 如何将 GROUPBY 的结果与 pandas 中的原始数据框连接起来?
- python - 在管理面板和站点(Django)中同时授权管理员
- filter - SPARQL - 过滤评论。标签和摘要到英文并保留整数和 uri 值
- excel - VBA搜索边界单元格并提取
- javascript - 将更新的元素从 JS 线程传递到 Shadow Thread