reactjs - 使用 jest 与 React-scripts 测试

Question

js 和 React 新手...使用测试框架...代码如下:

    import React from 'react';
  //  import CheckboxWithLabel from '../CheckboxWithLabel';
    import {shallow} from 'enzyme'; //not installed...

    //var x = require ('../CheckboxWithLabel.js');


    test('CheckboxWithLabel changes the text after click', () => {
  const checkbox = shallow(
    <CheckboxWithLabel labelOn="On" labelOff="Off" />
  );
  expect(checkbox.text()).toEqual('Off');
  checkbox.find('input').simulate('change');
  expect(checkbox.text()).toEqual('On');
});

react-scripts测试错误是:无法从“checkboxWithLabel-test.js”中找到模块“enzyme”

虽然 Jest 错误是:

Jest encountered an unexpected token

    SyntaxError: /Users/shriamin/Development/js_prj_react_django_etc/jest_react_demo/my-app/src/__tests__/checkboxWithLabel-test.js: Unexpected token (12:4)

      10 |  test('CheckboxWithLabel changes the text after click', () => {
      11 |   const checkbox = shallow(
    > 12 |     <CheckboxWithLabel labelOn="On" labelOff="Off" />
         |     ^
      13 |   );
      14 |   expect(checkbox.text()).toEqual('Off');
      15 |   checkbox.find('input').simulate('change');

我不知道为什么 jest 会抛出这个错误...react-scripts 测试对我来说很有意义，因为 enzyme 没有安装...请告诉我 jest 是否很糟糕，或者我在配置 jest 时做错了什么(通过安装npm 并更新 package.json)。

注意:我没有安装 babel...我还不知道那是什么。

谢谢

Answer 1

您自己得出了答案。要使用 jest 你的测试需要通过 babel 来让运行器理解 React 语法。看看babel-doc以更详细地了解它。它只是一个转换工具，可以将花哨的语法转换成 javascript 可以理解的东西。安装以下插件和预设。

Presets

npm i --save @babel/preset-env
npm i --save @babel/preset-react

Plugins

npm install --save babel-plugin-transform-export-extensions

在您的 .babelrc 中添加以下行:

{
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": [
        "transform-export-extensions",
      ],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

现在尝试从项目目录在命令行上运行 jest，以确保测试配置正确。

react-scripts 是一组预配置的命令，如果您想使用它而不是 jest，则可以使用 create-react-app 开箱即用。 命令，检查here .

react-scripts 希望您的测试文件夹位置遵循 certain convention 。这可能就是当 react-scripts test 命令开箱即用时无法获取测试的原因。