Unit testing React components in ASP.NET Core project

问题

I have managed to setup a basic React project using the React template in ASP.NET Core. I am not clear from the documentation and given this basic framework how I unit test individual components. I assume that I would use Jest and Enzyme to unit test the components but my efforts to set this up so far have failed. Let me list what I have done so far. 1) In the root of the project (above the ClientApp folder) I have created a tests folder. In that folder I have a single test named CancelButton.test.js that looks like:

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);
  });
});

I have modified the package.json to have the lines

  "scripts": {
    "start": "npm-run-all --parallel watch:server watch:build",
    "watch:build": "node node_modules/webpack/bin/webpack.js -d --watch --progress --colors",
    "watch:server": "nodemon \"server/server.js\" --watch \"./server\"",
    "test": "jest",
    "lint": "tslint ClientApp/components ClientApp/models ClientApp/store ClientApp/utils || true"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
  },

The Jest test-setup.js looks like

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

Enzyme.configure({ adapter: new Adapter() });

jest.config.js looks like

const {defaults} = require('jest-config');
module.exports = {
  transform: {
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.ts?$": "ts-jest"
  },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?|ts?|js?)$",
  moduleFileExtensions: [...defaults.moduleFileExtensions,"ts", "tsx"],
  transformIgnorePatterns: ["<rootDir>/node_modules"]
};

I have installed Jest, Ts-jest, and Enzyme.

But when I run npm run test I get errors

> AspReact@0.0.0 test /Users/rebeccaannburton/Projects/AspReact/AspReact
> jest

 FAIL  __tests__/CancelButton.test.js
  ● 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 plainJavaScript.

    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:

    /Users/rebeccaannburton/Projects/AspReact/AspReact/__tests__/CancelButton.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

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

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.926s
Ran all test suites.

The first error is 'import'? The second seems node_modules should be excluded but in the configuration file I have specifically excluded the folder ad suggested. What else in the configuration am I missing or in error?

来源：https://stackoverflow.com/questions/52906158/unit-testing-react-components-in-asp-net-core-project