Closed herman-rogers closed 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)
When attempting to add
require('react-native-mock-render/mock');
to my project to mock out the react native implementation I'm faced with anEnzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
I've attempted to setup the JSDOM as such:
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:
Same error however.