标签: react-testing-library

这个问题真的很好：Jest Mock module per test

它只是没有回答我的问题，即如何仅在一个测试中模拟它并使用原始组件保留其余部分。

如果我想对快照进行一些模拟而不是对其他测试进行一些模拟，那就有意义了

这是我目前的尝试

import React from 'react'
import { render } from '@testing-library/react'

jest.mock('components/Photo', () =>
  jest.fn(() => jest.requireActual('components/Photo'))
)
import Photo from 'components/Photo'

import PhotoGrid from '.'

beforeEach(() => {
  Photo.mockReset()
})

test('default renders 9 photos if provided 9', () => {
  const photos = [...Array(9).keys()]
  const { getAllByTestId, debug } = render(<PhotoGrid photos={photos} />)

  debug()
  expect(getAllByTestId(PHOTO_COMP_TEST_ID)).toHaveLength(9)
})

test('renders with masonry grid style', () => {
  Photo.mockImplementation(() => <div />)
  const photos = …

我正在尝试了解 React 和 Redux 测试的过程，我正在使用测试库来使用dom 节点查询来测试我的项目，但我仍然对在 React 项目中测试 Redux 实现的方式感到困惑：

我创建了一个自定义渲染函数，而不是反应测试库中的普通渲染方法

import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { Provider } from 'react-redux'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
const middlewares = [thunk]
const mockStore = configureMockStore(middlewares);

//test-utils.js
//creating a custom render function so we can wrap our App with
//react-redux provider
const render = (ui, initialState) => {
  const store = mockStore(initialState);
  //App wrapper and mocked store passed to …

在我的登录表单中，成功登录会启动一个承诺链，最终用户被重定向到主屏幕。在下面的测试中，我希望通过捕获最后一步来确保我的登录有效。

我在代码中包含日志语句，告诉我承诺链中的每个步骤都按我的预期执行，但断言仍然失败。从我的日志记录可以清楚地看出，测试在承诺链执行之前完成。

我认为这可能会因为我在实际形式中使用的 Formik 的行为而变得复杂。我无法成功查询并等待登录时显示的微调器。

我不知道如何让这个测试等到导航发生。可以触发什么承诺决议waitFor来完成？

import { act, render, screen, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

import React from "react"

import { AuthProvider } from "context/auth-context"
import { rest } from "msw"
import { setupServer } from "msw/node"
import { MemoryRouter as Router } from "react-router-dom"
import { LoginScreen } from "screens/login"
import { handlers } from "test/auth-handlers"
import { buildLoginForm } from "test/generate/auth"
import { deferred } from "test/test-utils"

const Wrapper = ({ children …

目的

我正在构建一个使用 React-query 来获取数据的 NextJS 应用程序。

我现在正在尝试实现一个测试框架。但是，当我运行时yarn test，出现以下错误。从react-query文档中，我了解到错误通常与<QueryClientProvider>未包含在_app.js.

我怀疑我需要为反应查询引入一些“模拟数据”，index.test.js但无法找到有关如何执行此操作的文档。

错误

No QueryClient set, use QueryClientProvider to set one

代码

/测试/index.test.js

No QueryClient set, use QueryClientProvider to set one

/pages/index.js

import { render, screen } from '@testing-library/react';

import Home from '../pages/index';

describe('Home', () => {
    it('renders without crashing', () => {
        render(<Home />);

        expect(
            screen.getByRole('heading', { name: 'Welcome to Next.js!' })
        ).toBeInTheDocument();
    });
});

/pages/_app.js

import Link from 'next/link';
import { …

在我的测试中，组件接收其 props 并设置组件。

这会触发 useEffect 发出 http 请求（我模拟）。

返回获取的模拟 resp 数据，但 useEffect 内的清理函数已被调用（因此组件已卸载），因此我收到所有这些错误。

如何防止组件卸载以便更新状态？我尝试过采取行动，没有采取行动，没有任何原因导致组件等待获取完成。

我应该说我的警告只是警告，但我不喜欢所有的红色，它表明出了问题。

export const BalanceModule = (props) => { 
  const [report, setReport] = useState();

  useEffect(() => {
    fetch('http://.....').then((resp) => {
      console.log("data returned!!!")
      setReports((report) => {
        return {...report, data: resp}
      })
    })
    return () => {
     console.log("unmounted!!!")
    }; 
  }, [report])

  .... trigger update on report here
}

// the test:
test("simplified-version", async () => {
  act(() => {
    render(
       <BalanceModule {...reportConfig}></BalanceModule>
    );
  });

  await screen.findByText("2021-01-20T01:04:38");
  expect(screen.getByText("2021-01-20T01:04:38")).toBeTruthy();
});

我的测试通过了，但有一个控制台引用错误：

您正在尝试访问 Jest 环境被拆除后的属性或方法。

测试：

import {render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
import {create, act} from 'react-test-renderer';
import Comp1 from './Comp1';
import ReactDOM from 'react-dom';
import "@testing-library/jest-dom";
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

it('Should wait for response', () => {
    act(() => {
        waitFor(() => {
        render(<QueryClientProvider client={queryClient}><Comp1 /></QueryClientProvider>);
        expect(screen.getByTestId('loading', {}, { timeout: 2000 })).toBeInTheDocument();
        });
    });
});

有任何想法吗？这会检查 async/await api 调用的响应。

我正在使用react-router V6并尝试测试useOutletContext的新功能。我的测试库是testing-library/react，我不确定如何在测试中传递上下文数据。

在 TSX 组件中，我使用 React-router 的钩子获取数据：

const { data } = useOutletContext<IContext>()

我需要类似的东西：

test("render outlet context data view", async () => {
  const { getByTestId } = render(
    <MockedProvider mocks={[mockData]} context={myContextData}>
       <ContextDataView />
    </MockedProvider>
)

MockedProvider 标签来自@apollo/client/testing

context={myContextData} 部分是我需要的

我\xe2\x80\x99m在 Node.js ( ) 上使用 Jest ( 26.6.2) 和 React-testing-library ( ) 运行一个大型测试套件。12.1.216.3.1

在某些时候，测试套件有时会崩溃

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory\n

第一个想法是 Node.js 堆已满。因此，我\xe2\x80\x99通过设置了2GB的堆大小--max-old-space-size=2048，并启用了GC日志记录（Node\xe2\x80\x99s --expose-gc+ Jest\xe2\x80\x99s --logHeapUsage）。\nGC日志记录表明堆空间可能是不是问题（如果我的理解是正确的，错误消息至少具有误导性）：

<--- Last few GCs --->\n\n[206149:0x4b56570]  1113100 ms: Mark-sweep (reduce) 872.1 (1175.1) -> 871.2 (1114.6) MB, 1786.2 / 0.0 ms  (average mu = 0.018, current mu = 0.014) last resort GC in old …

我使用 jest 和 React-Testing-Library 开发一个小型应用程序，以熟悉 React 中的测试等。

在我的<App />组件中，我有一个Routes带有两个Route. 其中之一看起来像这样：

<Route path='/' element={<RequireAuth><Dashboard /></RequireAuth>} />

如果用户未登录，则通过<RequireAuth />重定向用户到组件。 Login /><Navigate to="/login" />

这仅用于上下文。所有这些都有效。但在相当长的一段时间里，我无法通过测试来检查导航是否发生。我想，我的问题是我在 React-Testing-Libraries 方法中使用的 Route 方法render()。如果我使用测试会通过<MemoryRouter />，但如果我包装<App />在<Router location={history.location} navigator={history} />..

在接下来的 stackblitz 中，我已经实现了这两个版本。不起作用的部分目前已被注释掉。有人能告诉我，为什么它只能与 MemoryRouter 一起使用吗？您可以在 src/routing.test.tsx 中找到该测试。您可以使用 npm run test 运行测试。 https://stackblitz.com/edit/github-nfj4lw?file=src/routes.test.tsx

在 React 测试库中，我想从屏幕获取整个渲染的 HTML，并检查它是否正确渲染并存在于 dom 中。

我看到屏幕有查询 DOM 的方法，但如何访问呈现的完整 HTML。

import React from 'react';
import {render, screen} from '@testing-library/react';
import '@testing-library/jest-dom';
import {server} from '../__mock__/server.mock';
import InfoBar from '../Components/infoBar';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('InfoBar renders correctly.', async () => {
    render(<InfoBar/>);
    expect(screen).toBeInTheDocument();
});

expect(screen).toBeInTheDocument();这不起作用。