Stylex 在玩笑测试期间无法编译：“永远不应该调用 stylex.create。它应该被编译掉。”

Question

npm run start

但是当我运行测试时，我收到一条错误消息：

  ● Test suite failed to run

    stylex.create should never be called. It should be compiled away.

我正在使用

stylx 网站

的非常基本的配置。

这个 stylex 是导致错误的原因：

import React from 'react';
import { SectionLayoutProps } from 'common/utils/types';
import { layoutStyle } from 'common/styles/layout.stylex';
import * as stylex from '@stylexjs/stylex';

export default function SectionLayout({ children, testId = null }: SectionLayoutProps) {
  return (
    <div
      data-testid={testId}
      {...stylex.props(layoutStyle.sectionLayout)}
    >
      {children}
    </div>
  );
}

常见/样式/layout.stylex.ts

import * as stylex from '@stylexjs/stylex';

export const layoutStyle = stylex.create({
  sectionLayout: {
    paddingTop: '20px',
    paddingBottom: '20px',
  },
});

我将插件添加到我的 babel 和 webpack 配置文件中：webpack.config.js

module.exports = {
...
plugins: [
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // get webpack mode and set value for dev
      dev: true,
      test: true,
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      // classNamePrefix: 'x',
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
]

babel.config.js

const styleXPlugin = require('@stylexjs/babel-plugin');

module.exports = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        // Set this to true for snapshot testing
        // default: false
        test: true,
        // Required for CSS variable support
        unstable_moduleResolution: {
          // type: 'commonJS' | 'haste'
          // default: 'commonJS'
          type: 'commonJS',
          // The absolute path to the root directory of your project
          rootDir: __dirname,
        },
      },
    ],
  ],
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ]
};

问题是 jest 没有设置为使用 babel，所以当我运行测试时 stylex 没有编译。解决方案：

Answer 1

npm install --save-dev babel-jest

并将其添加到 jest.config.js

module.exports = {
...
    transform: {
      '^.+\\.[t|j]sx?$': 'babel-jest',
    },
}

现在工作正常。