formidable-webview/ubiquitous

🚀 A collection of libraries to support React Native Webview in diverse environments.

ubiquitous's Issues

Cannot resolve node-fetch

When installing the ersatz package with a node version >10, I get the following error which seems like unexpected behaviour:

error [email protected]: The engine "node" is incompatible with this module. Expected version "^10.17.0". Got "16.0.0"
error Found incompatible module.

If I choose to ignore the issue and pass --ignore-engines (not ideal I realise, but it's not obvious to me that this should cause serious issues), I then get the following error after importing the package:

 BUNDLE  ./index.js 

error: Error: While trying to resolve module `node-fetch` from file `[path/to/my/code]/node_modules/@formidable-webview/ersatz/lib/commonjs/SourceLoader.js`, the package `[path/to/my/code]/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`[path/to/my/code]/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/dist/index.cjs`. Indeed, none of these files exist:

  * [path/to/my/code]/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/dist/index.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * [path/to/my/code]/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/dist/index.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at DependencyGraph.resolveDependency ([path/to/my/code]/node_modules/metro/src/node-haste/DependencyGraph.js:436:17)
    at Object.resolve ([path/to/my/code]/node_modules/metro/src/lib/transformHelpers.js:317:42)
    at resolve ([path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
    at [path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
    at Array.reduce (<anonymous>)
    at resolveDependencies ([path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
    at [path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep ([path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)
    at _next ([path/to/my/code]/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:9)

I'm keen to use this package in my project but I have been going in circles staring at these errors for a while. I'd really appreciate some guidance, information on why this might be expected, or anything I can do to help. Thanks!

"Project Homepage"-link from npmjs leads to a 404

Hello,
that link points to https://github.com/formidable-webview/tree/master/packages/ersatz-testing#readme

but it seems that it should point to https://github.com/formidable-webview/ubiquitous/tree/master/packages/ersatz#readme

Cheers

Documented example test fails

I've tested the documented example from here and get a failing test. I should add, I've created a new file and am testing this in isolation, copied & pasted. Stepping through the issue, _skeletton.webViewLifecycle is undefined. I couldn't find anything in JSDOMEngine.js or Skeletton.tsx that would set it. The error message is as follows:

MyComponent
✕ should make awesomeGlobal available to window with value “1” (375 ms)

● MyComponent › should make awesomeGlobal available to window with value “1”

TypeError: Cannot read property 'handleLoadStart' of undefined

  at initDOM (node_modules/@formidable-webview/ersatz/lib/commonjs/JSDOMEngine.tsx:77:20)
  at node_modules/@formidable-webview/ersatz/lib/commonjs/JSDOMEngine.tsx:120:12
  at mountMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6191:19)
  at Object.useMemo (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6487:16)
  at useMemo (node_modules/react/cjs/react.development.js:1521:21)
  at DOMEngine (node_modules/@formidable-webview/ersatz/lib/commonjs/JSDOMEngine.tsx:119:15)
  at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
  at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7288:20)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9068:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)

console.error
The above error occurred in the <ForwardRef(DOMEngine)> component:
in ForwardRef(DOMEngine) (created by SourceLoader)
in View (created by View)
in View (created by SourceLoader)
in SourceLoader (created by ForwardRef)
in ForwardRef (created by Skeletton)
in View (created by View)
in View (created by ScrollView)
in RCTScrollView (created by RCTScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by Skeletton)
in Skeletton (created by ForwardRef(Ersatz))
in ForwardRef(Ersatz) (created by MyComponent)
in MyComponent

Consider adding an error boundary to your tree to customize error handling behavior.

  at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
  at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
  at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
  at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
  at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
  at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
  at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)

console.error
Error: Uncaught [TypeError: Cannot read property '_ownerDocument' of undefined]
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at DocumentImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
at dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:475:9)
at node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:480:11
at tryCallTwo (node_modules/promise/lib/core.js:45:5)
at doResolve (node_modules/promise/lib/core.js:200:13)
at new Promise (node_modules/promise/lib/core.js:66:3) TypeError: Cannot read property '_ownerDocument' of undefined
at innerInvokeEventListeners (/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:327:26)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at EventTargetImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
at Document. (node_modules/jsdom/lib/jsdom/browser/Window.js:776:9)
at Document.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at DocumentImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)

  at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
  at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
  at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  at DocumentImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Time: 3.001 s, estimated 4 s
Ran all test suites matching /MyComponent.test.tsx/i.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: jest "MyComponent.test.tsx"
npm ERR! Exit status 1

I would however, like to point out that the following snapshot test is sucessful, where WebView is a child component of Home:

  it.only(`should match snapshot`, () => {
    const component = render(<Home navigation={navigationMock} />);
    expect(component).toMatchSnapshot();
  });

SyntaxError: Cannot use import statement outside a module

I'm trying to run doc example, and getting this error:

    Test suite failed to run
    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/{my_project_name}/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/src/index.js:9
    import http from 'node:http';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@formidable-webview/ersatz/lib/commonjs/SourceLoader.tsx:3:1)

I tried to put '@babel/plugin-transform-react-jsx' in babel.config.js, but this don't resolve the problem.

Code in config/__mocks__/react-native-webview.js:

import Ersatz from '@formidable-webview/ersatz';
export default Ersatz;

Code in src/components/MyComponent/tests/MyComponent.test.tsx:

jest.mock('react-native-webview');
import * as React from 'react';
import { waitForWindow } from '@formidable-webview/ersatz-testing';
import { render } from '@testing-library/react-native';
import { default as WebView, WebViewProps } from 'react-native-webview';
 
const MyComponent = ({ source }: Pick<WebViewProps, 'source'>) => (
  <WebView source={source} injectedJavaScript={'window.awesomeGlobal = 1;'} />
);
 
describe('MyComponent', () => {
  it('should make awesomeGlobal available to window with value “1”', async () => {
    const window = await waitForWindow(
      render(<MyComponent source={{ html: '<div></div>' }} />)
    );
    expect(window.awesomeGlobal).toEqual(1);
  });
});

Could not resolve dependency: peer react-native-web@">=12.0.0" from @formidable-webview/[email protected]

Getting the following error when I try to install:

npm ERR! Could not resolve dependency:
npm ERR! peer react-native-web@">=12.0.0" from @formidable-webview/[email protected]

But the latest stable version of react-native-web is 0.19.10, so it seems like that peer dependency may be a mistake. Was it supposed to be "react-native-web": ">=0.12.0"? Or something else?

Bug: It won't install with npm

$ npm i --save-dev @formidable-webview/ersatz @formidable-webview/ersatz-testing

npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! prepareGitDep npm ERR! Unsupported URL Type "link:": link:./scripts/eslint-plugin
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     .npm/_logs/2020-10-24T10_20_03_565Z-debug.log
npm ERR! prepareGitDep
npm ERR! premature close

npm ERR! A complete log of this run can be found in:
npm ERR!     .npm/_logs/2020-10-24T10_20_04_173Z-debug.log

On the one occasion it added to my package.json, it didn't manage to add a directory to node_modules (and npm install erred with the same issue above. Only discarding the changes resolved the issue.

@formidable-webview/ersatz SyntaxError: Cannot use import statement outside a module

We can reproduce this by simple use the RunKit function on npmjs https://npm.runkit.com/%40formidable-webview%2Fersatz

Details:

/Users/leahxia/Desktop/mobile_client/node_modules/@formidable-webview/ersatz/node_modules/node-fetch/src/index.js:9
import http from 'http';
^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
  at Object.<anonymous> (node_modules/@formidable-webview/ersatz/lib/commonjs/SourceLoader.tsx:3:1)