React (Native) setup Jest pour tester le composant Contexte

Vous pouvez utiliser react-test-renderer que vous êtes déjà en utilisant dans les spécifications de votre projet.
Ce dont vous avez besoin est d'appeler testRenderer.getInstance () code > => vérifier l ' état actuel => invoquer certaines méthodes dont vous avez besoin pour tester => vérifier l' état mis à jour :

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      development: {
        plugins: ["transform-react-jsx-source"]
      }
    }
  };
};

L'état des autres tests ne sera pas affecté.

La seule chose dont j'avais besoin pour que cela fonctionne avec votre dépôt est de npm install whatwg-fetch@2.0.4 --save comme décrit ici . J'espère que cela vous aidera.

Même si cela est supposé être une autre question et la solution évidente est de créer un nouveau projet rn et de copier votre code dedans, mais voici ce que j'ai fait pour corriger les erreurs jest sur votre code:

Faire correspondre les versions (comme décrit dans les commentaires ...):

"expo": "^32.0.0",
"jest-expo": "^32.0.0",
// and maybe even
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",

2) À corriger une erreur

api.caller n'est pas une fonction

utilisez babel.config.js comme décrit ici :

import React from "react";
import { create } from "react-test-renderer";
import { ContextProvider } from "../Context";

describe("ContextProvider", () => {
  test("it updates dose correctly", () => {
    const component = create(<ContextProvider />);
    const instance = component.getInstance();

    expect(instance.getDose()).toBe(5);
    expect(instance.state.productData.dose).toBe("5 mg");

    instance.setDose(2);

    expect(instance.getDose()).toBe(2);
    expect(instance.state.productData.dose).toBe("2 mg");
  });

  test("it updates something else correctly", () => {
    // ...
  });
});

3) Utilisez yarn en raison de ceci

Si vous cherchez un remplaçant pour Enzyme, je pense que vous devriez regarder ici: https://callstack.github.io/react-native-testing-library/

Cette bibliothèque vous permettra d'utiliser la update fournie pour changer les valeurs que vous testez, puis les modifier à nouveau.

Excellente bibliothèque pour React Native - la page de démarrage dit tout ça . Si vous êtes intéressé par du code pour vous aider à démarrer, je peux également travailler sur quelque chose.

Je vous suggère de tester uniquement votre logique unitaire et d'envisager d'éviter complètement les tests de composants dans ce cas.

Vous pouvez extraire vos méthodes dans un "Presenter" pour traiter vos données et tester uniquement cette logique. Avec cette approche, il est facile de tester le présentateur qui a une logique d'entrée / sortie pure.

Le présentateur, par exemple, peut ressembler à ceci:

// DosePresenter.test.js

describe('DosePresenter tests', () => {
  let uut;

  beforeEach(() => {
    uut = require('./DosePresenter');
  });

  it('should process a dose', () => {
    const value = 10;
    const productData = {};
    expect(uut.processDose(value, productData)).toEqual(...);
  });
};

L'usage:

// Context.js

import * as DosePresenter from './DosePresenter';

const setDose = (value) => this.setState(DosePresenter.processDose(value, {...this.state}));

Maintenant, il devrait être plus facile de tester la logique:

// DosePresenter.js

const processDose = (value, productData) => {
  productData.dose = value.toFixed(0) + productData.dose.replace(/[\d\.]*/g, '')
  productData.productionTime = Conventions.datetimeStr();
  productData.hashSalt = this.makeHashSalt();
  return {productData, productDataHash: getHashOfproductData(productData)};
};

module.exports = {
  processDose
};