Как использовать фермент для реакции-родной со шуткой

Question

Я поинтересовался или поставил несколько сообщений о том, как это сделать, в том числе руководство энзима 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) 

Любой, у кого есть работа, признает, как удалить предупреждение или как его решить?

Благодаря

Answer 1

Я не уверен относительно вашего дела с реагировать родной. Я могу поделиться своим случаем использования шутки + фермент со стандартным реагированием.

Когда мне нужно было проверить какой-то компонент и изолировать его от других, я использовал jest.mock, например.

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

Первоначально я нашел примеры, когда второй аргумент (функция) должен возвращать только строку, представляющую имя изделенного компонента. Но в этом случае я увидел, что отвлекает предупреждение Unknown props.

Answer 2

Для модульного тестирования вашего компонента с шуткой вы можете использовать фермент к 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(); 
}); 

Answer 3

Так что я знаю, что это немного но у меня были проблемы с Jest, Enzyme и React Native, и я нашел это сообщение - надеюсь, это решение поможет.

Для начала - Enzyme не поддерживает установку React Native и поддерживает только мелкую визуализацию. Это было недостаточно для меня, поскольку мне нужны сквозные тесты от компонента к api, которые приводят меня к react-native-mock-render. Это позволяет нам запускать реакцию native внутри среды браузера, которая позволяет нам тестировать с помощью Enzyme - все вызовы React Native и компоненты работают так, как вы ожидали.

Чтобы установить это, вам необходимо установить JSDOM, action-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.