标签: react-testing-library

我是编写单元测试的新手，我正在尝试使用testing-library/react和向我的反应应用程序编写单元测试jest

这是测试代码“Home.test.js”

import React from 'react';
import {render, cleanup} from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Home from "../src/Home";    

afterEach(cleanup);

describe("Tests for HomePage", function() {
    it("should render without throwing an error", function() {
        const { homePage } = render(<Home />);
        //check something here
    });
});

这是我在组件“Home.js”中的代码

import * as React from "react";

import { Panel, Shell, Button } from "@myorg/core";
import { home_icon, new_icon } from "@myorg/icons";

function Home(props) {
    const openDialog = React.useCallback(() => {
        //do something
    }); …

我正在尝试使用 jest 和 react-testing-library 测试我的 LoginForm 组件。当登录表单成功提交时，我的handleLoginSuccess函数应该在localStorage上设置“用户”项，并使用history.push()将用户导航回主页。这在开发环境中的浏览器中有效，但是当我使用 Jest 渲染组件并模拟 API 时，localStorage 会更新，但不会导航到“/”。

我尝试在调用history.push()之前设置localStorage。我不确定在这种情况下是什么负责重新渲染，以及为什么它在开发中有效但在测试中无效。

登录.test.jsx

import 'babel-polyfill'
import React from 'react'
import {withRouter} from 'react-router'
import {Router} from 'react-router-dom'
import {createMemoryHistory} from 'history'
import {render, fireEvent} from '@testing-library/react'
import Login from '../../pages/Login'
import API from '../../util/api'

jest.mock('../../util/api')


function renderWithRouter(
  ui,
  {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {},
) {
  return {
    ...render(<Router history={history}>{ui}</Router>),
    // adding `history` to the returned utilities to allow us
    // to reference it in our …

我正在尝试使用 Jest 运行测试，但是收到此错误：

jest.mock 不是一个函数

我究竟做错了什么？这是我的 CodeSandbox：https://codesandbox.io/s/polling-hook-demo-9yo8c

请注意，我在 package.json 中配置 Jest：

"setupFilesAfterEnv": [
  "./src/test/setupTestsAfterEnv.ts"
]

setupTestsAfterEnv.ts 使用 jest-dom 扩展 Jest Expect：

import "@testing-library/jest-dom/extend-expect";

我也在使用反应测试库。

更新

这似乎是我的 CodeSandbox 配置的问题。我在本地尝试了与 create-react-app 相同的操作，问题就消失了！

这是我的 Github 存储库，其中 Jest 运行得非常好： https: //github.com/nareshbhatia/hooked-on-polling。

然后，我将此存储库导入到新的 CodeSandbox 中： https: //codesandbox.io/s/hooked-on-polling-2em7g。当我在此沙箱中运行测试时，我再次收到相同的错误：jest.mock 不是函数

只是想确保我按照惯用方式执行此操作，并且我看到的示例似乎没有显示这一点...当我单击按钮时，我想检查 aria 属性是否已更新。为了让测试正常工作，我需要重新查询该元素。这是最好的方法，还是我应该等待一些事情？

test("should set aria-selected on tab after click", () => {

    let secondTab = getAllByRole("tab")[1];

    fireEvent.click(secondTab);

    secondTab = getAllByRole("tab")[1]; // Is this proper?

    expect(secondTab).toHaveAttribute("aria-selected", "true");

我正在使用 jest 和react-testing-library 测试一个react 项目。

该项目有不同的 navigator.useragent 代码包含 android / mobile / blackberry 。

为了测试代码，我必须模拟 navigation.useragent。

我如何才能实现嘲笑。

我将 Jest 与react-testing-library一起使用，并在模拟推进计时器时遇到此警告：

 console.error
      Warning: An update to TimerProvider inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):
      
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

经过一番搜索，我发现了一个视频，建议将任何调用包装在函数jest.advanceTimersByTime中act()。

act(() => jest.advanceTimesByTime(1000);

然而，我正在使用 TypeScript，现在对如何解决由此产生的类型错误感到困惑：

TS2769:Type 'typeof jest' is not assignable to type 'void'.

如何正确修复此类型错误？

如何从 span 元素中找到 by text 的复选框？我无法修改我的 HTML。我希望在输入元素上测试 fireEvent。

`

<label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN A</span>
   </div>
</label>
<label>
   <div>
      <input type="checkbox" class="checkbox-extra-style">
      <span> SPAN B</span>
   </div>
</label>

`` ....

非常感谢您的帮助。