标签: react-testing-library

我的组件有两个类似的表单（两个带有用户名/密码字段的表单）和两个Submit带有文本“提交”的按钮。为了测试提交处理程序，我模拟了表单字段的类型事件，然后单击提交按钮，如下所示：

  it('test submit handler', async () => {
    const myProvider = ({children}) => <Provider store={store}>{children}</Provider>;
    render(<MyComponent />, {wrapper: myProvider});
    expect(await screen.findByText('username')).toBeTruthy();
    expect(await screen.findByText('password')).toBeTruthy();
    await userEvent.type(screen.getByLabelText('username'), 'someusername');
    await userEvent.type(screen.getByLabelText('password'), 'somepassword');
    fireEvent.click(screen.getByText('Submit'));
    await waitFor(() => expect(onSubmit).toBeCalledTimes(1));
  });
});

这样做会导致错误TestingLibraryElementError: Found multiple elements with the text: Submit。我查找了这些getBy*方法的文档，看起来它们要么解释了找到的第一个元素，要么在存在多个元素的情况下，它们会抛出错误，这就是这里发生的情况。这两种表单具有不同的处理函数，我想测试这两个函数是否在提交时被调用。访问此Submit按钮第一次出现的好方法是什么？

我尝试用 替换getByText，findByText但这会导致返回Promise { <pending> }, waiting ，这会导致上面提到的相同TestingLibraryElementError错误。

我正在构建一个 React 自动完成组件并使用 Jest 和 React-testing-library 对其进行测试。

我有两个输入。当 input1（具有自动完成功能）处于焦点时，单击按钮Tab应该在 input1 不为空时使用文本自动填充 input1，或者在 input1 为空时将焦点移动到 input2（这是表单的默认行为）。

表单.jsx

    const onKeyDown = (e) => {
        if(e.key === 'Tab' && e.target.value !== '') {
            setInput1Text('some-autocomplete-text');
            e.preventDefault(); //prevent focus from moving to the next input(input2)
        }
    };

