Question

我设法使用ASP.NET Core中的React模板设置了一个基本的React项目。我从文档中不清楚，并且在此基本框架的基础上，我如何对各个组件进行单元测试。我以为我会使用Jest和Enzyme对组件进行单元测试，但是到目前为止，我进行设置的努力都失败了。让我列出我到目前为止所做的事情。 1）在项目的根目录（ClientApp文件夹上方）中，创建了一个 tests 文件夹。在该文件夹中，我有一个名为CancelButton.test.js的测试，如下所示：

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

我已修改package.json以包含行

  "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"
  },

Jest test-setup.js看起来像

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

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

jest.config.js看起来像

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"]
};

我已经安装了Jest，Ts-jest和Enzyme。

但是当我运行npm run test时会出错

> 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.

第一个错误是“导入”？第二个似乎应该排除node_modules，但是在配置文件中我明确排除了建议的文件夹广告。我还缺少什么配置或出现了错误？

对ASP.NET Core项目中的React组件进行单元测试

0 个答案: