标签: react-testing-library

我在下面的“global.fetch”部分收到此错误，我不知道为什么。我觉得我正在以一种非常标准的方式做这件事......我错过了什么？我对任何东西都持开放态度，甚至是库。我只是想学习如何使用 React 测试库来测试我的组件，该库获取数据并呈现列表，但我遇到了很多麻烦...

感谢任何提供帮助的人

\n

TS2322：类型 'Mock<Promise<{ json: () => Promise<Data[]>; }>, []>'
\nis 不可分配给类型 '(input: RequestInfo | URL, init?:\nRequestInit) => Promise'。\xc2\xa0\xc2\xa0Type 'Promise<{ json: () =>\nPromise<Data[]>; }>' 不可分配给类型 'Promise'。\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '{ json: () => Promise<Data[]>; }' 缺少类型“Response”中的以下属性：标头、确定、重定向、状态和\n其他 10 个属性。

\n

我发现模拟 global.fetch 的通用方法如下：

global.fetch = jest.fn(() =>\n  Promise.resolve({\n    json: () => Promise.resolve(....data here...),\n  })\n);\n

我的组件如下所示：

const SomeComponent = () => {\n  const [dataList, setDataList] = useState<Data[]>([]);  \n\n  const fetchdataList = async () => {\n    const …

简而言之，我有一个带有 onclick 事件的表行。我通过以下方式得到这个

const row = screen.getByRole('row', { name: /My row/i })
await userEvent.click(row)

这不会触发事件处理程序。但是，如果我这样做：

const row = screen.getByRole('row', { name: /My row/i })
fireEvent.click(row)

这很好用。

我知道 userEvent 使用更多事件来模拟行单击，但事件处理程序在实时应用程序中也可以正常工作。有什么原因可能userEvent无法工作吗？

我正在使用 React 与 ViteJS 和 Vitest 进行测试。我也设置了 vitest 的配置和测试设置文件，如下面的屏幕截图所示。

vite.config.js

src/test/setup.ts

src/app/App.tsx

src/app/App.spec.js

这是我收到的错误：

我找到了很多关于该主题的类似问题的资料，但我尝试的任何方法都不起作用。我还遵循了 vite 配置的文档和很多文章。每个人都在说同样的事情，但由于某种原因我仍然收到此错误。

在一个项目中，我们最近开始使用 userEvent 而不是 fireEvent，但现在我们遇到了这个问题

FAIL src/modules/DashboardHeader/index.test.tsx\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\n\n\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0 \xe2\x97\x8f Test suite failed to run\xc2\xa0\xc2\xa0\n\n\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 Cannot find module '@testing-library/dom' from 'node_modules/@testing-library/user-event/dist/click.js'\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 Require stack:\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 node_modules/@testing-library/user-event/dist/click.js\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 node_modules/@testing-library/user-event/dist/index.js\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 src/modules/DashboardHeader/index.test.tsx\xc2\xa0\xc2\xa0\n\n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 5 | \n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 6 | \n\xc2\xa0 \xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0 >\xc2\xa0 7 | import userEvent from '@testing-library/user-event';\xc2\xa0\xc2\xa0\n

鉴于我无法直接使用内部react-testing-library组件进行测试，我将如何测试使用该组件的组件react-select？例如，如果我有一个基于的值的条件渲染，而该值react-select不渲染传统渲染器<select/>，我还能触发更改吗？

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "First", label: "First" },
  { value: "Second", label: "Second" },
  { value: "Third", label: "Third" },
];

function TestApp() {
  const [option, setOption] = useState(null);
  return (
    <div>
      <label htmlFor="option-select">Select Option</label>
      <Select
        value={option}
        options={options}
        onChange={option => setOption(option)}
      />
      {option && <div>{option.label}</div>}
    </div>
  );
}

export default TestApp;

我什至不确定我应该查询什么。是隐藏的输入吗？

我正在使用 react-testing-library 和一个onClose在菜单失去焦点时触发的道具来测试 React Material UI 菜单组件。即使我向菜单外的组件添加单击或将输入元素放在外时，我也无法触发此状态。

const UserMenu: React.FunctionComponent<UserMenuProps> = ({ className }) => {
  const signedIn = useAuthState(selectors => selectors.SignedIn);
  const username = useAuthState(selectors => selectors.Username);
  const messages = useMapState((state: AppRootState) => state.app.messages);
  const signOut = useSignOut();

  const [open, updateOpenStatus] = useState(false);
  const anchorRef = useRef(null);

  if (!signedIn) {
    return <div data-testid="user-menu" className={className}>
      <LinkButton to={ROUTES.SignIn.link()}>{messages.SignIn.Title}</LinkButton>
      <LinkButton to={ROUTES.SignUp.link()}>{messages.SignUp.Title}</LinkButton>
      <LinkButton to={ROUTES.ConfirmSignUp.link()}>{messages.ConfirmSignUp.Title}</LinkButton>
    </div>;
  }

  return <div data-testid="user-menu" className={className}>
    <Grid container direction="row" alignItems="center">
      <Typography noWrap variant="subtitle2">
        <span id="username" className="bold">{username}</span>
      </Typography> …

谁能帮我，我真的很坚持。这是我的工具提示代码，可切换css属性显示：MouseOver和Mouse Out显示上的块：无

 it('should show and hide the message using onMouseOver and onMouseOut events respectively', () => {
    const { queryByTestId, queryByText } = render(
      <Tooltip id="test" message="test" />,
    )
    fireEvent.mouseOver(queryByTestId('tooltip'))
    expect(queryByText('test')).toBeInTheDocument()
    fireEvent.mouseOut(queryByTestId('tooltip'))
    expect(queryByText('test')).not.toBeInTheDocument()
    cleanup()
  })

我不断收到错误TypeError：Expect（...）。toBeInTheDocument不是一个函数

有谁知道为什么会这样吗？我用于渲染和快照组件的其他测试均按预期工作。就像queryByText和queryByTestId一样。

谢谢

使用 React 测试库来测试对话框提供程序。我可以让它打开，并在它出现时断言 - 但由于某种原因我无法在测试中关闭它。我需要重新渲染吗？

test('await the closing or confirming of the modal', async () => {
  const { debug, getByText, queryByText } = render(
    <DialogProvider>
      <Test />
    </DialogProvider>,
  );
  const openDialogButton = getByText(/click me/i);
  fireEvent.click(openDialogButton);
  await wait(() => getByText(/ok/i));
  fireEvent.click(getByText(/ok/i));
  debug();
});


function Test() {
  const confirm = useConfirmation();
  return (
    <button
      onClick={() => {
        confirm({ variant: 'info' });
      }}
    >
      click me
    </button>
  );
}

我正在尝试测试登录组件。具体来说，它会在成功登录时重定向。手动测试时它工作正常。但在我的测试中，它从不进行重定向，因此找不到“注销”链接：

test('successfully logs the in the user', async () => {
  const fakeUserResponse = {success: true, token: 'fake_user_token'}
  jest.spyOn(window, 'fetch').mockImplementationOnce(() => {
    return Promise.resolve({
      json: () => Promise.resolve(fakeUserResponse),
    })
  })
  const { getByText, getByLabelText, findByTestId } = render(<Router><Login /></Router>)

  fireEvent.change(getByLabelText(/email/i), {target: {value: 'dan@example.com'}})
  fireEvent.change(getByLabelText(/password/i), {target: {value: 'password1234'}})
  fireEvent.click(getByText(/submit/i))

  await waitForElement(() => getByText(/logout/i));
})

我正在使用react-router版本 4 进行重定向，如下所示：

{state.resolved ? <Redirect to="/" /> : null}

我会以错误的方式解决这个问题吗？

在使用 React 测试库测试组件时，我发现自己从 开始getBy*，偶尔需要将其替换为queryBy*（例如，如果我需要检查某个元素是否不存在）。我的测试最终混合了getBy和queryBy，而我最近刚刚使用queryBy了所有东西。

这让我思考......有没有理由使用getBy？

像这样的断言按预期失败，无需抛出错误：

expect(queryByText('Click me')).toBeInTheDocument();
expect(queryByLabel('Name').value).toBe('George')

如果未找到元素，则抛出错误有什么好处，是否有理由不queryBy用于所有（同步）查询？

编辑：看起来queryBy现在只推荐用于断言文档中没有内容：

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence

该文章还建议使用screen.queryBy/screen.getBy而不是解构 from render，这简化了从一个到另一个的更改，因为您不再需要更新解构函数。