React 17 JSX 导入与玩笑快照测试

Question

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

\n

然而，这破坏了我们用于应用程序的笑话快照测试，从而触发错误：\nReferenceError: React is not defined

\n

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

\n

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

\n

import { Provider } from 'react-redux';\nimport renderer from 'react-test-renderer';\nimport { applyMiddleware, createStore } from 'redux';\nimport { createEpicMiddleware } from 'redux-observable';\n\nimport { Price } from '../../../app/components/common/Price';\nimport rootReducer from '../../../app/ducks/rootReducer';\n\nconst epicMiddleware = createEpicMiddleware();\nconst store = createStore(\n  rootReducer, applyMiddleware(epicMiddleware)\n);\n\nconst price = 100;\ndescribe('<Price> Component test', () => {\n  it('should match snapshot', () => {\n    const tree = renderer.create(\n      <Provider store={store}>\n        <Price price={price} currencyKey="\xe2\x82\xac">{price}</Price>\n      </Provider>\n    );\n    expect(tree).toMatchSnapshot();\n  });\n});\n\n

\n

它的主要组成部分：

\n

import { useSelector } from 'react-redux';\n\nimport Text from 'app/components/common/Text';\n\nimport { CurrencyFormatter } from 'app/services/common/js-price-formatter';\n\nexport const Price = ({ style, price, currencyKey }) => {\n  const country = useSelector(state => state.locale.get('country'));\n  const currencyFormatter = CurrencyFormatter.forCountry(country);\n  return <Text style={style} label={currencyFormatter.format(price, currencyKey)} />;\n};\n\nexport default Price;\n

\n

这是摘录package.json

\n

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

\n

Answer 1

我也遇到过这个问题一段时间，但通过添加runtime: "automatic"babel.config.js 解决了这个问题（参考：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" }]],
};

希望可以帮助其他遇到这种情况的人。