标签: react-test-renderer

我的React应用程序具有一个组件，该组件从远程服务器获取要显示的数据。在前钩时代，这componentDidMount()是一个可以去的地方。但是现在我想为此使用钩子。

const App = () => {
  const [ state, setState ] = useState(0);
  useEffect(() => {
    fetchData().then(setState);
  });
  return (
    <div>... data display ...</div>
  );
};

我使用Jest和Enzyme进行的测试如下所示：

import React from 'react';
import { mount } from 'enzyme';
import App from './App';
import { act } from 'react-test-renderer';

jest.mock('./api');

import { fetchData } from './api';

describe('<App />', () => {
  it('renders without crashing', (done) => {
    fetchData.mockImplementation(() => {
      return Promise.resolve(42);
    });
    act(() => mount(<App />));
    setTimeout(() => …

从此文档中：https : //reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks

文档提供了一种设置和拆卸测试的方法，如下所示：

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

从此文档中：https : //reactjs.org/docs/testing-recipes.html#setup--teardown

设置和拆卸方式如下：

import { unmountComponentAtNode } from "react-dom";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

我有点困惑，哪一种是拆除测试的最佳方法？

unmountComponentAtNode+ dom.remove()或document.body.removeChild？

更新资料

拆解测试时，这两个官方文档提供了这两种方式，这是否意味着它们都可以？它们相等吗？或者是什么？

我必须使用新的React lazyAPI(16.6)导入组件.

import React, {PureComponent, lazy} from 'react';

const Component1 = lazy(() => import('./Component1'));
const Component2 = lazy(() => import('./Component2'));

class CustomComponent extends PureComponent {
  ...
  render() {

  return (
    <div>
      <Component1 />
      <Component2 />
    </div>
  );
 }
}

在我的测试中,我正在做这个组件的快照.这是一个非常简单的测试:

import { create } from 'react-test-renderer';

const tree = await create(<CustomComponent />).toJSON();

expect(tree).toMatchSnapshot();

在日志中,测试失败并显示以下错误:

A React component suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading …

我正在使用react-test-rendererJest 来测试 React 组件。但是，如果我像这样测试 react-mui 模态对话框：

describe('Dashboard', function () {
  let dashboard;
  beforeEach(async () => {
    testRenderer = TestRenderer.create(<MemoryRouter><Route component={Dashboard} /></MemoryRouter>);
    dashboard = testRenderer.root.findByType(Dashboard);
    await waitForExpect(() => expect(dashboard.instance.state.hasLoaded).toBeTruthy());
  });


  it('opens dialog on clicking the new class', async () => {
    const button = testRenderer.root.findByType(Button);
    expect(dashboard.instance.state.showDialog).toBeFalsy();
    button.props.onClick();
    expect(dashboard.instance.state.showDialog).toBeTruthy();
  });
});

但是，然后我收到一个错误：

错误：失败：“错误：未捕获'警告：提供了无效的容器。这可能表明除了测试渲染器之外，正在使用另一个渲染器。（例如，ReactTestRenderer 树中的 ReactDOM.createPortal。）这是不支持。%s'

我应该如何测试然后响应门户以使此测试有效？

因此，在我的程序中，当用户登录时，如果所有凭据都正确，如果缺少任何详细信息或格式不正确，他们将进入下一页，并且屏幕上会显示警报。

如果在按下按钮后显示警报，我如何在 React Native 中使用 Jest 进行测试，并确认警报文本是否正确？

我的一些组件如下所示：

...
.catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorMessage)
  });

错误文本是由 Google 的 Firebase 生成的，但我知道它是什么。

我创建了一个测试文件来测试我的以下“BiddingScreen”，

const BiddingScreen = ({ route, navigation }) => {

const { currentBid } = route.params;


return (
    <SafeAreaView style={styles.main}>
        <Header title="BID Here" navigation={navigation} />
        <View style={styles.container}>
            <Text style={styles.currentBid}>{CurrentBid}$</Text>
        </View>
    </SafeAreaView>
)}

我的测试文件如下，

import React from 'react';
import renderer from 'react-test-renderer';
import BiddingScreen from "../../../src/containers/biddingScreen/BiddingScreen";

jest.mock('@react-native-firebase/auth');

jest.mock("react-native/Libraries/EventEmitter/NativeEventEmitter");


test('renders correctly', () => {
    const tree = renderer.create(< BiddingScreen />).toJSON();
    expect(tree).toMatchSnapshot();
});

当我运行测试文件时出现此错误，

TypeError: Cannot read property 'params' of undefined

那么谁能帮我解决这个问题，谢谢

我已经使用文档中的基本打字稿模板创建了一个博览会应用程序。安装了测试及其类型所需的所有要求。

我可以运行测试，并且确实通过了测试。

但是，对于文档上的示例测试，我在 IDE（VS 代码）上收到错误：

I am using the NumericInput and it works fine when I run the application on my device.

However, when I run jest, I get all kind of errors:

TypeError: Cannot read property 'default' of undefined

  at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:389)
  at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3435:18)
  at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6606:5)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7563:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
  at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)
  at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11349:7)
  at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12237:7)
  at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12149:7)
  at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12123:3)

and

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036
The above error occurred in the <Icon> component:
    in Icon …