React native 测试Jest反应本机Expo CRNA，且Redux未弹出

如何在不弹出的情况下，使用Expo（默认）让Create React本机应用程序（CRNA）的组件、Redux操作和还原程序的所有测试都正常工作

---

还通过Expo使用Axios、Redux Thunk异步操作和React本机地图。

在阅读和重读相关文档之后， 以及谷歌搜索特定NPM软件包版本的问题我解决了这个问题

所有NPM包都必须配合得很好，这里面有很多“活动部件”。也就是说，测试，模仿，重做和你的味道反应

以下是目前有效的方法（2018-01-16）

安装程序 环境

• OS X High Sierra
• Visual Studio代码

项目平台

• 创建本地应用程序（CRNA）
• 世博会23.0.4
• 反应16.0.0-α12
• 反应本机0.50.3

测试框架

• 笑话^22.0.6
• Jest CLI^22.0.6
• 笑话酶^4.0.2
• 笑话博览会^22.0.0
• React插件测试实用工具^15.6.2
• 反应DOM 16.0.0-beta.5

package.json 重装、减速器和部件的工作测试

{
“名称”：“MyApp”，
“版本”：“0.0.1”，
“私人”：没错，
“作者”：“托马斯·哈格斯特罗姆”，
“依赖性”：{
“axios模拟适配器”：“^1.10.0”，
“巴别塔”：“^6.3.26”，
“babel eslint”：“^8.2.1”，
“巴别塔笑话”：“^22.0.6”，
“巴别塔polyfill”：“^6.16.0”，
“巴别塔预设airbnb”：“^1.0.1”，
“babel-preset-es2015”：“^6.18.0”，
“巴别塔预设反应”：“^6.16.0”，
“巴别塔预设反应本机”：“1.9.0”，
“eslint”：“^4.15.0”，
“eslint配置airbnb”：“^16.1.0”，
“eslint插件导入”：“^2.8.0”，
“eslint-plugin-jsx-a11y”：“^6.0.3”，
“eslint插件反应”：“^7.5.1”，
“笑话”：“^22.0.6”，
“jest cli”：“^22.0.6”，
“开玩笑的酶”：“^4.0.2”，
“玩笑博览会”：“^22.0.0”，
“react加载项测试实用程序”：“^15.6.2”，
“react dom”：“^16.0.0-beta.5”，
“反应本机模拟”：“^0.3.1”，
“反应本机脚本”：“1.8.1”，
“反应测试渲染器”：“^16.0.0-alpha.12”，
remotedev rn调试器“^0.8.3”
},
“巴别塔”：{
“预设”：[
“es2015”，
“反应”
]
},
“main”：“/node_modules/react native scripts/build/bin/crna entry.js”，
“脚本”：{
“开始”：“反应本机脚本开始”，
“弹出”：“反应本机脚本弹出”，
“android”：“反应本机脚本android”，
“ios”：“反应本机脚本ios”，
“测试”：“node\u modules/jest/bin/jest.js--watch”，
“postinstall”：“remotedev调试器--主机名localhost--端口5678--injectserver”，
“eslint”：“/node_modules/.bin/eslint”
},
“远程开发”：{
“主机名”：“本地主机”，
“港口”：5678
},
“笑话”：{
“预设”：“玩笑博览会”，
“transformIgnorePatterns”：[
“节点模块/（？！（react native | jest resolve | expo | lodash | enzyme | prop type | react | jest enzyme | enzyme | jest expo | jest serializer enzyme | react native elements | react native google places autocomplete）/）”
],
“设置文件”：[
“/config/jest/globalFetch.js”，
“/config/enzyme/index.js”
]
},
“依赖项”：{
“@expo/vector图标”：“^6.2.2”，
“axios”：“^0.17.1”，
“世博会”：“^23.0.4”，
“酶”：“^3.3.0”，
“酶-适配器-反应-16”：“^1.1.1”，
“lodash”：“^4.17.4”，
“道具类型”：“^15.6.0”，
“反应”：“16.0.0-alpha.12”，
“反应本机”：“0.50.3”，
“反应本机元素”：“^0.18.5”，
“react native google places自动完成”：“^1.3.6”，
“反应本机映射”：“^0.18.0”，
“反应导航”：“^1.0.0-beta.23”，
“react navigation redux”：“^0.1.0”，
“react redux”：“^5.0.6”，
“redux”：“^3.7.2”，
“redux记录器”：“^3.0.6”，
“redux承诺”：“^0.5.3”，
“redux thunk”：“^2.2.0”，
“redux模拟商店”：“^1.4.0”，
“远程redux开发工具”：“^0.5.12”，
socketcluster服务器“^9.1.2”
}
}

酶全局配置 酶的配置脚本，见下面的

package.json

，如下所示

//config/enzyme/index.js
从“酶”进口酶；
从'enzyme-Adapter-react-16'导入适配器；
//设置酶的反应适配器
configure（{adapter:newadapter（）}）；

例子 全局模拟 世博工具包 在我的项目的根目录中，我将mock放在

\uuuumocks\uuuuuu

目录中，这样Jest就会自动拾取它们

这将解决使用本机移动API调用（特别是ExpoKit SDK）而不仅仅是HTTP REST的情况

/\uuuuu mocks\uuuu/expo.js
开玩笑的模仿（'expo'，（）=>{
const expo=require.requireActual（“expo”）；
常量位置模拟={
纬度：1，
经度：1，
};
//模拟世博图书馆
返回{
地点：{
setApiKey:jest.fn（），
getCurrentPositionAsync：
选项=>
新承诺(
resolve=>resolve（选项{
coords:Mock，
}：null）
无效的
)
,
},
常数：{
舱单：{
额外：{google:{maps:'yourapi KEY HERE'}}，
},
},
权限：{
地点：'地点'，
askAsync:type=>newpromise（解析=>
解析（类型==‘位置’？
{状态：'已授予'}
：null）），
},
……世博会，
};
});

Redux-Mock-Store 要使用Thunk配置Redux，您不必在每次（操作）测试之前都这样做。这意味着在测试中导入

redux mock store

将使用以下实现：

/\uuuuu mocks\uuuu/redux-mock-store.js
从“redux模拟存储”导入configureMockStore；
从“redux thunk”导入thunk；
const middleware=[thunk]；
const mockStore=configureMockStore（中间件）；
导出默认mockStore；

常数 用作重复操作类型

//src/Constants.js
常量映射常量={
地图位置已更改：“地图区域已更改”，
MAP\u LOCATION\u BUSY:'MAP:GETTING LOCATION'，
MAP\u LOCATION\u SUCCESS:'MAP:GET LOCATION SUCCESS'，
映射位置失败：“映射：获取位置失败”，
};

Redux动作创建者 在这里，我们在操作测试中使用了上述配置

//src/Actions/\u\u测试\u\u/MapActions.test.js
从“redux模拟存储”导入configureMockStore