如何使用酶作爲反應天然與笑話

我遵循 - 或嘗試了幾個職位如何做到這一點，包括airbnb酶指南（分開）react-native和jest。（延續：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或How to use Jest with React Native）如何使用酶作爲反應天然與笑話

但我不斷收到許多警告，（我有多個組併發測試）每當我試圖渲染（不安裝，它崩潰）的任何天然成分。警告總是關於一個本地道具不被認可。

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

任何人誰設置了工作，承認如何刪除警告或如何解決它？

謝謝

來源

2017-02-04 jsdario

您是否在自己的組件中渲染了？看起來你正在傳遞一些無法識別的道具。你可以添加組件的實現以及測試嗎？我可以使用更多的上下文來幫助你;） – guitoof

我不確定關於你的情況與反應原生。我可以分享我的使用笑話+酶與標準反應的情況。

當我需要測試某些組件並將其與其他組件隔離時，我使用了jest.mock，

jest.mock('../ComponentToBeMocked',() => { 
    return() => null; 
});

最初我找到了第二個參數（函數）應該只返回一個表示模擬組件名稱的字符串的例子。但是在那種情況下，我看到那令人分心的Unknown props警告。

來源

2017-03-20 11:15:11

react-native的問題是DOM不兼容。 – jsdario

爲單元開玩笑測試組件，您可以用酶到JSON

npm install --save enzyme-to-json

那麼你的測試應該是這樣的：

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

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

來源

2017-03-20 22:32:57 guitoof

我已經這樣做了，但我更感興趣的是通過組件道具導航。 – jsdario

所以我知道這是一個有點老，但我遇到了Jest，Enzyme和React Native的問題，我發現這篇文章 - 希望這個解決方案能夠幫到你。

開始 - 酶不支持安裝React Native並且僅支持淺色渲染。這對我來說還不夠好，因爲我需要從組件到api的端到端測試，這導致我到react-native-mock-render。這樣做可以讓我們在瀏覽器環境中運行本機內容，讓我們使用Enzyme進行測試 - 所有對React Native和組件的調用都如您所願。

要設置它，您需要安裝JSDOM，react-native-mock-render，Enzyme 3.0+和Jest 20.0.0+。然後你開玩笑安裝文件（這是在您的package.json指定）內包含以下代碼：

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');

就是這樣 - 你都設置在酶安裝組件並進行測試。

如果你想看到一個完整的樣品檢查react-native-mock-render-example。這與React 16，React Native 0.51和Enzyme 3.2一起工作。

來源

2017-12-08 17:07:09

如何使用酶作爲反應天然與笑話

回答

相關問題