Question

我是Preact的新手，我必须为Preact中的应用程序编写单元测试用例。我可以发现jest和酶可以用于相同但我每次都会遇到错误。有人可以建议一些关于如何在Preact上编写单元测试用例的博客或教程吗？

Answer 1

<强>更新

现在preact-enzyme-adapter可用，可以使用Enzyme运行预处理测试。我还没有对它进行测试，但是我推荐它一试，因为Enzyme有一个非常好的工具带，已经被广泛使用。

原始回答

This preact boilerplate project有一个包含单元测试的设置。他们正在使用jest来运行测试。

根据我的理解，以下是启动和运行的相关部分。

的package.json

  "jest": {
    "setupFiles": [
      "./test/setup.js"
    ],
    "testURL": "http://localhost:8080",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat"
    },
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ]
  },

测试/ setup.js：

import 'regenerator-runtime/runtime';
import chai from 'chai';
import assertJsx, { options } from 'preact-jsx-chai';

// when checking VDOM assertions, don't compare functions, just nodes and attributes:
options.functions = false;

// activate the JSX assertion extension:
chai.use(assertJsx);

global.sleep = ms => new Promise( resolve => setTimeout(resolve, ms) );

家/ index.test.js

import { h } from 'preact';
import { expect } from 'chai';

import Home from '../../../src/components/home';

describe('components/home', () => {
    it('should show the home text', () => {
        const home = <Home/>;
        expect(home).to.contain(<h1>Home</h1>);
        expect(home).to.contain('Home component');
    });
});

Answer 2

使用preact-render-spy来查看this template project，它不依赖于反应或酶。另外还配置了TypeScript。

写作单元测试用例

2 个答案: