带有笑话快照测试的 React 17 JSX 导入答案

【问题标题】：React 17 JSX Import with jest snapshot tests带有笑话快照测试的 React 17 JSX 导入
【发布时间】：2021-06-23 11:24:51
【问题描述】：

随着 React 17 更新，不再需要在 React 组件中显式包含 import React from 'react';。我们想利用该功能，因此我们已从源代码中删除了所有 React 导入。

然而，这会破坏我们用于触发错误的应用程序的开玩笑快照测试： ReferenceError: React is not defined

我想知道这个问题是否有任何解决方法。

这是我们正在使用的一个示例 jest 快照测试：

import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import { applyMiddleware, createStore } from 'redux';
import { createEpicMiddleware } from 'redux-observable';

import { Price } from '../../../app/components/common/Price';
import rootReducer from '../../../app/ducks/rootReducer';

const epicMiddleware = createEpicMiddleware();
const store = createStore(
  rootReducer, applyMiddleware(epicMiddleware)
);

const price = 100;
describe('<Price> Component test', () => {
  it('should match snapshot', () => {
    const tree = renderer.create(
      <Provider store={store}>
        <Price price={price} currencyKey="€">{price}</Price>
      </Provider>
    );
    expect(tree).toMatchSnapshot();
  });
});

它是主要组件：

import { useSelector } from 'react-redux';

import Text from 'app/components/common/Text';

import { CurrencyFormatter } from 'app/services/common/js-price-formatter';

export const Price = ({ style, price, currencyKey }) => {
  const country = useSelector(state => state.locale.get('country'));
  const currencyFormatter = CurrencyFormatter.forCountry(country);
  return <Text style={style} label={currencyFormatter.format(price, currencyKey)} />;
};

export default Price;

这是package.json的摘录

{
  "dependencies": {
    "react": "17.0.2",
    ...
  },
  "devDependencies": {
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "jest-circus": "^26.6.3",
    "react-dom": "17.0.2",
    "react-test-renderer": "17.0.2",
    ...
  },
}

【问题讨论】：

我得到一个“React”指的是一个 UDM 全局文件，但当前文件是一个模块。

标签： reactjs jestjs

【解决方案1】：

我也遇到过这个问题，但是通过在 babel.config.js 中添加 runtime: "automatic" 解决了（参考：https://github.com/testing-library/react-testing-library/issues/810#issuecomment-718596241）

我的babel.config.js现在是这样的：

module.exports = {
    presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
};

希望可以帮助遇到此问题的其他人。

【讨论】：