标签: react-test-renderer

我开始学习React,当我做一些测试时,我注意到两条警告信息:

警告:ReactTestUtils已移至react-dom/test-utils.更新引用以删除此警告.

警告:浅层渲染器已移至react-test-renderer/shallow.更新引用以删除此警告.

它们不会阻止测试运行也不会阻止正确验证,但始终存在此错误.

通过查看文档,我找到了这个页面,即使在我列出他们推荐的那些行之后,警告信息仍然显示出来.

我正在尝试一个非常简单的测试,这是我的代码:

import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";
import { About } from "./About";

describe('Rendering test', () => {
    const component = shallow(<About />);
    const tree      = toJson(component);

    it('Should render the About component', () => {
        expect(tree).toMatchSnapshot();
    })

    it('Should not contain an h2 element', () => {
        expect( component.contains('h2') ).toBe(false);
    })
})

为解决此警告,我需要做什么？我已将所有打包更新到最新版本.

我有一个使用的组件，useContext然后它的输出取决于上下文中的值。一个简单的例子：

import React, { useContext } from 'react';

const MyComponent = () => {
  const name = useContext(NameContext);

  return <div>{name}</div>;
};

当使用来自react和jest快照的浅色渲染器测试此组件时。如何更改值NameContext？

我正在尝试在我的 React 应用程序中进行快照测试。我已经使用react-testing-library进行一般单元测试。然而，对于快照测试，我在网上看到了不同的方法，要么使用react-test-renderer，要么使用react-testing库。这里有3个例子，它们之间有什么区别以及首选是什么？

1.使用react-test-renderer

