Я занимаюсь разработкой в React Native и пытаюсь настроить шутливое тестирование, следуя инструкциям на https://airbnb.io/enzyme/docs/guides/react-native.html.
Я думаю, что все настроил правильно. Вот мой конфиг:
//setup-tests.js
import "react-native";
import "jest-enzyme";
import Adapter from "enzyme-adapter-react-16";
import Enzyme from "enzyme";
// Set up DOM in node.js environment for Enzyme to mount to
const { JSDOM } = require("jsdom");
const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
const { window } = jsdom;
function copyProps(src, target) {
Object.defineProperties(target, {
...Object.getOwnPropertyDescriptors(src),
...Object.getOwnPropertyDescriptors(target)
});
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
copyProps(window, global);
// Set up Enzyme to mount to DOM, simulate events, and inspect the DOM in tests.
Enzyme.configure({ adapter: new Adapter() });
/* Ignore some expected warnings
* see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16
* see https://github.com/Root-App/react-native-mock-render/issues/6
*/
const originalConsoleError = console.error;
console.error = message => {
if (message.startsWith("Warning:")) {
return;
}
originalConsoleError(message);
};
// jest.config.js
module.exports = {
setupFilesAfterEnv: "<rootDir>setup-tests.js"
};
// Test.test.js
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import { Provider } from "react-redux";
import { Text } from "react-native";
import LoginView from '../js/LoginView'
Через мгновение вы увидите вершину LoginView.
Вы заметите, что я даже не написал никаких тестов в тестовом файле, я просто пытаюсь довести шутку до точки, где он может оценить тест.
Без import LoginView jest запускается и «не работает», потому что мой набор тестов должен содержать хотя бы один тест. Звучит хорошо.
При добавлении в import LoginView я получаю эту ошибку (которая показывает операторы импорта в верхней части LoginView:
import Button from './buttons/Button';
^^^^^^
SyntaxError: Unexpected identifier
1 | import React, { Component } from "react";
> 2 | import { Input, Button, Image } from "react-native-elements";
| ^
3 | import { Text, View } from "react-native";
4 | import { connect } from "react-redux";
5 | import F8StyleSheet from "./F8StyleSheet";
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
at Object.<anonymous> (js/LoginView.js:2:1)
Так что это не имеет смысла для меня по ряду причин.
LoginView визуализируется нормально в реальном приложении, без сбоев или предупреждений «Неожиданный идентификатор» или чего-либо еще - Нижние стрелки в ошибке в строке 2 указывают на
import, что, конечно, не должно быть неожиданным.
- Тогда есть верхние стрелки, которые указывают линию от
react-native-elements, поэтому я не знаю об этом.
Теперь мне приходит в голову, что файл jest.config.js требует, чтобы я использовал module.exports, и терпит неудачу / вылетает при попытке использовать export default { setupFiles } (или, однако, я пытался это сделать, позволяя VS Code обновить это к синтаксису ES6). Так что, может быть, поэтому он не нравится import.
Даже если это так, я не знаю, что, черт возьми, делать дальше.
Обновление
Я вставил код, предложенный в ответе Брайана, и теперь получаю все новые ошибки. Несмотря на то, что ошибки предполагают исправления, похоже, это не помогает - я добавил следующее к своему package.json в jest. Я не уверен, где Dimensions.js в любом случае; плюс, я бы предположил, что вся эта настройка, которую я делаю для React Native, в частности, будет знать, как определить, что file.ios.js и file.android.js эквивалентны file.
Вот мое "исправление", следуя инструкциям, которое не помогает вообще.
"moduleFileExtensions": [
"js",
"json",
"jsx",
"ts",
"tsx",
"node",
"ios.js",
"android.js"
]
А вот и новые ошибки.
FAIL tests/Test.test.js
● Test suite failed to run
Cannot find module './Platform' from 'Dimensions.js'
However, Jest was able to find:
'./Platform.android.js'
'./Platform.ios.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
However, Jest was able to find:
'../Utilities/Dimensions.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
However, Jest was able to find:
'buttons/Button.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
However, Jest was able to find:
'../js/LoginView.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:229:17)
at Object.require (node_modules/react-native/Libraries/Utilities/Dimensions.js:14:18)