Мне удалось настроить базовый проект 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.Что еще в конфигурации я пропускаю или по ошибке?