Si vous intégrez test avec Jest et Enzyme dans la nouvelle version 0.57 de React et TypeScript, ils ne fonctionneront pas. Voici les étapes à suivre pour reproduire:
Créez un nouveau projet React Native:
react-native init MyApp -package "com.my.app" --template TypeScript && node MyApp/setup.js
Installez tous les paquets liés à Jest et Enzyne:
npm install --save-dev react-dom enzyme enzyme-react-adapter-16 jest-fetch-mock ts-jest
Ajoutez la configuration de plaisanterie:
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache",
"setupFiles": [
"./tests/setup.js"
]
}
Ajoutez un fichier tests/setup.js
et incluez la configuration suivante:
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { NativeModules } from "react-native";
global.fetch = require("jest-fetch-mock"); // eslint-disable-line no-undef
jest.mock("react-native-config");
Enzyme.configure({ adapter: new Adapter() });
Enfin, ajoutez un test de base (App.test.tsx) pour vérifier si Jest et Enzyme fonctionnent:
import React from "react";
import { shallow } from "enzyme";
import { View } from "react-native";
import App from "./App";
const createTestProps = props => ({
...props
});
describe("App", () => {
describe("rendering", () => {
let wrapper;
let props;
beforeEach(() => {
props = createTestProps({});
wrapper = shallow(<App {...props} />);
});
it("should render a <View />", () => {
expect(wrapper.find(View)).toHaveLength(1);
});
});
});
Si vous essayez maintenant d'exécuter le test, le message d'erreur que vous obtenez est le suivant:
FAIL app/App.test.tsx
● Test suite failed to run
Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "<Directory"
Il semble que cela a quelque chose à voir avec Babel.
J'ai trouvé la réponse ici dans ce numéro: https://github.com/facebook/metro/issues/242#issuecomment-421139247
En gros, ajoutez ceci à votre section Jest dans package.json
:
"transform": { "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js" }
ayant eu un problème similaire lors de la mise à niveau à 0.57, mon package.json
contenait toujours une entrée pour babel-preset-react-native
(qui est maintenant obsolète en faveur de metro-react-native-babel-preset
). Tout ce que je devais faire était
yarn remove babel-preset-react-native
et alors
yarn add metro-react-native-babel-preset --dev
Enfin, assurez-vous de changer votre .babelrc
de
{
"presets": ["react-native"]
}
à
{
"presets": ["module:metro-react-native-babel-preset"]
}
Plus d'informations peuvent être trouvées ici
Si j'utilise "presets": ["react-native"]
, la production/développement est interrompu mais les tests fonctionnent.
Si j'utilise "presets": ["module:metro-react-native-babel-preset"]
, les tests sont interrompus mais la production/développement fonctionne.
Je ne sais pas pourquoi c'est comme ça, mais une solution .babelrc pour moi comme ci-dessous fonctionne aussi bien pour le développement/la production que pour les tests. Ajoutez simplement le paramètre env à votre fichier .babelrc.
"env": {
"test": {
"presets": ["react-native"]
},
"production": {
"presets": ["module:metro-react-native-babel-preset"]
},
"development": {
"presets": ["module:metro-react-native-babel-preset"]
}
}