使用Jest测试Svelte应用程序时，Lodash未定义

Question

我正在尝试使用Jest来测试我的Svelte项目，我读到的所有内容都表明我需要包含svelte-jester，以便将我的Svelte代码转换为Jest可以处理的东西(我想是CommonJS？)。这似乎工作得很好，除了我将Lodash导入到我的一些Svelte组件中，但是Jest在运行其测试时报告说Lodash是未定义的。(在浏览器环境中，一切似乎都像预期的那样工作。)

为了演示这个问题，我复制并略微修改了测试库网站上的一个示例：

// Comp.svelte

<script>
  import _ from 'lodash';

  export let name
</script>

<h1>Hello {_.toUpper(name)}!</h1>

然后我的测试文件是

// tests/Comp.test.js

import '@testing-library/jest-dom/extend-expect'

import { render } from '@testing-library/svelte'

import Comp from '../Comp'

test('shows proper heading when rendered', () => {
  const { getByText } = render(Comp, { name: 'World' })

  expect(getByText('Hello WORLD!')).toBeInTheDocument()
})

下面是我的package.json的相关部分，我也是从测试库网站上获得的。

{
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/svelte": "^3.0.3",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-jester": "^1.3.0"
  },
  "dependencies": {
    "lodash": "^4.17.20",
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": ["svelte-jester", { "debug": true }]
    },
    "moduleFileExtensions": [
      "js",
      "svelte"
    ],
  }
}

测试输出表明，在编译后的Comp.svelte版本中，Lodash是未定义的：

    TypeError: Cannot read property 'toUpper' of undefined

      5 | </script>
      6 |
    > 7 | <h1>Hello {_.toUpper(name)}!</h1>
        |              ^

      at create_fragment (src/Comp.svelte:7:14)
      at init (node_modules/svelte/internal/index.js:1489:37)
      at new Comp (src/Comp.svelte:83:3)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (src/tests/Comp.spec.js:9:25)

组件的编译版本似乎表明，至少，Lodash正在被require-d到构建中。

/* Comp.svelte generated by Svelte v3.31.0 */
"use strict";

const { SvelteComponentDev, add_location, append_dev, detach_dev, dispatch_dev, element, flush, init, insert_dev, noop, safe_not_equal, set_data_dev, text, validate_slots } = require("svelte/internal");
const { default: _ } = require("lodash");
const file = "Comp.svelte";

// etc.

谁能告诉我，我需要做什么才能正确地导出Lodash和/或将其添加到Jest测试的构建中？非常感谢。

Answer 1

你可以检查这个issue，

它是未定义的，因为它是一个CommonJS模块module.exports =x，而您正在将它作为ES模块导入。如果你从'lodash/ get‘中导入* as get，它就会起作用。