3

Appで文を書くことができinput、その文が でレンダリングされる洗練されたコンポーネントを作成しましたh1。

App.svelte

<script>
  let sentence = "Hello world";
</script>

<main>
  <h1>{sentence}</h1>
  <input
    value={sentence}
    type="text"
    on:input={(value) => {
      sentence = value.target.value
    }}
  />

</main>

しかし、@testing-library/svelteを使用してこの動作をテストしようとすると、入力は反応せず、テキストh1はそのままです"Hello world"(ただし、入力の値は最初の に従って変更されましたexpect)。

App.test.js

import { render, fireEvent } from "@testing-library/svelte";
import App from "./App.svelte";

it("should write in input", async () => {
  const { container } = render(App);
  const input = container.querySelector("input[type=text]");

  await fireEvent.change(input, { target: { value: "test" } });

  expect(input.value).toBe("test"); // ✅
  expect(container.querySelector("h1").textContent).toBe("test"); // ❌
});

Jest エラー メッセージ:

Expected: "test"
Received: "Hello world"

   8 |   await fireEvent.change(input, { target: { value: "test" } });
  10 |   expect(input.value).toBe("test");
> 11 |   expect(container.querySelector("h1").textContent).toBe("test");
  12 | });

コードサンドボックスを使用して、この動作を確認できます。

このテストが失敗する理由を知っている人はいますか?

4

2 に答える 2

0

そして、ファイルの先頭でインポートする場合:

import { screen } from '@testing-library/dom'

そして最後にこれを置きます：

 expect(
      await screen.findByText('test'),
    ).toBeVisible()
于 2021-10-23T15:11:58.190 に答える