test('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

2.使用react-testing-library和asFragment()

test('renders correctly', () => {
  const { asFragment } = render(<NotFound />);
  expect(asFragment()).toMatchSnapshot();
});

3.使用react-testing-library和容器

test('renders the component', () => {
  const container = render(<Component />)
  expect(container.firstChild).toMatchSnapshot()
})

我是 React 的新手，对所有测试库都感到困惑。我让我的测试代码正常工作，但必须create()从 react-test-renderer调用才能使用它似乎是多余的，toMatchSnapshot()并且必须render()从 @testing-library/react调用才能使用其断言，例如getByLabelText().

import {render} from '@testing-library/react';
import {act, create} from 'react-test-renderer';

it('renders a login screen', () => {
    let mockInitialState: AppState = {
        auth: initialAuthState
    };

    let component = <Root initialState={mockInitialState}/>;

    let tree = null;
    act(() => {
        tree = create(component);
    });
    expect(tree).toMatchSnapshot();

    const {getByLabelText, getByText} = render(component);
    expect(getByLabelText(/Email Address.*/));
    expect(getByLabelText(/Password*/));
    expect(getByText('Sign in'));
});

作为一个新手，我很难理解所有这些 React 库之间的区别。但我认为必须有一种更简单的方法。

如何简化我的测试代码，以便我只需要调用呈现组件的一件事，以便我可以进行快照测试和更具体的断言？

我是测试 React/Typescript 应用程序的新手。我想对我的 React 组件进行单元测试，因为我根本不满足于开发没有测试的应用程序。该应用程序本身运行良好，只是无法在测试模式下运行。

命令（别名react-scripts test）：

yarn test

输出：

yarn test

我对@amcharts/amcharts4图书馆有依赖性。虽然Feature页面不使用amCharts，但该库用于其他页面。

Feature页面的简单测试代码：

import * as React from 'react';
import { create } from 'react-test-renderer';
import Feature from "./Feature";

describe('Feature page component', () => {
  test('matches the snapshot', () => {
    const feature = create(
      <Feature />,
    );
    expect(feature.toJSON()).toMatchSnapshot();
  });
});

Feature我的功能性 React 组件 (TSX)在哪里？它是一个由其他组件组成的页面。

在阅读了类似的问题后，我怀疑我的应用程序配置有问题。所以这是我的配置：

.babelrc

{
  "presets": ["airbnb"]
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "jsx": "preserve", …

我正在为我的反应页面编写测试，但我的页面在其状态下使用 isLoading，加载页面时呈现“正在加载”，加载但没有数据（来自获取请求）呈现“未找到数据”，并且加载时呈现“未找到数据”数据（来自获取请求）加载欢迎页面。

我想编写一个测试来检查在以下情况下显示预期文本：

• 页面已加载但未找到数据
• 页面已加载并有数据

我想我已经成功地没有数据测试正常工作，但是当我尝试模拟它返回的数据时，我收到了错误消息。错误信息是

TypeError: Cannot read property 'map' of undefined

Run Code Online (Sandbox Code Playgroud)

但我不确定为什么我的模拟数据是 data: orders > 其中包含数据，因此不应未定义。

有人可以告诉我如何纠正测试吗？

欢迎页面.js

import React from "react";
import { Link } from "react-router-dom";

class WelcomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "mu url"
    fetch(proxyurl + url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data, isLoading: false }));
  }

  render() {
    const …

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

您正在尝试访问 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-test-renderer 的渲染器对我的react 组件进行单元测试。它工作正常，但使用 ReactCssTransitionGroup 后，我收到以下错误“TypeError：无法读取未定义的属性'baseVal'”。不知道如何解决这个问题

我确认这个问题是由ReactCssTransitionGroup引起的

下面是我的组件文件：

import React from 'react';
import PropTypes from 'prop-types';
import {List, ListItem, Spinner} from '@stores/reactCommon';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import BagListItem from './bag-list-item';

const BagList = ({bagList, loading}) => {
  const items = bagList.map((item, key) => (
    <ListItem key={key}>
      <BagListItem
        upc={item.upc}
        price={item.sellingPrice}
        description={item.description}
      />
    </ListItem>
  ));
  return (
    <div className="bag-list">
      {loading ? (
        <span className="bag-list__spinner">
          <Spinner size="extra-large" />
        </span>
      ) : null}
      <div className="bag-list__story-default-spacer">
        <List maxHeight="70vh">
          <ReactCSSTransitionGroup
            transitionName="bagList"
            transitionAppear={true}
            transitionAppearTimeout={500}
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}
          >
            {items} …

我正在使用带有 Jest 的 React Test Renderer 来测试我的 React Native 应用程序。

这是我正在做的一个简单的代码示例：

it('renders one text', () => {
  const text = 'bar';
  const instance = renderer.create(
    <View>
      <Text testID="foo">{text}</Text>
    </View>
  ).root;
  expect(instance.findAllByProps({ testID: 'foo' }).length).toEqual(1);
});

it('renders two texts', () => {
  const text = 'bar';
  const instance = renderer.create(
    <View>
      <Text testID="foo">{text}</Text>
      <Text testID="foo">{text}</Text>
    </View>
  ).root;
  expect(instance.findAllByProps({ testID: 'foo' }).length).toEqual(2);
});

第一个测试失败说：

Expected: 1
Received: 2

第二个测试也失败了：

Expected: 2
Received: 4

为什么使用findAllByProps查找两倍的实例来响应测试渲染器？

PS：作为健全性检查，我也尝试过findByProps哪些有效：

it('renders one …

我们曾经使用 reactDom.render 进行测试。我们在尝试测试功能组件时开始遇到问题。在这些情况下，测试会在处理所有钩子之前继续进行。我开始寻找解决方案，我发现 react-testing-library 也实现了渲染功能。它似乎解决了问题。+ 在某些情况下使用 act()。

react-testing-library render() 的返回值是一个带有 html 容器的特殊对象，而不是 React 组件。在这种情况下，我们不能再使用 reactDom 测试工具，因为它们需要组件。

我对所有这些库有点困惑，不确定测试我们的应用程序的正确方法是什么。谁能详细说明两个库之间的区别？什么时候使用行为？（我发现这篇文章建议不要在渲染中使用行为：react-test-renderer's create() vs. @testing-library/react's render()）

谢谢！