无法运行笑话测试用例

Question

我编写了一个小测试用例来测试ThankYouPage 组件，如下所示

import ToggleDisplay from 'react-toggle-display';
import styles from '../styles.css';

function ThankYouPage(props) {
  return (
    <ToggleDisplay show={props.show}>
      <div className={styles.thankyouText}> Thank you!</div>
      <div className={styles.helpText}>
        The more you thanks, the better.
      </div>
    </ToggleDisplay>
  );
}

export default ThankYouPage;

以下是开玩笑的测试用例-

import React from 'react';
import ThankYouPage from './components/thank-you-page';
import { shallow } from 'enzyme';


describe('<ThankYouPage />', () => {
  it('renders 1 ThankYouPage component', () => {
    const component = shallow(<ThankYouPage show=true />);
    expect(component).toHaveLength(1);
  });
});

以下是我在运行npm test后得到的控制台跟踪

> myreactapp@1.0.0 test /Users/rahul/myreactapp
> jest

 FAIL  tests/thank-you-page.test.js
  ● Test suite failed to run

    /Users/cominventor/myreactapp/tests/thank-you-page.test.js: Unexpected token (8:30)
         6 | describe('<ThankYouPage />', () => {
         7 |   it('renders 1 ThankYouPage component', () => {
      >  8 |     const component = shallow(<ThankYouPage show=true />);
           |                               ^
         9 |     expect(component).toHaveLength(1);
        10 |   });
        11 | });

我是否缺少在浅层中解释 jsx 的依赖项？以下是我的部门的样子

"devDependencies": {
    "babel-jest": "^22.4.3",
    "oc-template-react-compiler": "5.0.2",
    "prettier": "^1.10.2",
    "prettier-eslint": "^8.8.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "enzyme": "^3.3.0",
    "jest": "^22.4.3",
    "jsdom": "^11.10.0",
    "querystring": "^0.2.0",
    "react-cookie": "^2.1.4",
    "react-scripts": "^1.1.4",
    "react-toggle-display": "^2.2.0"
  }

Answer 1

尝试安装

npm i --save-dev enzyme enzyme-adapter-react-16

将 transform-class-properties 添加到 .babelrc 文件中，如下所示 -

"plugins": [
    "transform-class-properties"
  ]

在 package.json 的顶层添加以下内容

"jest": {
    "moduleNameMapper": {
      "\\.(css)$": "jest-css-modules"
    }

接下来的单元测试应该可以正常工作。

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import ThankYouPage from './components/thank-you-page';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

describe('<ThankYouPage />', () => {
  it('renders 1 ThankYouPage component', () => {
    const component = shallow(<ThankYouPage show=true />);
    expect(component).toHaveLength(1);
  });
});

Answer 2

试试这个：

    import * as React from 'react';
    import * as Adapter from 'enzyme-adapter-react-16';
    import {shallow, configure} from 'enzyme';
    import ThankYouPage from './components/thank-you-page';

   configure({adapter: new Adapter()});

   describe('my test', () => {
     ...
     ...
   });

从 npm 安装 enzyme-adapter-react-16 包。

Answer 3

你以错误的方式导入酶（不是相对路径），试试import { shallow } from 'enzyme';