表单.test.jsx

    test('pressing Tab button should move focus to input2 as input1 is empty', () => {
        const input1 = container.getElementsByTagName('input')[0];
        const input2 = container.getElementsByTagName('input')[1];

        fireEvent.change(input1, { target: { value: '' } });
        fireEvent.keyDown(input1, { …

我无法找到正确的方法来测试包含由多个元素分解的文本的 div - 错误显示“无法找到包含文本的元素：这可能是因为文本被多个元素分解”，但是没有解释如何做到这一点。

为了解释我要测试的内容，jest render() fn 中返回的元素如下：

          <div>
            <div
              class="inventory-wrapper"
            >
              <span>
                5
              </span>
               item
              s
               left
            </div>
          </div>
        </body>

我正在尝试测试里面的文本是否为“还剩 5 项”，但正如您所看到的 - 文本被跨度标记和多行分隔。

据我了解，我应该仅使用 getByRole() 来定位此目标？这是否意味着我也需要向 .inventory-wrapper div 添加一个 role='...' ？然后我将如何测试文本“还剩 5 件”

任何有关正确等待目标此类目标的帮助将不胜感激

我正在将我的项目从 jest 迁移到 vitest，我想排除某些文件和文件夹以进行测试和覆盖，我正在遵循文档，但“排除”似乎不起作用，每当我运行一些测试时，vitest 都会抛出一个即将到来的错误从 config 文件夹中，我那里没有任何测试文件，在 config 文件夹中我有一堆配置文件，包括 setupTests.ts 和 i18n 特定配置，错误来自 i18n.ts 文件。我正在使用 vite 3，下面是我的 vite 配置文件，我还能如何排除文件和文件夹？

环境：

• 视窗11
• 节点16.14.0
• 维特3.1.0
• 维斯特0.23.4
• 项目清单

编辑：所以事实证明问题出在 setupTests.ts 文件中，我在其中嘲笑react-i18next，当我尝试执行“const effective = wait vi.importActual(''react-i18next''”时，打字稿抛出错误); return {...actual, ...}" 忽略打字稿作品。

vi.mock('react-i18next', () => ({
  ...vi.importActual('react-i18next'), // this didn't work
  useTranslation: () => [(key: any) => key],
}));


vi.mock('react-i18next', () => {
  const acutal = vi.importActual('react-i18next'), // this didn't work either
  return {
         ...actual, 
         useTranslation: () => [(key: any) => key],
   };
}); …

我正在使用 jest 和 react-testing-library 为我使用 React 完成的前端应用程序进行单元测试。在我使用 react-i18next -library 添加国际化之前，我的单元测试运行良好。现在，当我运行测试时，它似乎没有找到/使用翻译文件，并且所有应该读取内容的地方都留空。我使用的是带有钩子的最新 React 版本，而不是 React.Component 我使用的是这种“const-components”：

    const ComponentName = ({t}) => {
        return(
          <p>{t('example')}</p>
        )}
      export default ComponentName;

国际化在实际页面中完美运行，但由于未使用翻译文件而导致单元测试失败，所以我认为问题在于正确模拟翻译文件。我只是使用 this.variableName 类型的解决方案为较旧的反应找到一些建议解决方案，但这对我没有多大帮助。

我试图用 jest.fn() 模拟它，但我不确定哪个函数是那个，我应该模拟哪个函数以及如何从测试中正确利用 useTranslation() 函数。

    import React from 'react';
    import { useTranslation, Trans } from 'react-i18next';
    import { render } from '@testing-library/react';
    import ComponentName from './ComponentName';

    import '../locales/i18n';

    test('renders all documents in the list', () => {
      const mockUseTranslation = jest.fn();

      const { t, i18n } = mockUseTranslation();

      // const t …

我正在react-native-testing-library我的 react native expo 应用程序中使用（我使用该库的第一步）编写一个简单的测试。但是我从react-native代码库本身内部的某个地方收到了一个令人困惑的错误。要么我的代码有问题，要么react-native-testing-librarynpm 库有错误。

这是一个简单的笑话测试：

describe("AppTitle", () => {
  it("should display applicaton title", () => {
    const { getByText } = render(<AppTitle />);
    expect(getByText('App Name')).toBeTruthy();
  });
});

这是简单的<AppTitle />组件（只是一个视图和一个文本）

export const AppTitle = () => {
  return (
    <View>
      <Text>App Name</Text>
    </View>
  );
};

但是当我运行测试时出现此错误：

...../Utilities/warnOnce.js:15

const warnedKeys: {[string]: boolean} = {};
      ^^^^^^^^^^

SyntaxError: Missing initializer in const declaration

at ScriptTransformer.transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)
...

这是一个简单直接的模板。来自 …

我有一个材料用户界面TextField，它在焦点上打开一个Popper. 我正在尝试使用 react-testing-library 测试这种行为。

组件：

import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import TextField from '@material-ui/core/TextField';
import React from 'react';
import { ItemType } from './types';

export type TextFieldDropDownProps = {
    items: ItemType,
};

export function TextFieldDropDown(props: TextFieldDropDownProps) {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleSearchTermChange = (event: any) => {
        setSearchTerm(event.target.value);
    };

    const onFoucs = (event: any) => {
        setAnchorEl(event.currentTarget); …

我正在使用 jest 和 React 测试库来测试我的 React 应用程序。我想测试一个需要 ISR (nextJs getStaticProps) 渲染的页面，所以我安装了next-page-tester包。它正常渲染客户端渲染页面，但当涉及到使用 ISR 渲染时，就会发生以下错误。（我尝试在 jest.config.js 文件中添加 testEnvironment: 'jsdom' 以及测试文件顶部的注释来配置 jsdom 环境）。

• 包.json

    "test": "jest --env=jsdom",

• 错误：

FIRESTORE (8.6.8) 内部断言失败：意外状态

  at fail (node_modules/@firebase/firestore/src/util/assert.ts:40:9)
  at hardAssert (node_modules/@firebase/firestore/src/util/assert.ts:54:5)
  at fromBytes (node_modules/@firebase/firestore/src/remote/serializer.ts:252:5)
  at fromWatchChange (node_modules/@firebase/firestore/src/remote/serializer.ts:475:25)
  at PersistentListenStream.Object.<anonymous>.PersistentListenStream.onMessage

Run Code Online (Sandbox Code Playgroud)

（node_modules/@firebase/firestore/src/remote/persistent_stream.ts:581:25）在node_modules/@firebase/firestore/src/remote/persistent_stream.ts:461:21在node_modules/@firebase/firestore/src/remote /persistent_stream.ts:514:18 在node_modules/@firebase/firestore/src/util/async_queue_impl.ts:168:14

下面的错误可能是由于使用了错误的测试环境导致的，参见https://jestjs.io/docs/configuration#testenvironment-string。考虑使用“jsdom”测试环境。

ReferenceError: document is not defined

  at Object.cleanupDOM (node_modules/next-page-tester/dist/makeRenderMethods.js:52:5)
  at Object.cleanup (node_modules/next-page-tester/dist/testHelpers.js:39:25)

Run Code Online (Sandbox Code Playgroud)

• 笑话.config.js：

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  setupFiles: ['./src/__mocks__/client.js'],
  setupFilesAfterEnv: ['./jest.setup.js', '@testing-library/jest-dom/extend-expect'],
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': …

我知道 React 测试库有一个使用 React 路由器进行测试的示例，但我无法让它工作（我想是因为我使用的是 React 路由器 V6）。

基本上，我需要路由器测试，因为我有使用 useParams() 来获取部分 url 的详细信息组件。没有它我无法渲染组件。

这是我让它工作的尝试（是的，该页面也需要 apollo，尽管它并不真正需要 redux）。

const AllTheProviders = ({children, initialRoutes}) => {
    return (
        <ApolloProvider client={client}>
            <Provider store={store}>
                <MemoryRouter>
                    {children}
                </MemoryRouter>
            </Provider>
        </ApolloProvider>
    );
}
const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options})


beforeEach(() => {
    window.history.pushState({}, 'Test page',"/details/url-param-the-component-needs")
    customRender(<App/>);
});

毫不奇怪，但这不起作用。我假设 window.history.pushState() 不适用于 React Router V6。我尝试使用 useNavigate()，但这在组件之外不起作用。

如果有人对我如何使这项工作有任何想法。我将不胜感激。

我正在尝试在测试库中使用用户事件实用程序，如下所述：

https://testing-library.com/docs/user-event/intro

不幸的是，当我尝试调用设置函数时

userEvent.setup()

我的 IDE 说找不到它：

为什么会发生这种情况？

我的文件中的导入如下所示：

import userEvent from '@testing-library/user-event'

我的包依赖项如下所示：

"@testing-library/dom": "^8.11.3",
"@testing-library/jest-dom": "5.7.0",
"@testing-library/react": "^12.1.2",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",