标签: react-test-renderer

这是我的根本组成部分：

const App = () => (
    <Provider store={store}>
        <PersistGate persistor={persistor} loading={<LoadingView />}>
            <MainTabNavigator />
        </PersistGate>
    </Provider>
)
export default App

还有一个非常简单的快照测试：

describe('Testing root App component', () => {
    test('Renders as expected', () => {
        const tree = renderer.create(<App />).toJSON()
        expect(tree).toMatchSnapshot()
    })
})

当我运行测试时，它通过了，但下面显示了此错误消息：

PASS  __tests__/App.test.tsx
  ? Console

    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5190
      The above error occurred in the <TabView> component:
          in TabView (created by withCachedChildNavigation(TabView))
          in withCachedChildNavigation(TabView)
          in Unknown (created by Navigator)
          in Navigator (created by NavigationContainer)
          in NavigationContainer (created by App) …

我正在使用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} …

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

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

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

谢谢！

所以我有一个显示一些文本字段的组件。一个输入，一个选择，根据用户在该选择上使用的输入，（选择的值）显示或不显示第三个。

我尝试使用 React-Test-Renderer 仅测试第一个输入字段，但出现以下错误：预期 1 但发现 2 个节点类型为“未定义”的实例

这是输入字段代码：

    <div>
      <div className="container">
        <h3 className="h3">Info</h3>
        <div className="row">
          <div className="col">
            <label htmlFor="test">test:</label>
            <input
              id="myID"
              value={aPropThatIsAnEmptyString}
              type="text"
              className={`form-control form-control-sm ${style.fieldsGap}`}
              onChange={e => setTest(e.target.value)}
              placeholder="test"
            />
          </div>
          <div className="col">
            <label htmlFor="ddlType">test2:</label>
            <select
              id="SelectId" 

这是我的测试代码：

 it("test input field", () => {
    const newProps = {
      something: initialState,
      dispatch: reducer
    };
    const component = TestRenderer.create(
      <ContextBR.Provider value={{ ...newProps }}>
        <ComponentWithTheFields/>
      </ContextBR.Provider>
    );
    const rootInstance = component.root;
    console.log(rootInstance);
    const inputField = rootInstance.findByType("input");

    inputField.props.onChange({ target: { value: "" …

我对查询元素何时/如何更新感到困惑。例如：

我有一个可以计数的按钮。当数到3时，它就消失了。

import React, { useState } from "react";

export default () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count < 3 && (
        <button onClick={() => setCount(count + 1)}>{count}</button>
      )}
    </div>
  );
};

我正在像这样测试它：

test("Counter counts up and disappears", () => {
  const { queryByText } = render(<App" />);

  const button = queryByText("0");
  expect(button.textContent).toEqual("0");

  fireEvent.click(button);
  expect(button.textContent).toEqual("1");

  fireEvent.click(button);
  expect(button.textContent).toEqual("2");

  fireEvent.click(button);
  expect(button).toBe(null);
});

测试失败并出现以下错误：

expect(received).toBe(expected)

Expected value to be (using ===):
  null
Received:
  <button>2</button>

为什么按钮元素知道其文本内容已更改？我们不需要在每次点击后运行queryByText("1")and 。 …

我正在使用Jest和Enzyme进行 React 应用程序测试。

我的文件夹结构看起来像

• /源

  • /__测试__

    • /关卡组件

      • OuterComp.test.js

  • /成分

    • /关卡组件

      • 外部组件

    • /小部件

      • 陈Dropdown.js

OuterComp.js

import React, { Component } from 'react'

import ChenDropdown from '../Widgets/ChenDropdown'

class OuterComp extends Component {

  render() {
      return (
        <div>
          <ChenDropdown />
          <ChenDropdown />
        </div>
      )
  }
}

export default OuterComp

ChenDropdown.js

import React, { Component } from 'react'

class ChenDropdown extends Component {
  render() {
    return <h1>test</h1>
  }
}

export default ChenDropdown

OuterComp.test.js

import Adapter from 'enzyme-adapter-react-16'
import Enzyme, { …

假设我有以下基本组件Basic.js：

import React, { useState, useEffect } from 'react';

export default () => {
  const [items, setItems] = useState([{ name: 'original' }]);

  useEffect(() => {
    setItems([{ name: 'new1' }, { name: 'new2' }]);
  }, []);

  return (
    <div>{items && items.map((item, i) => <div key={i}>{item.name}</div>)}</div>
  );
};

使用react-test-renderer，我可以编写以下测试：

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Basic from './Basic';

describe('Basic', () => {
  test('renders', async done => {
    let component = TestRenderer.create(<Basic />);
    setImmediate(() => { …

当尝试使用 jest lib 为这样的 Modal 组件编写一个简单的测试时

import { Modal } from '@material-ui/core';
import React from 'react';
import TestRenderer from 'react-test-renderer';

describe('Material Modal test', () => {
  it('It should render', () => {
    const testRenderer = TestRenderer.create(
      <Modal open={true}>
        <div>Test</div>
      </Modal>
    );

    console.log(testRenderer.toJSON());
  });
});

我收到一个错误：

 console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:120
      Warning: An invalid container has been provided. This may indicate that another renderer is being used in addition to the test renderer. (For example, ReactDOM.createPortal inside of a ReactTestRenderer tree.) This is not …

我有一个直接的反应补偿。我想根据反应状态测试样式。该 comp 如下所示：

反应补偿。

const Backdrop = ({ showBackdrop }) => {
    const backdropRef = useRef();

    function getBackdropHeight() {
        if (typeof window !== 'undefined') {
            return `calc(${document.body.clientHeight}px -
            ${backdropRef.current?.offsetTop || 0}px)`;
        }

        return 0;
    }

    return (
        <div
            data-testid="backdrop"
            className={classNames(styles.backdrop, showBackdrop ? styles.show : styles.hide)}
            ref={backdropRef}
            style={{ height: getBackdropHeight() }}
        />
    );
};

造型

.backdrop {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 156px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3;
    ...
}

.show {
    opacity: 0;
    visibility: …

我在我的项目中使用 React-18.0.0，在测试文件中我收到以下错误

createRoot(...)：目标容器不是 DOM 元素。

我的测试文件是：

import ReactDOM from 'react-dom/client';
import { render, screen } from "@testing-library/react";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

test("renders learn react link", () => {
    root.render(<App />);
    const linkElement = screen.getByText(/Hello React/i);
    expect(linkElement).toBeInTheDocument();
});