0

I have a simple test

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { CancelButton } from '../ClientApp/components/CancelButton';

describe('A suite', function() {
  it('should render without throwing an error', function() {
    expect(shallow(<CancelButton />).contains(<button className="btn btn-default"></button>)).toBe(true);
  });

  it('should be selectable by class "foo"', function() {
    expect(shallow(<CancelButton />).contains(<button className="btn btn-default"></button>).toBe(true);
    expect(shallow(<CancelButton />).is('.btn')).toBe(true);
  });

  it('should mount in a full DOM', function() {
    expect(mount(<CancelButton />).find('.btn').length).toBe(1);
  });
});

When I run the test I get

 FAIL  ClientApp/reactTests/CancelButton.test.js
  ● Test suite failed to run

    \ClientApp\reactTests\CancelButton.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

I called this file CancelButton.test.js and placed it in reactTests folder. It seems that the JSX passed into the shallow function is not being recognized as JSX. I am getting errors around the '<' and normal "html: element syntax. I am not sure how to get around this in writing the test?

Kevin Burton
  • 2,032
  • 4
  • 26
  • 43
  • I think you need to save the file as `CancelButton.test.jsx` – Ishant Solanki Oct 14 '18 at 00:01
  • Thank you for the suggestion. But, that didn't allow the test to run.In fact it showed more errors than with the extension .js. About the same number and type of errors when renamed to .ts. – Kevin Burton Oct 15 '18 at 02:36
  • can you provide the full stack trace of errors? Also, the configuration file of the test runner would be helpful. – Ishant Solanki Oct 16 '18 at 10:43
  • when I do `npm run test` I get '' FAIL ClientApp/reactTests/CancelButton.test.js ● Test suite failed to run C:\Users\Kevin\Projects\AspReact\AspReact\ClientApp\reactTests\CancelButton.test.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'; ^^^^^ SyntaxError: Unexpected identifier at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) '' – Kevin Burton Oct 18 '18 at 06:12
  • I found a duplicate [here](https://stackoverflow.com/questions/43366382/jest-es6-modules-unexpected-module-import). Maybe that helps. – Ishant Solanki Oct 19 '18 at 09:02
  • Thank you. This is not easy. My project uses webpack and TypeScript which according to the docs represent “special” challenges. I am having a hard time seeing what in the documentation applies to my project. – Kevin Burton Oct 20 '18 at 11:49
  • Thanks again. Now I am getting errors regarding the setupEnzyme.ts that cited in this link Cannot use 'new' with an expression whose type lacks a call or construct signature. Plus this doesn't get rid of all the "syntax" errors that are flagged in the test itself (describe and it are not defined) – Kevin Burton Oct 21 '18 at 14:41

0 Answers0