4

Jest is using the wrong version of core-js when building components that import from react-beautiful-dnd. However, at runtime, there is no problem and our pages build successfully.

We are building a kanban board using react-beautiful-dnd. At runtime, everything is fine and the library works really well: pages load, components are draggable where they should be draggable, etc etc.

However, it is causing problems in our tests (we are using jest and enzyme). When we try to test components that import from the react-beautiful-dnd library, we hit errors like the following:

 FAIL  app/javascript/spec/Kanban/KanbanColumn.spec.js
  ● Test suite failed to run

    Cannot find module 'core-js/library/fn/object/assign' from 'assign.js'

    However, Jest was able to find:
        '../core-js/object/assign.js'

The issue appears to be that react-beautiful-dnd depends on @babel/runtime-corejs2, which depends on core-js2. Our app is running @babel/core 7.5.5 and core-js 3.2.1. The folder structure of core-js3 is completely different, and so when jest tries to access its files, the paths are wrong.

Because these errors are not replicated at runtime, it seems that the issue must be with our jest/testing configuration.

We have managed to work around this problem by mocking the react-beautiful-dnd library in all tests of components that depend on it, but this is a bit frustrating and I was wondering if there is a better solution that simply configures jest to use the correct version of core-js in the same way as the runtime.

Our babel config:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          browsers: '> 1%',
        },
        useBuiltIns: 'usage',
        corejs: 3,
        forceAllTransforms: true,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-object-assign',
    [
      '@babel/plugin-proposal-class-properties',
      {
        spec: true,
      },
    ],
    'react-hot-loader/babel',
  ],
  env: {
    test: {
      presets: ['@babel/preset-env', 'jest', '@babel/preset-react'],
      plugins: ['@babel/plugin-proposal-class-properties'],
    },
  },
};

Our jest config:

  "jest": {
    "setupFiles": [
      "jest-date-mock",
      "./app/javascript/spec/setupTests.js"
    ],
    "roots": [
      "app/javascript/spec"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "css",
      "scss"
    ],
    "moduleDirectories": [
      "<rootDir>/node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "identity-obj-proxy",
      "^.+\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/app/javascript/spec/__mocks__/fileMock.js",
      "\\.(gif|svg|png)$": "<rootDir>/app/javascript/spec/__mocks__/fileMock.js",
      "\\.worker.entry.js": "<rootDir>/app/javascript/spec/__mocks__/workerMock.js"
    },
    "collectCoverageFrom": [
      "**/app/javascript/components/**"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 49,
        "branches": 5,
        "functions": 15,
        "lines": 48
      }
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },

Jest setup:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

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

0 回答 0