标签: react-testing-library

我正在使用 redux 和 react 路由器。

我想测试一个路由参数是否显示在页面上。

test('route param is displayed', async () => {
  const { queryByText } = customRender(
    <EditCard />,
    {
      route: '/card/1554990887217',
    }
  );
const cardId = queryByText(/1554990887217/);
await waitForElement(() => cardId);
})

我的自定义渲染像这样包装路由器和 redux：

export const customRender = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    initialState,
    store = createStore(rootReducer, initialState),
    ...options
  } = {}
) => ({
  ...rtl(
    <Provider store={store}>
      <Router history={history}>{ui}</Router>
    </Provider>,
    options
  ),
  history,
});

路线参数只是没有出现在测试中。它只是超时错误。

不过，它可以在页面上运行，因为如果我启动应用程序并手动测试它，一切都按预期运行。

？fireEvent.change()只是不起作用。

它说元素上没有设置器。

我尝试改用咏叹调选择器

const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);

我再次尝试使用查询选择器

const DraftEditor = container.querySelector('.public-DraftEditor-content'));

改为尝试键盘事件。

没有。

有没有人设法使用draftjs 和反应测试库发送富文本输入文本？

类似的问题在这里 -无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件- 但是答案表明这应该适用于 CSS-in-JS，这就是我正在使用的。

我正在使用 Material-UI 的<Hidden>组件仅在sm屏幕尺寸及更大尺寸上显示一些文本。这是代码（在生产中完美运行）：

<Hidden implementation="css" xsDown>
  <LogoText variant="h5" component="p" />
</Hidden>

我使用的是jest-dom与react-testing-library和我想测试我的导航栏，其中包含这个隐藏文本的响应。

我有以下测试：

const initTest = width => {
  Object.defineProperty(window, "innerWidth", {
    writable: true,
    configurable: true,
    value: width
  });
  window.matchMedia = jest.fn().mockImplementation(
    query => {
      return {
        matches: width >= theme.breakpoints.values.sm ? true : false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn()
      };
    }
  );
  const height = Math.round((width * 9) …

我正在尝试使用 react-testing-library 测试属于 redux-form 一部分的代码。为文本输入字段调用 fireEvent.change 以设置新值我希望应该更新输入的值，但它从未发生过。请在下面找到测试的片段。完整代码可以在https://codesandbox.io/s/redux-form-simple-example-n3820找到 如何使用 react-testing-library 测试 redux-form 的好例子？

...

const firstNameInput = getByTestId(container, "firstName");
const lastNameInput = getByTestId(container, "lastName");

const firstName = "firstName";
const lastName = "lastName";

fireEvent.change(firstNameInput, { target: { value: firstName } });
fireEvent.change(lastNameInput, { target: { value: lastName } });

const submitButton = getByTestId(container, "submitButton");
fireEvent.click(submitButton);

expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenNthCalledWith(firstName, lastName);

I found this implementation here but its using enzyme.

Unit testing React click outside component

Adding an event to window does not work either:

window.addEventListener('click', () => {
      console.log('click on window');
    });

Has anyone came across this issue above using jest and "@testing-library/react"?

我正在渲染一个元素，该元素利用 setTimeout 将内部文本从加载状态更改为所需的消息：

function Message({ message }: any) {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    const CTATimer = setTimeout(() => {
      setShowMessage(true);
    }, 1500);
    return () => {
      clearTimeout(CTATimer);
    };
  }, []);

  if (!showMessage) {
    return <p>Loading...</p>;
  }

  return (
    <>
      <div>{message.text}</div>
    </>
  );
}

相应的测试渲染，然后将时间提前 1500 毫秒，然后应该显示消息。然而，目前测试失败，终端显示文本仍然是Loading...。测试是这样写的：

const mockMessage = {
  text: "this is a message",
  answers: [],
  id: 1,
};

afterEach(() => {
  jest.useRealTimers();
});

it("should show message after setTimeout", () => {
  jest.useFakeTimers(); …

我正在遵循最新版本的所有说明@testing-library/user-event。

前：

  test('request support action',() => {
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    userEvent.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

后：

  test('request support action', async () => {
    const user = userEvent.setup();
    
    render(<SupportSection requestSupport={requestSupport} />);

    const button = screen.getByRole('button');

    await user.click(button);

    expect(requestSupport).toHaveBeenCalled();
  });

requestSupport在更高的范围内被嘲笑const requestSupport = jest.fn();

我收到的错误是：

类型错误：range.cloneRange 不是函数

我的所有测试在库更新之前都通过了，现在全部失败了。

尝试对此组件进行简单测试时，出现 TypeError: actImplementation is not a function

import React from 'react';
import { StyledHeaderContainer, StyledTitle } from './styled';

export const Header = () => {
  return (
    <StyledHeaderContainer>
      <StyledTitle data-testid='title-test-id'>Subject Access Request</StyledTitle>
    </StyledHeaderContainer>
  );
};

这是我的测试

import * as React from 'react';
import 'jest-styled-components';

import { render, screen } from '@testing-library/react';
import { Header } from '../';
import "@testing-library/jest-dom";

describe('Header', () => {
  it('is rendered correctly', () => {
    expect(<Header />).toMatchSnapshot();
  });
});

describe('Title', () => {
    it('should have correct …

我正在尝试 tRCP，并认真遵循此处官方文档中描述的 Next.js 项目的设置： https: //trpc.io/docs/nextjs

然而我注意到有一个依赖 tRPC 的简单组件，比如这样

export const Sample = () => {
  const { data } = trpc.useQuery(['hello', { text: 'User' }]);
  if (data === undefined) {
    return <div>Loading...</div>;
  }
  return <div>{data.greeting}</div>;
};

由于以下琐碎测试而无法正确测试

describe('Sample', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<Sample />);
    expect(baseElement).toBeTruthy();
  });
});

因为没有提供程序的设置，例如withTRCP用于应用程序本身的 HOC 的设置。因此，测试失败了client（大概是trcpClient，与queryClient）未定义。

我想知道如何正确设置测试，在这种情况下提供正确的客户端，以及模拟查询，因为我在调用测试时没有运行相应的服务器端代码。

尝试使用 redux-toolkit rtk 查询运行第一个测试，并收到 api 未定义的错误。我做错了什么？

  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read property 'injectEndpoints' of undefined\n\n      33 | };\n      34 |\n    > 35 | export const authApi = api.injectEndpoints({\n         |                            ^\n      36 |     endpoints: (build) => ({\n      37 |         login: build.mutation<ILoginResponse, ILoginData>({\n      38 |             query: ({ username, password, captchaToken }) => {\n\n      at Object.<anonymous> (src/api/auth.ts:35:28)\n      at Object.<anonymous> (src/features/auth/authSlice.ts:2:1)\n      at Object.<anonymous> (src/api/index.ts:10:1)\n      at Object.<anonymous> (src/mocks/handler.ts:3:1)\n      at Object.<anonymous> (src/mocks/server.ts:3:1)\n      at Object.<anonymous> (src/setupTests.ts:6:1)\n      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)\n      at runJest (node_modules/@jest/core/build/runJest.js:404:19)\n …