sospedra/reinput

Cannot be used with a simple Jest test routine

Closed this issue · 2 comments

luiseduardobrito commented

I'm having issues trying to setup a simple Jest test routine for a Login form I have an a React Native application. Mock is not a suitable option for I need to test the form itself to ensure everything is working properly.

My <App /> component displays two Reinput fields (email / password). Everything works properly in the Emulator and Device. The relevant Jest files and stack are shown below:

The jest config file:

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  setupFiles: [
    "./node_modules/react-native-gesture-handler/jestSetup.js"
  ],
};

The jest test file:

import 'react-native';
import React from 'react';
import { App } from '../src/App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});

The exception it generated:

 FAIL  __tests__/App-test.tsx
  ● 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:
     • 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:

    /node_modules/reinput/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default } from './Input'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      1 | import React from 'react';
    > 2 | import Reinput from 'reinput';
        | ^
      3 | import styled from 'styled-components/native';
      4 | import {Config} from '../../../config';
      5 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/ui/input/MaterialTextInput.tsx:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        22.812s

Any ideas/suggestions of what I could try? Would be pleased to send a PR with a simple test routine after I'm able to fix this issue.

sospedra commented

Hello! This has nothing to do with this lib. Because it's intended for react-native use only we don't transpile the lib. You'll need to specify on your Jest environment that you want to run Babel on reinput as well.

luiseduardobrito commented

Thank you for this information @sospedra, I will update this issue when I'm able to make it work and share the results.

  • 👍1