当我尝试运行笑话测试时,自行编写的打字稿文件工作正常。但是LitElement文件不会(Transpile)多数民众赞成在我的猜测。
我已经清除了缓存, 我已经创建了babel.config.js文件 并尝试将模块添加到transformIgnorePatterns。
测试中的玩笑错误:
import { TemplateResult } from 'lit-html';
^
SyntaxError: Unexpected token {
> 1 | import { css, *CSSResult*, customElement, html, *LitElement* } from 'lit-element';
Jest.config.js文件:
module.exports = {
// Automatically clear mock calls and instances between every test
clearMocks: true,
// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: null,
collectCoverageFrom: [
'**/*.{js,jsx}',
'!**/node_modules/**',
'!**/vendor/**',
'!**/bin/**'
],
// An array of regexp pattern strings used to skip coverage collection
coveragePathIgnorePatterns: ['/node_modules/', '/bin/'],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: null,
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: -10
}
},
// An array of file extensions your modules use
moduleFileExtensions: ['js', 'ts', 'node'],
roots: ['<rootDir>/src'],
// The test environment that will be used for testing
testEnvironment: 'node',
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
testPathIgnorePatterns: ['/node_modules/', '/bin/'],
// A map from regular expressions to paths to transformers
transform: {
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest',
'.+\\.(css|styl|less|sass|scss)$':
'<rootDir>/node_modules/jest-css-modules-transform'
},
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
transformIgnorePatterns: [
'/node_modules/',
'/node_modules/(?!CCSResult).+\\.js$',
'/node_modules/(?!html).+\\.js$',
'/node_modules/(?!css).+\\.js$',
'/node_modules/(?!lit-element).+\\.js$',
'/node_modules/(?!lit-html).+\\.js',
'/node_modules/(?!lit-boilerplate).+\\.js'
],
modulePaths: ['<rootDir>']
};
Hello.ts文件
import { css, CSSResult, customElement, html, LitElement } from 'lit-element';
import { TemplateResult } from 'lit-html';
/**
* App root component
*/
@customElement('example-hello')
export class Hello extends LitElement {
static get styles(): CSSResult {
return css`
button {
background-color: palevioletred;
padding: 5px 8px;
color: white;
font-size: 16px;
}
`;
}
/**
* Render function
*/
public render = (): TemplateResult => html`
<button>Hello</button>
`;
demo: number = sum(20, 10);
}
export function sum(first: number, second: number): number {
return first + second;
}
declare global {
interface HTMLElementTagNameMap {
'example-hello': Hello;
}
}
Babel配置文件:
// babel.config.js
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
},
'@babel/preset-typescript'
]
],
plugins: [
['@babel/plugin-syntax-typescript', { isTSX: true }],
['@babel/plugin-syntax-dynamic-import'],
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }]
]
};
tsconfig.json:
{
"compilerOptions": {
/* Basic Options */
"target": "es2018", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": ["dom", "es2018"], /* Specify library files to be included in the compilation. */
"declaration": true, /* Generates corresponding '.d.ts' file. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"noResolve": false, /* Do not add triple-slash references or module import targets to the list of compiled files. */
"skipLibCheck": true, /* Skip type checking of all declaration files (*.d.ts). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options below. */
/* Additional Checks */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
/* Module Resolution Options */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
"baseUrl": "./", /* Base directory to resolve non-absolute module names. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Experimental Options */
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
},
"exclude": [
"node_modules",
"!node_modules/@types",
"package.json",
"postcss.config.js",
"src/assets",
"dist",
"webpack.config.js"
],
"include": [
"src"
]
}
我希望运行Jest并通过测试。 (没有导入的打字稿文件可以正常工作并返回传递。)