0

我在要测试的相应组件旁边使用 puppeteer 设置了一系列开玩笑的图像快照单元测试。由于导入了相应的组件，部分测试文件无法运行。测试失败似乎不是基于测试本身，即“it”块，而只是基于文件顶部的组件导入语句，该语句在同一目录中导入了相应的组件。我可以运行测试并获得失败，而无需在文件中定义任何实际测试。

示例测试。

宣言.unit.spec.js

    import React from 'react';
    import * as enzyme from 'enzyme';
    import puppeteer from 'puppeteer';
    import { shallowToJson  } from 'enzyme-to-json';
    import { shallow, configure } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    import { Manifesto } from './Manifesto.js';

    expect.extend({ toMatchImageSnapshot });

    configure({adapter: new Adapter()});

    const paragraph = {"__typename":"paragraph__manifesto"}

    describe('jest-image-snapshot of Manifesto', () => {
      it('displays something for the manifesto section', () => {
        let manifesto = shallow(
        <Manifesto 
          paragraph={paragraph}
        />
        );
        expect(shallowToJson(manifesto)).toMatchSnapshot();
      });
    });

Manifesto.js 文件（简化）

export const Manifesto = ({ paragraph }) => {
  const container = useRef(null);
  const background = useRef(null);
  const content = useRef(null);
  const lines = useRef(null);
  const splitted = useRef(null);
  const { language } = i18n;
  const tweens = useRef({
    parallax: null,
  });

  return (
    <section className={styles.container} ref={container}>
      <div className={styles.background} ref={background}>
        <DrupalMediaBackground
          config={paragraph.relationships.field_background_image_or_video_}
        />
      </div>

      <div className={styles.content} ref={content}>
        <h3 className={classNames(styles.heading, `${textEnlarge}`)}>     {paragraph.field_title}</h3>
        <p className={styles.subheading} ref={lines}>
          {paragraph.field_subtitle_1}
        </p>
      </div>
    </section>
  );
};

我收到以下消息。（另请参阅下面的错误消息链接）。Jest 一直跟踪对象，直到有一个 graphQL 调用，然后在那里失败。

终端错误消息 - jest 配置文件

看起来盖茨比配置错误。Gatsby 相关graphql 的调用应该只在编译时进行评估，然后编译掉。不幸的是，出了点问题，查询留在了编译后的代码中。

看来我可以在 jest.config.js 中添加一些东西来避免这种情况发生。可能我可以在以下键之一下添加：coveragePathIgnore、testPathIgnorePatterns 或 transformIgnorePatterns。

可能相关的 jest-config 行。

testPathIgnorePatterns: ['node_modules', '\\.cache', '<rootDir>.*/public', '<rootDir>/cypress', '<rootDir>/plugins/gatsby-source-drupal-i18n'],
transformIgnorePatterns: ['node_modules/(?!(@babel\/runtime|gatsby|gsap)/)'],

我试过没有成功。在配置文件中修改这些模式后，不确定 jest 是否需要重新启动。通过查看关于 jest 架构的 fb 讲座，似乎在每次测试运行时都会评估配置文件。此外，似乎 testPathIgnore 模式不适用于在评估文件本身的 testPath 之后发生的任何事情。非常感谢任何帮助。

可能很好的开始问题可能是：为什么或在哪些情况下，例如：浅层与创建开玩笑继续评估导入组件之外的对象，是否有必要，如果没有，我该如何停止它。

package.json devDependencies

"devDependencies": {
  "@testing-library/jest-dom": "^5.15.0",
  "@testing-library/react": "^11.2.7",
  "babel-jest": "^26.0.0",
  "enzyme": "^3.11.0",
  "enzyme-adapter-react-16": "^1.15.2",
  "enzyme-to-json": "^3.6.2",
  "eslint": "^6.1.0",
  "eslint-config-airbnb": "^18.0.1",
  "eslint-config-prettier": "^6.10.0",
  "eslint-import-resolver-babel-module": "^5.1.2",
  "eslint-plugin-import": "^2.20.1",
  "eslint-plugin-jsx-a11y": "^6.2.3",
  "eslint-plugin-react": "^7.20.6",
  "eslint-plugin-react-hooks": "^1.7.0",
  "gatsby-cli": "^2.12.91",
  "i": "^0.3.7",
  "identity-obj-proxy": "^3.0.0",
  "install": "^0.13.0",
  "jest": "^26.0.0",
  "jest-image-snapshot": "^4.5.1",
  "jest-styled-components": "^7.0.0",
  "prettier": "^2.0.2",
  "react-test-renderer": "^16.13.0",
  "yaml-jest": "^1.0.5"
},
4

0 回答 0