我在React中有一个组件，该组件通过withRouter() HOF包装器导出。如何测试该组件？
酶错误：
Invariant failed: You should not use <withRouter(Palette) /> outside a <Router>
我如何导出组件：
export default withRouter(Palette);
答案 0 :(得分：0)
解决方案是导出组件的两种变体：一种用于常规开发环境，另一种用于测试环境。
测试
<FontAwesomeIcon icon='arrow-right' />
常规
...
"@fortawesome/fontawesome-svg-core": "^1.2.20",
"@fortawesome/free-brands-svg-icons": "^5.10.0",
"@fortawesome/free-regular-svg-icons": "^5.10.0",
"@fortawesome/free-solid-svg-icons": "^5.10.0",
"@fortawesome/react-fontawesome": "^0.1.4",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
...
本质上，导出具有不同预期用途的两个版本。
答案 1 :(得分：0)
您可以在声明组件（例如
）的同时尝试将withRouter封装在箭头功能上split_by: section答案 2 :(得分：0)
在类似的测试中，使用 import 'dart:io';
import 'to_do_item.dart';
import 'package:path/path.dart';
import 'dart:async';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';
class DatabaseHelper {
static final DatabaseHelper _instance = new DatabaseHelper.internal();
factory DatabaseHelper() => _instance;
final String tableName = "todotbl";
final String columnId = "id";
final String columnItemName = "itemName";
final String columnDateCreated = "dateCreated";
static Database _db;
Future<Database> get db async {
if (_db != null) {
return _db;
}
_db = await initDb();
return _db;
}
DatabaseHelper.internal();
initDb() async {
Directory documentDirectory = await getApplicationDocumentsDirectory();
String path = join(documentDirectory.path, "todolist_db.db");
var ourDb = await openDatabase(path, version: 1, onCreate: _onCreate);
return ourDb;
}
void _onCreate(Database db, int version) async {
await db.execute(
"CREATE TABLE $tableName(id INTEGER PRIMARY KEY, $columnItemName TEXT, $columnDateCreated TEXT)");
print("Table is created");
}
//insertion
Future<int> saveItem(TodoItem item) async {
var dbClient = await db;
int res = await dbClient.insert("$tableName", item.toMap());
print(res.toString());
return res;
}
//Get
Future<List> getItems() async {
var dbClient = await db;
var result = await dbClient.rawQuery(
"SELECT * FROM $tableName ORDER BY $columnItemName ASC"); //ASC
return result.toList();
// if (result.length == 0) return [];
// var users = [];
//
// for (Map<String, dynamic> map in result) {
// users.add(new User.fromMap(map));
// }
//
// return users;
}
Future<int> getCount() async {
var dbClient = await db;
return Sqflite.firstIntValue(await dbClient.rawQuery(
"SELECT COUNT(*) FROM $tableName"
));
}
//
Future<TodoItem> getItem(int id) async {
var dbClient = await db;
var result = await dbClient.rawQuery(
"SELECT * FROM $tableName WHERE id = $id");
if (result.length == 0) return null;
return new TodoItem.fromMap(result.first);
}
//deletion
// Future<int> deleteItem(int id) async {
// var dbClient = await db;
// var result = await dbClient.rawQuery("DELETE FROM $tableName WHERE id = $id");
// if (result.length == 0) return null;
// return result.first as int;
// }
Future<int> deleteItem(int id) async {
var dbClient = await db;
return await dbClient.delete(tableName,
where: "$columnId = ?", whereArgs: [id]);
}
Future<int> updateItem(TodoItem item) async {
var dbClient = await db;
return await dbClient.update("$tableName", item.toMap(),
where: "$columnId = ?", whereArgs: [item.id]);
}
Future close() async {
var dbClient = await db;
return dbClient.close();
}
}
或<StaticRouter>替代export是
<MemoryRouter>答案 3 :(得分：0)
我认为您应该尝试这个
let wrapper = shallow(<componentName.WrappedComponent/>);