Question

我目前正在开发一个小型应用程序，并且忙于Jest单元测试。在这里，我尝试使用浅色渲染。不幸的是快照不匹配，我也不知道为什么（我只和React和Jest在一起工作了一个星期）。

tests / index.test.tsx

import { shallow, configure } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import { AppRouter } from '..';

configure({ adapter: new Adapter() })
test('App component', () => {
  const wrapper = shallow(<AppRouter routes={[]} />);
  expect(toJson(wrapper)).toMatchSnapshot();
});

routes / index.tsx

export const AppRouter = ({ history, routes }: Props) => {
  return (
    <Router basename={BASE_NAME} >
      <AppRoutes routes={routes} />
    </Router>
  );
};

index.tsx.snap（与toJson快照->酶解-json）

exports[`App component 1`] = `ShallowWrapper {}`;

exports[`App component should match snapshot 1`] = `
ShallowWrapper {
  Symbol(enzyme.__root__): [Circular],
  Symbol(enzyme.__unrendered__): <AppRouter
    routes={Array []}
  />,
  Symbol(enzyme.__renderer__): Object {
    "batchedUpdates": [Function],
    "getNode": [Function],
    "render": [Function],
    "simulateError": [Function],
    "simulateEvent": [Function],
    "unmount": [Function],
  },
  Symbol(enzyme.__node__): Object {
    "instance": null,
    "key": undefined,
    "nodeType": "class",
    "props": Object {
      "basename": "/view/project-setup/",
      "children": <AppRoutes
        routes={Array []}
      />,
    },
    ....

笑话失败消息

 FAIL  routes/tests/index.tsx
  ● App component

    expect(received).toMatchSnapshot()

    Snapshot name: `App component 1`

    - Snapshot
    + Received

    - ShallowWrapper {}
    + <BrowserRouter
    +   basename=""
    + >
    +   <AppRoutes
    +     routes={Array []}
    +   />
    + </BrowserRouter>

       8 | test('App component', () => {
       9 |   const wrapper = shallow(<AppRouter routes={[]} />);
    > 10 |   expect(toJson(wrapper)).toMatchSnapshot();
         |                           ^
      11 | });
      12 | 

      at Object.<anonymous> (src/routes/__tests__/index.tsx:10:27)

 › 1 snapshot failed.

用Jest / React进行单元测试路由器组件->快照失败

0 个答案: