Question

我正在尝试为 React 组件编写快照测试。我想调用子组件的 onChange 方法。但不知何故，我的快照完全是空的。

快照结果：

exports[`Category list screen test cases category list with match param from the previous screen 1`] = `<DocumentFragment />`;

以下是我的代码。我的测试文件是

import React from 'react';
import { render, cleanup, screen } from '@testing-library/react';
import CategoryTasks from './CategoryTasks';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { renderWithRouterMatch } from './routerWithMatch';

let mockStore;
beforeEach(() => {
  mockStore = configureStore([thunk]);
});

describe('Category list screen test cases', () => {
  it("category list with match param from the previous screen", () => {

    const intialState = {};

    const store = mockStore(intialState);
    function component() {
      return <Provider store={store}>
        <CategoryTasks />
      </Provider>
    }

    const { asFragment } = renderWithRouterMatch(component, {
      route: "/category-tasks/1002",
      path: "/category-tasks/:frequencyId"
    });
    expect(asFragment()).toMatchSnapshot();
  });
});

我的 renderWithRouterMatch 文件是

import React from 'react';
import { render } from '@testing-library/react';
import { Route, Router } from "react-router-dom";
import { createMemoryHistory } from "history";

export function renderWithRouterMatch(
  ui,
  {
    path = "/",
    route = "/",
    location = ""
  } = {}
) {
  const history = createMemoryHistory({ initialEntries: [route] });
  return render(
    <Router history={history}>
      <Route path={path} component={ui} />
    </Router>
  )
}

React 测试库 + Jest：未创建快照

0 个答案: