在响应快照测试时，从Formik组件发出CSS模块问题

Question

我希望尝试快照测试一个更大的组件，但是我的组件因为里面的formik组件而失败(通过删除它进行测试)。

import {
  RadiusInputField,
  createValidators,
  requiredValidator,
  VALIDATE_REQUIRED_TYPES
} from '../../../core/components/formik'

此formik组件用于样式组件：

const TextBoxContainer = styled(RadiusInputField)`

我得到了以下错误：

/Users/ravelyn/dev/kobiton/portal/node_modules/flexboxgrid/dist/flexboxgrid.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.container-fluid,
                                                                                             ^
    
    SyntaxError: Unexpected token '.'

我已经测试过，我可以在另一个测试中单独导入css模块，没有任何问题。

我的jest配置配置如下：

const config = {
  "automock": false,
  "rootDir": "src",
  "modulePaths": ["<rootDir>"],
  "moduleFileExtensions": ['js', 'jsx'],
  "moduleDirectories": ["node_modules"],
  "moduleNameMapper": {
    "^src(.*)$": "<rootDir>",
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '.+.(css|less)$': 'identity-obj-proxy'
  },
  "transform": {
    '\\.[jt]sx?$': 'babel-jest'
  }
};

module.exports = config;

我的测试是这样的：

import React from "react";
import renderer from 'react-test-renderer';
import theme from '../../../../main/theme';
import Component from "../component-under-test";
import {ThemeProvider} from 'styled-components'

it("should render a gesture dialog text box", () => {
  const tree = renderer
    .create(
      <ThemeProvider theme={theme}>
        <Component />
      </ThemeProvider>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();

});

Answer 1

这个问题很可能是由于在Jest测试中导入CSS模块造成的，Jest不支持这个测试。Jest不支持直接导入CSS模块，在代码中遇到.css或.less导入时会引发错误。

要解决这个问题，您需要使用jest.mock函数来模拟CSS模块。这将允许Jest用模拟实现替换CSS模块，这将防止错误发生。

下面是一个如何做到这一点的例子：

1. 在测试文件中，使用jest.mock函数模拟CSS模块：

jest.mock('../../../core/components/formik', () => ({
  RadiusInputField: () => <div />,
  createValidators: () => {},
  requiredValidator: () => {},
  VALIDATE_REQUIRED_TYPES: {},
}));

1. 在测试文件中导入模拟的CSS模块：

import '../../../core/components/formik';

在进行这些更改之后，测试应该能够导入CSS模块，而不会引发错误，并且测试应该通过。如果你还有什么问题，请告诉我！