开玩笑:尝试导入本机模块时出错；无法用模拟来预防 [英] Jest: Error when trying to import Native Modules; unable to prevent with Mock
问题描述
我最近被带入了一个测试工程师团队，我正在尝试在我们的React Native应用程序上启动并运行Jest单元测试.我的前任已经编写了数十个单元测试，其中大多数未成功运行.
I've recently been brought on to a team as Test Engineer and I'm trying to get Jest unit tests up and running on our React Native app. My predecessor has already authored dozens of unit tests, most of which are not running successfully.
运行npm test
FAIL __tests__/index.test.js
● Test suite failed to run
TypeError: Cannot read property '_addDeviceToGroup' of undefined
4 | } from 'react-native';
5 | const {
> 6 | _addDeviceToGroup,
| ^
7 | } = NativeModules._BleAssociator
8 | const {
9 | _queryName,
at Object._addDeviceToGroup (app/utils/mesh.js:6:3)
at Object.<anonymous> (app/actions/hierarchy.js:26:1)
at Object.<anonymous> (app/actions/organizations.js:14:1)
当我们实现由后端团队编写的自定义本机模块时，问题似乎再次出现了(同样，在我加入团队之前).
It seems as though the issue arose when we implemented custom Native Modules written by our backend team (again, before my joining the team).
经过一些研究，我决定继续进行以下假设:这与Jest无法解析提供本机模块的引擎中的Objective-C有关，而与我们的堆栈没有任何问题(很高兴考虑这种可能性，但).
After some research, I decided to proceed under the assumption that this has to do with Jest's inability to parse the Objective-C in the Engine that's feeding in the Native Modules and not some issue with our stack (happy to consider that possibility, though).
我已经查看了Jest文档，专门通过几个相关文档进行了梳理(使用Jest使用ES模块导入，测试带有Jest Mock的本机模块，《本机模块指南》 )
I've reviewed the Jest documentation, combing specifically through a couple relevant documents (Mock Functions, Using Jest with ES Module Imports, Testing Native Modules with Jest Mock, React Native Modules Guide)
My issue appears to be identical to this issue; however, the fix is not working for me. Even when mocking the NativeModules, I get the same error.
我已经熟悉将Jest模拟悬挂在import语句上方的概念，但是我不清楚为什么该模拟位于上面链接的问题中的describe块中(可能不是重置模拟功能)为了避免混淆每个.mock属性的返回数据...我离题了.
I've become familiar with the notion that Jest mocks are hoisted above the import statements, but it's not clear to me why the mocks are in the describe block in the issue I linked above (other than maybe to reset the mock function for each new test in case so as to not confound the .mock property's return data... I digress).
在我看来，在执行任何代码之前，导入期间都会发生错误.为了测试这一点，我来回了，注释掉除了import语句和模拟之外的所有内容.这样做，我仍然遇到相同的错误.当我使用beforeEach()mocha语句时，也是这种情况，就像上面链接的问题的解决方案一样.
To me, it seems the error is occurring during the imports, before any of the code is executed. To test this, I've gone back and forth, commenting out everything but the import statements and the mocks. Doing this, I still get the same error. This is also the case when I use a beforeEach() mocha statement, as in the solution to the issue linked above.
解决此错误的唯一方法是完全注释掉导入.
The only thing that fixes this error commenting out the imports altogether.
我还没有尝试过错误处理(try/catch)，因为我不确定如果执行catch块，如何仍能成功导入正在测试的组件.
I have not tried error handling (try/catch), as I'm not certain how I could still successfully import the component I'm testing if the catch block is executed.
很抱歉所有这些背景.我已经花了几个工作日，所以我想确定我的所有基地都被覆盖了.
Sorry for all that background. I have spent a couple workdays on this, so I want to make certain all my bases are covered.
这是一个示例测试:
/__tests__/app/components/Onboarding/Splash/Splash.test.js
import {
NativeModules,
} from 'react-native';
import { Splash } from '../../../../../app/components/Onboarding/Splash/Splash.js';
// import login from '../../../../../app/actions/login';
// NativeModules._BleAssociator._addDeviceToGroup = jest.fn();
// login = jest.fn;
export default function({React, shallow}) {
const props = {
// some test props
};
function make({navigation, getUserInfo, verifyUser, login} = props) {
return shallow(
// renders the component with props
);
}
describe('<Splash />', () => {
// I added this part (didn't help)
beforeEach(() => {
NativeModules._BleAssociator._addDeviceToGroup = jest.fn();
login = jest.fn;
});
// end part I added
// stuff (all the tests are in here)
});
}
NativeModules和登录导入，注释掉的行以及beforeEach()块是我间歇性尝试的尝试，无济于事.
The NativeModules and login imports, the commented out lines, and the beforeEach() block are things I've tried intermittently to no avail.
当尝试跟踪此错误时，我发现在尝试运行NativeModules的脚本(如ES6 import运行它引用的脚本)的原始Splash.js中注释掉import语句可以修复我看到的错误.正如您可能从堆栈跟踪中收集到的那样，它们深入了很多层次.
When trying to trace this error, I found that commenting out import statement in the original Splash.js that run scripts (as ES6 import runs the script it references) that try to import NativeModules fixes the error I see. As you might have gleaned from the stack trace, these go many levels deep.
PHEW.如果您已经阅读了本文，那么我非常感谢您的帮助.
PHEW. If you've read this far, I really appreciate the help.
很抱歉有一个如此漫长而复杂的问题.如您所见，我们有一个庞大而复杂的堆栈.上面的问题可能无法解决，因为在发生错误之前发生了许多链式导入.
Sorry to have such a long and complicated question. As you can see, we have a large and convoluted stack. It's possible the fix from the issue above isn't working because of how many chained imports happen before getting to the error.
如果它是我所缺少的微小修复程序，或者有某种我不知道的浅"类导入，我会喜欢的.
I'd love it if it's a tiny fix that I'm missing or if there was some sort of "shallow"-ish import that I'm not aware of.
感谢您的帮助.欢迎任何输入.
Thanks a bajillion for your help. Any input is welcome.
推荐答案
我找到了解决方案.我担心可能无法在所有import语句中跟踪这些模拟.真正发生的是我格式化了错误的模拟程序.
I found the solution to this. I had been worried that perhaps the mocks weren't being tracked through all the import statement. What was really happening was I was formatting the mocks wrong.
I did not see this in the standard Jest documentation, but instead found it here.
将其添加到我的* .test.js文件中是可行的:
Adding this to my *.test.js files worked:
import { NativeModules } from 'react-native';
jest.mock('NativeModules', () => {
return {
_BleAssociator: {
_addDeviceToGroup: jest.fn()
},
// ... and so on for all the other methods expected in NodeModules
};
});
就后代而言，我认为最好将其保存在自己的脚本中并导入测试中……我还没有尝试过.
Just for posterity's sake, I think this would be best kept in its own script and imported into the tests... I haven't tried this yet.
这篇关于开玩笑:尝试导入本机模块时出错；无法用模拟来预防的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
