Question

我在我的React项目中使用了带有酶的Jest测试，但是在使用Formik库的组件运行测试时遇到了这个错误：

  ● Test suite failed to run

    TypeError: Cannot set property 'displayName' of undefined

      1 | import React from 'react';
      2 | import PropTypes from 'prop-types';
    > 3 | import * as formik from 'formik';
        | ^
      4 | import { object, string } from 'yup';
      5 | import Validator from 'validator';
      6 | 

      at Object.<anonymous> (node_modules/formik/src/Form.tsx:18:17)
      at Object.<anonymous> (node_modules/formik/dist/index.js:6:20)
      at Object.<anonymous> (src/views/UserEdit/components/UserEditInformation/Dumb.js:3:1)
      at Object.<anonymous> (__tests__/views/UserEdit/components/UserEditInformation.test.js:4:1)

我尝试模拟该模块，但没有成功。。似乎在该模块的此文件中，格式可能未定义？ https://github.com/jaredpalmer/formik/blob/master/src/Form.tsx

这是我在packages.json中最有趣的配置

"jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupFiles": [
      "<rootDir>/jest.setup.js"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "testPathIgnorePatterns": [
      ".history"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "^[^/]*components(.*)[^/]*Dumb": "<rootDir>/src/components/$1/Dumb.js",
      "^[^/]*components(.*)": "<rootDir>/src/components/$1/index.js",
      "^store(.*)": "<rootDir>/src/core/redux/$1"
    },
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
    }
  }

和我的jest.setup.js

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// Setup enzyme's react adapter
Enzyme.configure({ adapter: new Adapter() });
registerRequireContextHook();

// Mock needed node modules
jest.mock('hoist-non-react-statics');
jest.mock('react-router');
jest.mock('yup');
jest.mock('formik');

// Create the global aliasses for the jest test
window._ = require('lodash');
window.jQuery = require('jquery');
window.React = require('react');
window.moment = require('moment');
window.Highcharts = require('highcharts');
window.matchMedia = // Need it for react-slick library
  window.matchMedia ||
  function() {
    return {
      matches: false,
      addListener: function() {},
      removeListener: function() {},
    };
  };

让我知道是否需要更多信息。

我也在使用一个webpack，它可以来自webpack吗？像可移植失败吗？

感谢任何可以帮助解决此问题的人。

玩笑测试因Formik模块失败：“ TypeError：无法设置未定义的属性'displayName'

0 个答案: