J'écris des tests pour réagir-natif avec Jest et Typescript, mais je suis avec un problème quand je me moque d'un module qui utilise export default
et export
.TS importations par défaut avec Jest maquette
ma maquette est la suivante:
// test.setup.js
jest.mock('react-native-text-input-mask',() => ({
default: 'TextInputMask',
mask:() => {},
unmask:() => {},
}));
mais la plaisanterie ne peut pas utiliser l'erreur de la cause default
e dans mon code lorsque le test est en cours d'exécution:
import React, { Component } from 'react'
import { } from 'react-native'
import TextInputMask, { mask } from 'react-native-text-input-mask'
console.log(TextInputMask) // {'default': 'TextInputMask', mask: [Function]}
console.log(mask) // [Function]
export default class Comp extends Component<> {
constructor(props) {
super(props)
}
render(): JSX.Element {
return (
<TextInputMask // error in this line
mask={'[0000]'}
/>
)
}
}
Erreur dans le test:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Comment puis-je simuler un module avec default export
et export
?
ma config plaisanterie:
// package.json
"devDependencies": {
"@types/fbemitter": "2.0.32",
"@types/jest": "21.1.1",
"@types/prop-types": "15.5.2",
"@types/react": "16.0.9",
"@types/react-intl": "2.3.2",
"@types/react-native": "0.48.9",
"@types/react-navigation": "1.0.20",
"@types/react-redux": "5.0.9",
"@types/react-test-renderer": "15.5.4",
"@types/redux-immutable-state-invariant": "2.0.2",
"@types/redux-mock-store": "0.0.11",
"@types/redux-storage": "4.0.10",
"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-plugin-jest-hoist": "21.2.0",
"babel-plugin-module-resolver": "2.7.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-preset-react-native": "4.0.0",
"chai": "4.1.2",
"chai-as-promised": "7.1.1",
"colors": "1.1.2",
"commitizen": "2.9.6",
"cz-conventional-changelog": "2.0.0",
"enzyme": "3.0.0",
"fbemitter": "2.1.1",
"husky": "^0.14.3",
"jest": "21.2.1",
"jest-cli": "21.2.1",
"jest-serializer-enzyme": "1.0.0",
"mocha": "3.5.3",
"plop": "1.9.0",
"prettier": "1.7.3",
"react-addons-test-utils": "15.6.2",
"react-dom": "16.0.0",
"react-native-debugger-open": "0.3.12",
"react-test-renderer": "16.0.0",
"redux-devtools-extension": "2.13.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-mock-store": "1.3.0",
"rimraf": "2.6.2",
"selenium-webdriver": "3.5.0",
"sinon": "4.0.0",
"standard-version": "4.2.0",
"ts-jest": "21.0.1",
"tslint": "5.7.0",
"tslint-config-prettier": "1.5.0",
"tslint-react": "3.2.0",
"typescript": "2.5.3",
"wd": "1.4.1"
},
"jest": {
"preset": "react-native",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{ts,tsx}",
"!src/**/*.test.{ts,tsx}",
"!src/**/*.d.ts",
"!build/**",
"!**/node_modules/**"
],
"coverageDirectory": "coverage",
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__scripts__/assetsTransformer.js",
"^@animations.+\\.(json)$": "<rootDir>/__scripts__/assetsTransformer.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"json",
"ts",
"tsx",
"ios.ts",
"android.ts"
],
"modulePathIgnorePatterns": [
"<rootDir>/build/"
],
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"setupFiles": [
"./__scripts__/test-setup.js"
],
"testPathIgnorePatterns": [
"<rootDir>/build/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|tcomb-form-native|react-navigation|lottie-react-native|jail-monkey|redux-persist/es/storage)"
],
"globals": {
"ts-jest": {
"useBabelrc": true
}
}
},
ma config TS:
// tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"jsx": "react-native",
"watch": true,
"allowJs": true,
"sourceMap": true,
"preserveConstEnums": true,
"removeComments": true,
"lib": [
"dom",
"es2017"
],
"diagnostics": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"strictNullChecks": false,
"noImplicitThis": false,
"moduleResolution": "node",
"outDir": "./build",
"rootDir": "./src",
"sourceRoot": ".",
"baseUrl": "./src",
"typeRoots": [
"./src/types"
],
"paths": {
"@assets/*": [
"../assets/*"
],
"@animations/*": [
"../animations/*"
]
},
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true
},
"types": [
"react",
"react-native",
"jest"
],
"include": [
"src/**/*"
],
"exclude": [
"index.android.js",
"index.ios.js",
"build",
"app",
"node_modules"
],
"compileOnSave": true
}