Root-App / react-native-mock-render

a fork of react-native-mock that renders
MIT License
85 stars 50 forks source link

Mock still requires adapter #29

Closed herman-rogers closed 6 years ago

herman-rogers commented 6 years ago

When attempting to add require('react-native-mock-render/mock'); to my project to mock out the react native implementation I'm faced with an Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

I've attempted to setup the JSDOM as such:

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

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

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

global.document = document;
global.window = document.defaultView;
global.navigator = {
  userAgent: 'node.js',
};

Object.keys(document.defaultView).forEach((property) => {
  if (global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

Although I'm not 100% sure that this is the correct setup for getting the adapter to work.

Edit:

Updated the code to match with JSDOM +10 and from the airbnb documentation:

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

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

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

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

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

Same error however.

herman-rogers commented 6 years ago

Ok so after some reading and looking around it seems as if jest with react-native-mock-render has some issues for other people (web errors showing, adapter issues, etc). And it seems as if its a confluence of this causing issues.

Essentially, I've found that there are issues with Enzyme 3.0+ (requiring an adapter) that's missing from the documentation of react-native-mock-render and other issues with upgrading React and React Native to version 16.0.0 and 0.51.0 respectively.

Overall, I just needed to update the setup methods to ignore erroneous errors and to setup the adapter - as well as work with new changes of jsdom 10+. The full setup is:

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
// but still show relevant errors
const suppressedErrors = /(React does not recognize the.*prop on a DOM element|Unknown event handler property|is using uppercase HTML|Received `true` for a non-boolean attribute `accessible`|The tag.*is unrecognized in this browser)/
const realConsoleError = console.error
console.error = message => {
  if (message.match(suppressedErrors)) {
    return
  }
  realConsoleError(message)
}

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

I've also modified the provided 'react-mock-render-example' so the full setup can be found at https://github.com/herman-rogers/react-native-mock-render-example.

Cheers - everything seems to be working nicely :) now onto writing integration tests.

Edit: (this can be closed now)