props を渡して 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
) を使用すると、コンポーネントはマウントされ、テストは問題なくパスします。