我剛開始在 Typescript 中為我的 create-react-app 專案撰寫單元測驗（開玩笑），但我在開始時遇到了問題。
我不斷收到關于以下內容的錯誤：SyntaxError: Cannot use import statement outside a module.
基本上我跑了yarn jest --init，做了這個配置：
√ Would you like to use Typescript for the configuration file? ... yes
√ Choose the test environment that will be used for testing ? jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... yes
√ Which provider should be used to instrument code for coverage? ? babel
√ Automatically clear mock calls, instances and results before every test? ... yes
// jest.config.ts
export default {
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
}
當我運行yarn test這就是我得到的：
$ yarn test
yarn run v1.22.19
$ jest
FAIL tests/components/button.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
? If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
? If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
? 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
D:\my-project\tests\components\button.test.tsx:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { BUTTON_TYPE_CLASSES, getButton } from '../../src/components/button/button.component';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
PASS tests/utils/delete.test.js
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
delete.js | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 passed, 2 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 1.719 s, estimated 2 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
所有通過的測驗都使用 Common JS 語法，因此它們沒有問題。但是我為按鈕組件撰寫的測驗是這樣的：
import { BUTTON_TYPE_CLASSES, getButton } from '../../src/components/button/button.component';
import { BaseButton, GoogleSignInButton, InvertedButton } from '../../src/components/button/button.styles';
describe('BUTTON COMPONENT', () => {
it('returns base button', () => {
expect(typeof getButton()).toEqual(typeof BaseButton);
});
});
如何開始對我用 Typescript 撰寫的 React 專案進行單元測驗？
uj5u.com熱心網友回復：
首先安裝ts-jestnpm 包。
并添加preset: 'ts-jest'到jest.config.ts所以 TypeScript 測驗檔案首先由ts-json.
你的新jest.config.ts：
// jest.config.ts
export default {
preset: 'ts-jest',
transform: { '^. \\.ts?$': 'ts-jest' },
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520562.html