React native-testing med Typescript og Jest

Jeg prøver å starte en test med react-native/expo og typescript. Jeg har laget en app med expos grunnleggende typescript-mal.

For å begynne å teste fulgte jeg expos dokumentasjon om testing med Jest. Jeg har lagt til jest-expo og react-test-renderer som utviklingsavhengigheter, og har oppdatert package.json i henhold til dokumentasjonen:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    ...
    "test": "jest"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/jest": "^26.0.23",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@types/react-test-renderer": "^17.0.1",
    "jest-expo": "^41.0.0",
    "react-test-renderer": "^17.0.2",
    "typescript": "~4.0.0"
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ]
  }
}

Dette er testen, App.test.tsx:

import renderer from 'react-test-renderer';
import App from "../App";
import React from "react";

describe('<App />', () => {
    it('has 1 child', () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree.children.length).toBe(1);
    });
});

I redigeringsprogrammet (Webstorm) viser den 2 feil:

  1. tree Object is possibly 'null'.
  2. Egenskapen 'children' finnes ikke på typen 'ReactTestRendererJSON | ReactTestRendererJSON[]'. Egenskapen 'children' finnes ikke på typen 'ReactTestRendererJSON[]'.

Og også, når jeg kjører testen, gir den en annen feil for <App />

renderer.create(<App />).toJSON():

Elementtypen er ugyldig: forventet en streng (for innebygde komponenter) eller en klasse/funksjon (for sammensatte komponenter), men fikk: objekt.

Kan du vennligst hjelpe meg med hva jeg mangler her. Hvordan teste React Native med TypeScript og Jest?

Svar #1

Det ser ut til å være en feil/problem med Expos Jest-preset, da jeg fant ut at det finnes en åpen GitHub-issue relatert til feilen.

For å fikse problemet i henhold til GitHub-svaret og som Kipnoedels har påpekt, måtte jeg legge dette til i min jest-konfigurasjon i package.json:

"moduleFileExtensions": ["ts", "tsx", "js"]

Så, package.json ser omtrent slik ut:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    ...
    "test": "jest"
  },
  "dependencies": {
    ..
  },
  "devDependencies": {
    ...
  },
  "private": true,
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],
    "moduleFileExtensions": ["ts", "tsx", "js"]
  }
}

Relaterte artikler