标签: testing-library

When testing svelte components, using jest & @testing-library/svelte, the state is shared between tests, is there away to tear down after each test so i have more isolated unit tests.

store/theme

import { writable } from "svelte/store";

export const LOCAL_STORAGE_KEY = "current:theme";

export const THEMES = {
  DARK: "dark",
  LIGHT: "light"
};

export const MATCH_DARK_THEME = "(prefers-color-scheme: dark)";

export const IS_USER_PREFERNCE_DARK =
  window.matchMedia && window.matchMedia(MATCH_DARK_THEME).matches;

export const DEFAULT_THEME =
  localStorage.getItem(LOCAL_STORAGE_KEY) || IS_USER_PREFERNCE_DARK
    ? THEMES.DARK
    : THEMES.LIGHT;

export const theme = …

我正在尝试为我们的富文本组件之一编写测试，该组件是使用 React js 中的 slate js 编辑器实现的。因此，在编写测试时，我正在检索元素 div[contenteditable='true']，但无法模拟更改、模糊、焦点等事件。附加到编辑器组件的处理程序不会被调用。我尝试了多种组合，但没有成功。有人可以帮忙吗？是否可以使用测试库模拟 contenteditable 元素的事件（contenteditable 使用 slatejs 实现）？

我在一个项目中看到使用create-react-app一个名为的文件，setupTest.js该文件只是导入@testing-library/jest-dom，并且测试似乎使用扩展expect版本，例如.toBeInTheDocument.

我将相同的文件（setupTest.js）添加到我的项目中，但似乎没有效果。

换句话说，如何@testing-library/jest-dom全局导入而不是在每个.spec.ts文件中执行？

我想在我的应用程序中使用Vue 测试库Nuxt.js。但是在安装软件包后立即启动测试会触发此错误：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这大概是因为Nuxt.js不使用vue-cli-service.

尽管如此，有没有一种简单的方法可以使用Vue Testing Librarywith Nuxt.js？

我已成功安装eslint-plugin-testing-library并使用overrides，因此它仅对测试文件中的代码发出警告。

但是，它抱怨Avoid direct Node access. Prefer using the methods from Testing Library.以下代码props.children：

我希望能够插入子节点或默认节点。

return (
  <>
    { // Other elements here. }
    {'children' in props ? (
      props.children
    ) : (
      <MyComponent {...props} disabled={disabled} />
    )}
  </>
)

这段代码有什么问题？为什么 props 被认为是节点访问？我应该如何更改它以满足警告？只需添加// eslint-disable-next-line testing-library/no-node-access？

Edit:

这是在测试文件中。它以与主代码相同的方式创建一个元素。我不明白为什么引用props.children会引起警告。我想知道这个警告的理由是什么，以及如何才能达到预期的结果。

我使用测试库作为 svelte 应用程序的一部分，总的来说它运行得很好。但是，我有一个组件，它采用数组作为道具，使用输入对其进行过滤，然后将过滤后的数组传递到插槽。我想测试该插槽是否接收正确过滤的数组。我认为设置一个虚拟插槽是可行的方法，然后只需使用 getByText 来确保页面中只有正确的元素。

组件代码：

<script>
  export let list = [{ name: 'Adam' }];

  let filter = "";

  $: filteredList = list.filter(({ name }) => name.includes(filter));
</script>

<span class="wrapper">
  <input
    bind:value={filter}
    name={fieldName}
    type="search" />
</span>
<slot {filteredList} />

我正在使用 Apollo Client (3.3.16) MockedProvider 和 Jest + React 测试库来测试使用 useLazyQuery 和 onCompleted 属性的组件。但是，MockedProvider 无法调用 onCompleted 函数（在我的例子中是handleData()）。在console.log之后我发现onCompleted函数从未被触发过。有什么想法如何使用 useLazyQuery 测试组件（在我的例子中）？提前赞赏！我的反应组件代码是这样的：

const handleData = data => { // this function never been called for testing
    setData(data.dataWithFilters.data);
  };

  const [loadData, { loading }] = useLazyQuery(
    GET_DATA,
    {
      variables: {
        id: productId,
        first: 999999,
        page: 1,
        isBase: true
      },
      onCompleted: handleData, // never been triggered for testing
      fetchPolicy: "network-only"
    }
  );

  useEffect(() => { // works fine
    loadData({
       variables: {
        id: productId,
        first: 999999, …

我有一个 Svelte 组件，它导入一个函数，然后将该函数提供为模板中的单击处理程序。我想使用玩笑来监视和模拟这个函数。模拟该函数后，对调用模拟函数的函数的任何调用都会按预期工作，但单击使用该函数作为处理程序的元素会导致调用实际函数而不是模拟函数。A

这是一个存在问题的codesandbox https://codesandbox.io/s/crazy-fast-uxgqe?file=/app.test.js

test-util.ts
export const foo = () => console.log('real foo');
export const bar = () => foo();

Test.svelte
<script lang="ts">
    import { foo, bar } from '@utils/test-util';
</script>

<button on:click={foo} data-testid="foo">foo</button>
<button on:click={bar} data-testid="bar">bar</button>

import { render } from '@testing-library/svelte';
import Test from '@components/Test.svelte';
import * as testUtil from '@utils/test-util';
import userEvent from '@testing-library/user-event';

test('fails', async () => {
  const fooMock = jest
    .spyOn(testUtil, 'foo')
    .mockImplementation(() => console.log('mock foo'));
  const testComponent = render(Test);
  await userEvent.click(testComponent.getByTestId('bar')); // …

我正在开发一个主要使用功能组件的反应应用程序。这都是通过react-testing库进行测试的。我想测试某些元素的焦点，以表明在经过一些交互后，某些元素获得焦点，但我看不到任何支持这一点的内容。是否可以 ？

谢谢

我想使用 + 对基于svelte+page.js的路由器进行一些集成测试vitest，但我遇到了一个问题，即jsdom每个测试文件实例仅正确更新一次。

在以下设置中，当运行时.only或将每个测试拆分到其自己的文件中时，任一测试都会通过。但当它们按顺序运行时，第二个总是会失败。检查 DOM 发现screen.debug()它是空的，并且调用actortick似乎没有做任何事情。

我怀疑这与如何jsdom与 History API 交互有关，但我不知道从这里到哪里去。

根细

<script>
  import page from 'page'

  import SignIn from './SignIn/SignIn.svelte'
  import Upload from './Upload/Upload.svelte'
  import { authenticationToken } from './Root.stores.js'

  let currentPage

  page('/', () => {
    page.redirect('/sign-in')
  })

  page('/sign-in', () => {
    currentPage = SignIn
  })

  page('/upload', () => {
    if ($authenticationToken === null) {
      return page.redirect('/sign-in')
    }

    currentPage = Upload
  }) …