Question

有没有办法为单个文件而不是整个测试套件运行ng test？理想情况下，我想在编辑文件时获得最快的反馈循环，但karma在每次保存时执行整个套件，这在构建足够大的测试套件时有点慢。

这与How to execute only one test spec with angular-cli的不同之处在于该问题与运行单个规范有关。这是关于运行单个文件。该解决方案涉及相同的Jasmine规范功能，但问题的性质略有不同。

Answer 1

我发现Jasmine允许您在describe和it方法前加f（用于焦点？）。所以，fdescribe和fit。如果你使用其中任何一个，业力只会运行相关的测试。因此，要关注当前文件，您只需获取顶级describe并将其更改为fdescribe即可。适用于我的目的。

Answer 2

这几天可以通过include选项来实现。 https://angular.io/cli/test#options

这是一个全局匹配，例如：

ng test --include='**/someFolder/*.spec.ts'

我在8.1.0 release notes中找不到它，但是@Swoox在下面提到了cli版本8.1.0之后的功能。感谢您解决这个问题。

Answer 3

我发现ng test还有一个附加选项--include，可以使用它来对单个文件，特定目录或一堆文件进行测试：

// one file
npm run test -- --include src/app/components/component/component-name.component.spec.ts

// directory or bunch of files
npm run test -- --include src/app/components

ng cli docs

Answer 4

您可以转到src/test.ts并更改以下行：

const context = require.context('./', true, /\.spec\.ts$/);

到

const context = require.context('./', true, /**yourcomponent.component**\.spec\.ts$/);

Answer 5

Visual Studio代码扩展

最简单的方法是使用vscode-test-explorer扩展名及其子级angular-karma-test-explorer和jasmine-test-adapter，如果需要，您将获得一份当前测试列表，以逐项运行：

这是我在this question给出的答案，那里还有更多细节。

Answer 6

在Angular 9中，我在以下方面很幸运：

如果要测试特定文件：

ng test --test-file=path/to/your/file.component.spec.ts

如果您只想测试自上次提交以来的更改（使用git或其他版本控制）

ng test --only-changed

如果您的Angular项目中有多个项目和/或正在使用NX，则可以指定一个Angular项目进行测试：

ng test project-name

您也可以使用

ng test --testNamePattern componentname

用于path/to/your/component/componentname.spec.ts之类的内容。这将扫描每个项目中的每个文件，并且速度较慢。

Answer 7

我总是使用以下命令运行单个测试：

class App extends Component {
  state = {
    users: [],
    page: 1
  };

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    axios({
      url: `https://jsonplaceholder.typicode.com/users`,
      method: "GET"
    })
    .then(res => { 
      this.setState({
        // *you must append to users in state, otherwise 
        // the list will not grow as the user scrolls
        users: [...this.state.users, ...res.data],
        page: this.state.page + 1
      });
    })
    .catch(error => {
      console.log(error);
    }) 
  }

  scroll = (e) => {
    // *simplified, to only handle appending to the list
    // note the 50px from the bottom, adjust as required
    // so that the request is made before the users reaches
    // the bottom of the page under normal scrolling conditions.  
    if (e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50) { 
      this.getUsers();
    }
  }

  render() {
    return (
      <div onScroll={this.scroll} className="container">
        <ul>
          {this.state.users.map((user, index) =>
            // *always add a unique key for each item
            <li key={user.name}>
              {user.name}
            </li>   
          )}
        </ul>
      </div>
    );
  }
}

Answer 8

您必须走src/test.ts并可以更改以下行号代码18：

//Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);

到

//Then we find all the tests.
const context = require.context('./', true, /testing.component\.spec\.ts$/);

Answer 9

使用 npm运行测试文件.component.spec.ts 对我来说适用于角度7版本。

Answer 10

如果您将spec文件指定为参数，则无效。

例如：

ng test foo.spec.ts

希望这有帮助。

运行单个测试文件

10 个答案:

Visual Studio代码扩展