Question

我有一个使用Create-React-app构建的react应用。我正在尝试使用内联快照测试将单元测试添加到组件之一。与通常的嫌疑人一起，我已经安装了styled-components，jest-styled-components和Prettier作为开发依赖项。我在package.json的jest配置中添加了“ jest-styled-components”作为snapshotSerializer。

运行单元测试时出现以下错误-

    PrettyFormatPluginError: plugins[p].test is not a functionTypeError: plugins[p].test is not a function

  15 |   );
  16 | 
> 17 |   expect(container).toMatchInlineSnapshot();
     |                     ^
  18 | });
  19 | 
  20 | test("it renders empty cart message", () => {

  at findPlugin (node_modules/pretty-format/build/index.js:343:22)
  at prettyFormat (node_modules/pretty-format/build/index.js:523:22)
  at Object.toMatchInlineSnapshot (node_modules/expect/build/index.js:342:33)
  at Object.<anonymous> (src/components/cart-dropdown/__tests__/cart-dropdown.js:17:21)

我不知道出了什么问题。请帮忙。

// package.json
...
"devDependencies": {
        "@testing-library/dom": "^6.11.0",
        "@testing-library/jest-dom": "^5.0.0",
        "@testing-library/react": "^9.4.0",
        "jest-styled-components": "^7.0.0",
        "prettier": "^1.19.1"
      },
      "jest": {
        "snapshotSerializers": [
          "jest-styled-components"
        ]
      }

// unit test
import React from "react";
import { render } from "@testing-library/react";
import CartDropdown from "../cart-dropdown";

test("it renders", () => {
  const mockHistory = jest.fn();
  const mockDispatch = jest.fn();

  const { container, debug } = render(
    <CartDropdown
      cartItems={[]}
      history={mockHistory}
      dispatch={mockDispatch}
    />
  );

  expect(container).toMatchInlineSnapshot();
});

Answer 1

从jest config（Package.json）错误中删除snapshotSerializers条目将消失

使用自定义快照序列化程序运行Jest快照测试时出错-Jest-Styled-Components

1 个答案: