javascript - Js 文件作为 cypress 中的夹具未加载

Question

如何使用js文件作为fixture？有这方面的例子吗？我在 user-details.js 中试过这个:

data = {
  email: function () {
    const currentTimestamp = new Date().getTime();
    return `test${currentTimestamp}@test.com`
  },
  firstName: 'Max',
  lastName: 'Mustermann',
  street: 'Some Street',
} 

然后在我的规范文件中我这样做:

beforeEach(function () {
    cy.fixture(env + '/user-details').as('userDetails');
  }); 

并且在同一规范文件中测试的 it block 中:

const userDetails = this.userDetails.data;
actions.insertStreet(userDetails.street);

但它说它无法读取未定义的属性“街道”。任何想法如何正确地做到这一点？ :汗水微笑:

Answer 1

我有同样的问题，但不能完全回答 the accepted answer我看到的情况(在 Cypress 9.2.1 中)。

事实证明，当 .js 文件作为夹具给出时，cypress eval()s the content of the file (实际上，它使用 eval-with-parentheses )，并使用由此产生的任何对象。所以它是可能有一个文件user-details.js，看起来像

[{name: "Bob", age: 30 + 5}]

甚至执行一些“真正的”代码:

["Bob", "Rob", "Job"].map((name, index) => ({user: name, age: 20 + index}))

或

(() => {
    const users = ....
    return users
})()

应该注意的是，它并不像您想要的那样灵活(例如，您不能导入代码、执行异步操作等)，但总比没有好。

问题是，你应该......

老实说，我认为这是一种很好的方式，可以让您的装置略微更易于阅读、能够添加评论和轻松转换。而且您不会被 JSON 的逗号限制所困扰，例如

[
  // have a single user, because blah blah
  {name: "Bob", date_of_birth: new Date(1979, 5, 3).valueOf() / 1000},
]

(Date(1979, 5, 3) 比某些 unix 时间戳 (even though it means 5th of June, not 5th of May....) 更易于人类阅读)

我完全认为 .js fixture 是执行此操作的好方法(如果它只是将 fixture 作为模块导入并使用默认导出作为 item 或其他东西会更快乐，但是 eval 是可以接受的....)，只要您生成的东西是恒定的!如果你想要一些动态的东西(或者，可能是一些需要更复杂的东西来制作)，你最好使用 @seth-lutske 的建议(这意味着在你的情况下，接受的答案就是你需要的，但是我想记录下 .js fixture 是如何工作的，以防其他人过来。

说了这么多，为什么 cypress 在这里使用 eval() 是值得怀疑的，即使 the suggested way is to use window.Function() ;此外，我想知道你是否想冒这样的风险，即一些其他开发人员(包括 future-you)决定构建一个从某个外部网站下载你的固定装置的系统，这意味着你创建了一个很好的安全漏洞....

阅读 github issue 非常有用在 Javascript 固定装置上(我希望在我自己投入所有这些之前我已经拥有)；如果您正在寻找一个好的解决方法，请参阅 this和 this评论。

---

作为对所提问题的具体回答，问题在于

eval(`data = {
  email: function () {
    const currentTimestamp = new Date().getTime();
    return \`test\${currentTimestamp}@test.com\`
  },
  firstName: 'Max',
  lastName: 'Mustermann',
  street: 'Some Street',
} `)

将准确返回该对象，该对象应该可以在 this.userDetails 上访问。因此 this.userDetails.data 指向此对象中的数据字段，它是 undefined。

以下是可行的:

用户详细信息.js:

{
  data: {
    email: function () {
      const currentTimestamp = new Date().getTime();
      return `test${currentTimestamp}@test.com`
    },
    firstName: 'Max',
    lastName: 'Mustermann',
    street: 'Some Street',
  }
} 

(或者，如果您希望 email 是一个字符串而不是一个函数:

{
  data: {
    email: (function () {
      const currentTimestamp = new Date().getTime();
      return `test${currentTimestamp}@test.com`
    })(),
    firstName: 'Max',
    lastName: 'Mustermann',
    street: 'Some Street',
  }
} 

)