Wie man Enzym für reactive-native mit Scherz benutzt

Question

Ich habe -oder versucht- mehrere Beiträge darüber, wie es zu tun, einschließlich der Airbnb-Enzym-Leitfaden für (getrennt) react-native und jest. (Z: https://medium.com/@childsmaidment/testing-react-native-components-with-enzyme-d46bf735540#.6sxq10kgt, https://blog.callstack.io/unit-testing-react-native-with-the-new-jest-i-snapshots-come-into-play-68ba19b1b9fe#.4iqylmqh5 oder How to use Jest with React Native)

Aber ich halte viele Warnungen bekommen (ich mehrere Menge gleichzeitiger Tests haben), wenn ich versuche zu machen (nicht montieren, es stürzt ab) jede native Komponente. Warnungen beziehen sich immer darauf, dass eine native Prop nicht erkannt wird.

Warning: Unknown props `focus`, `secureTextEntry` on <TextInput> tag. Remove these props from the element. 
      in TextInput (created by TextInput) 
      in TextInput (created by PasswordInput) 

Wer hat eine Einrichtung funktioniert, erkennt, wie die Warnung zu entfernen oder wie es zu lösen?

Dank

Answer 1

Ich bin mit reagieren-native Ihren Fall in Bezug auf nicht sicher. Ich kann meinen Fall der Verwendung von jest + Enzym mit Standard-Reaktion teilen.

Wenn ich etwas Komponente testen und von anderen isolieren musste, benutzte ich , z.B.

Zunächst fand ich Beispiele, wenn das zweite Argument (eine Funktion) nur eine Zeichenfolge zurückgeben sollte, die einen Namen der mokierten Komponente darstellt. Aber in diesem Fall habe ich diese ablenkende Unknown props Warnung gesehen.

Answer 2

Um Einheit testen Sie Ihre Komponente mit jest können Sie mit Enzym-to-json

npm install --save enzyme-to-json 

dann würde Ihr Test wie folgt aussehen:

import { shallow } from 'enzyme'; 
import { shallowToJson } from 'enzyme-to-json'; 
import MyComponent from './MyComponent'; 

it('should render component', => { 
    expect(shallowToJson(shallow(<MyComponent />))).toMatchSnapshot(); 
}); 

Answer 3

Also ich weiß, das ist ein bisschen alt, aber ich hatte Probleme mit Jest, Enzyme und React Native und ich fand diesen Beitrag - hoffentlich wird diese Lösung helfen.

Zum Anfang - Enzym unterstützt nicht die Montage React Native und unterstützt nur flache Rendering. Das war nicht gut genug für mich, da ich End-to-End-Tests von der Komponente zur API brauchte, die mich zu react-native-mock-render führten. Was das bedeutet ist, dass wir in einer Browser-Umgebung reagieren können, die wir mit Enzyme testen können - alle Aufrufe von React Native und die Komponenten funktionieren wie erwartet.

Um dies einzurichten, müssen Sie JSDOM, reactive-native-mock-render, Enzym 3.0+ und Jest 20.0.0+ installieren. Und dann in Ihrem Scherz Setup-Datei (die in Ihrem package.json angegeben) den folgenden Code:

const { JSDOM } = require('jsdom'); 

const jsdom = new JSDOM(); 
const { window } = jsdom; 

function copyProps(src, target) { 
    const props = Object.getOwnPropertyNames(src) 
    .filter(prop => typeof target[prop] === 'undefined') 
    .map(prop => Object.getOwnPropertyDescriptor(src, prop)); 
    Object.defineProperties(target, props); 
} 

global.window = window; 
global.document = window.document; 
global.navigator = { 
    userAgent: 'node.js', 
}; 
copyProps(window, global); 

// Setup adapter to work with enzyme 3.2.0 
const Enzyme = require('enzyme'); 
const Adapter = require('enzyme-adapter-react-16'); 

Enzyme.configure({ adapter: new Adapter() }); 

// Ignore React Web errors when using React Native 
console.error = (message) => { 
    return message; 
}; 

require('react-native-mock-render/mock'); 

Und das ist es - Sie sind alle Setup-Komponenten in Enzyme zu montieren und sie zu testen.

Wenn Sie eine vollständige Probe sehen möchten, überprüfen Sie react-native-mock-render-example. Dies funktioniert mit React 16, React Native 0.51 und Enzyme 3.2.