How to use an enzyme for a native reaction with a joke

Question

I followed him or tried several posts on how to do this, including a guide for the airbnb enzymes (separately) react-nativeand jest. (For example: 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 or How to use Jest with React Native )

But I constantly get a lot of warnings (I have several sets of parallel tests) whenever I try to render (and not mount, it crashes) some kind of native component. Warnings always that the local media is not recognized.

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

Anyone who works with the settings will recognize how to remove the warning or how to solve it?

thank

Answer 1

So, I know this is a little outdated, but I had problems with Jest, Enzyme and React Native, and I found this post - I hope this solution helps.

- Enzyme React Native . , api, react-native-mock-render, native , Enzyme - React Native , .

, JSDOM, response-native-mock-render, Enzyme 3.0+ Jest 20.0.0+. jest ( .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');

- Enzyme .

, react-native-mock-render-example. React 16, React Native 0.51 Enzyme 3.2.

Answer 2

. jest + .

- , jest.mock, .

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

, () , . Unknown props.

Answer 3

unit test , -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();
});