Модульное тестирование компонентов React в проекте ASP.NET Core - PullRequest
0 голосов
/ 20 октября 2018

Мне удалось настроить базовый проект React с использованием шаблона React в ASP.NET Core.Мне не ясно из документации и учитывая эту базовую структуру, как я тестирую отдельные компоненты.Я предполагаю, что я бы использовал 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-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 должны быть исключены, но в файле конфигурации я специально исключил предложенную папку ad.Что еще в конфигурации я пропускаю или по ошибке?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...