1

我正在尝试通过将道具传递给它并断言它正确呈现它们来测试 jsx 组件。尽管出于我无法理解的原因，这失败了。这是组件

// components/toast.tsx

import { createComponent } from "@vue/composition-api";
import style from "./toast.module.scss";
export default createComponent({
  name: "Toast",
  props: {
    message: String
  },
  setup(props) {
    return () => (
      <div class={style.toast}>
        <p>{props.message}</p>
      </div>
    );
  }
});

这是失败的单元测试的片段：

// tests/unit/components/toast.spec.ts

import Toast from "@/components/toast";
import { shallowMount } from "@vue/test-utils";

// ... a describe block

  it("should render props correctly", () => {
    const msg = "hello";
    const wrapper = shallowMount(Toast, {
      propsData: {
        message: msg
      }
    });
    expect(wrapper.isVueInstance()).toBeTruthy();
    expect(wrapper.text()).toMatch(msg);
  });

失败测试的输出在这里：

Expected substring: "hello"
    Received string:    "function (el) {
          var obj;·
          var args = [], len = arguments.length - 1;
          while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
          if (shouldNotBeStubbed(el, stubs, modifiedComponents)) {
            return originalCreateElement.apply(void 0, [ el ].concat( args ))
          }·
          if (isConstructor(el) || isComponentOptions(el)) {
            if (stubAllComponents) {
              var stub = createStubFromComponent(el, el.name || 'anonymous', _Vue);
              return originalCreateElement.apply(void 0, [ stub ].concat( args ))
            }
            var Constructor = shouldExtend(el, _Vue) ? extend(el, _Vue) : el;·
            return originalCreateElement.apply(void 0, [ Constructor ].concat( args ))
          }·
          if (typeof el === 'string') {
            var original = resolveComponent(el, originalComponents);·
            if (!original) {
              return originalCreateElement.apply(void 0, [ el ].concat( args ))
            }·
            if (isDynamicComponent(original)) {
              return originalCreateElement.apply(void 0, [ el ].concat( args ))
            }·
            var stub$1 = createStubIfNeeded(stubAllComponents, original, _Vue, el);·
            if (stub$1) {
              Object.assign(vm.$options.components, ( obj = {}, obj[el] = stub$1, obj));
              modifiedComponents.add(el);
            }
          }·
          return originalCreateElement.apply(void 0, [ el ].concat( args ))
        }"

      16 |     });
      17 |     expect(wrapper.isVueInstance()).toBeTruthy();
    > 18 |     expect(wrapper.text()).toMatch(msg);
         |                            ^
      19 |   });
      20 | });
      21 | 

      at Object.it (tests/unit/components/toast.spec.ts:18:28)

一切正常！除了这一部分。如果我使用单个文件组件 ( .vue) 组件安装并且测试通过没有问题。

4

0 回答 0