文章/答案/技术大牛

发布

社区首页 >问答首页 >导入HTML作为字符串并使用Jest进行测试

问导入HTML作为字符串并使用Jest进行测试
EN

Stack Overflow用户

提问于 2022-02-09 01:35:29

回答 2查看 960关注 0票数 0

我使用的是sveltekit，我不能使用文件api导入html模板。因此，我决定通过编写一个模块来导入，该模块将文档内容作为字符串导入(描述为这里)。

// src/global.d.ts

/// <reference types="@sveltejs/kit" />
declare module '*.html' {
  const content: string
  export default content
}

到目前为止还不错，但是现在我需要测试代码，而jest无法解释代码。

● 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:

/home/developer/workspace/src/assets/html/confirm_email.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<!DOCTYPE html>
                                                                                  ^

SyntaxError: Unexpected token '<'

我不明白jest是怎么理解.d.ts文件的.如何测试代码？

typescript

ts-jest

node.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-09 19:31:44

1.将html导入为字符串

我用另一种方法解决了问题..。

我使用vite的一个资源将html文件作为资产导入，如在这里的文档中所示

import confirm_email_template from '../../../assets/html/confirm_email.html?raw'

2.使用Jest进行测试

对于生产，它工作得很完美，但是对于单元测试来说，代码会中断，因为Jest不能将资产作为一个模块导入。

因此，问题的第二部分是使用资产模拟修复的(我不知道这是否是最佳实践)。

// jest.config.cjs

{
⋮
  moduleNameMapper: {
      ⋮
      '([a-zA-Z_ ]+\\.html)\\?raw$': '<rootDir>/__mocks/$1.cjs'
  }
⋮
}

为了使其工作，我创建了以下文件夹结构：

__mocks
      |
       confirm_email.html.cjs
       another_asset_mocked.html.cjs

confirm_email.html.cjs看起来如下所示：

// __mocks/confirm_email.html.cjs
module.exports = '<html>content<html>'

票数 0

Stack Overflow用户

发布于 2022-02-09 07:29:43

您是否安装@babel/运行时“？

我和大家分享我的配置给大家取笑.

我有：

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "$lib": ["src/lib"],
            "$lib/*": ["src/lib/*"]
        }
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
    
}

svelte.config.js

 import vercel from '@sveltejs/adapter-vercel'

/** @type {import('@sveltejs/kit').Config} */
const config = {
 
    kit: {
        adapter: vercel(),
        vite: {
            define: {
              'process.env': process.env,
            },
          },
     
     
    },
    transform: {
        "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
      }
};

export default config;

babel.config.json

{
  "presets": [
    ["@babel/preset-env", { "modules": "auto" }]
  ],
    "plugins": ["babel-plugin-transform-vite-meta-env","@babel/plugin-transform-runtime"]
}

jest.config.js

export default {
  "transform": {
    "^.+\\.js$": "babel-jest",
   "^.+\\.svelte$": "svelte-jester",
   
 },
 "moduleFileExtensions": ["svelte", "js"],
  "testEnvironment": "jsdom",
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
 
 
  }

和whole package.json

{
  "name": "sveltekit",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "test": "jest src",
    "test:watch": "npm run test -- --watch"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@supabase/supabase-js": "^1.29.1",
    "@sveltejs/adapter-auto": "^1.0.0-next.7",
    "@sveltejs/kit": "^1.0.0-next.215",
    "@sveltejs/svelte-virtual-list": "^3.0.1",
    "@testing-library/svelte": "^3.0.3",
    "autoprefixer": "^10.4.1",
    "babel-jest": "^27.4.6",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "jest": "^27.4.7",
    "postcss-load-config": "^3.1.1",
    "prettier": "^2.5.1",
    "prettier-plugin-svelte": "^2.5.1",
    "svelte": "^3.44.0",
    "svelte-jester": "^2.1.5",
    "svelte-lazy": "^1.0.12",
    "tailwindcss": "^3.0.8",
    "ts-jest": "^27.1.3"
  },
  "type": "module",
  "dependencies": {
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "@testing-library/jest-dom": "^5.16.1",
    "cookie": "^0.4.1",
    "svelte-lazy-image": "^0.2.0",
    "swiper": "^8.0.3"
  },
  "testEnvironment": "jsdom"
}

我希望它能对你有帮助。我在开玩笑的时候也遇到了很多麻烦。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71042986

复制

相似问题

问导入HTML作为字符串并使用Jest进行测试
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导入HTML作为字符串并使用Jest进行测试EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导入HTML作为字符串并使用Jest进行测试
EN