在 testcafe 中模拟 apollo 查询

Question

我目前正在使用 testcafe 进行 e2e 测试。

由于testcafe不支持异步代码，我必须模拟我的 graphql 查询。

除了使用RequestMock函数还有其他方法吗？

它不是真正的开发人员友好，因为它非常注重 REST 🤷

编辑：

关于我 testcafe 不允许使用异步代码的事实，这里有一些细节：如果我尝试使用异步代码（查询真实数据），setBody 函数将丢失。 有一个问题在这里

const handler = async (req, res) => {


 // ok
  res.setBody('foobar')
  data = await Promise.resolve({ some: 'data' })
  // setBody is no longer defined
  res.setBody(JSON.stringify(data))
}
fixture('Register')
.page('http://foobar/register')
.requestHook(handler)

编辑2：

我已经添加了我目前使用的两个文件。

请在导出默认值之前查看 apolloHook.js

// apolloHook.js
import { RequestMock } from 'testcafe'
import fetch from 'node-fetch'
import gql from 'graphql-tag'
import configureApolloClient from '../../../src/ApolloClient'
const urlToCatch = 'http://127.0.0.1/index.php/graphql/'
const client = configureApolloClient({
  uri: 'http://nginx/index_test.php/graphql/',
  fetch
})
const handler = async (req, res) => {
  const body = JSON.parse(req.body.toString('utf8'))
  const query = gql`${body.query}`
  const { variables } = body
  let data = null
  if (body.query.startsWith('query')) {
    data = await client.query({ query, variables })
  } else {
    data = await client.mutate({ mutation: query, variables })
  }

  // res.setBody is undefined !

  res.setBody(JSON.stringify(data))
}
export default RequestMock()
  .onRequestTo({ url: urlToCatch, method: 'POST' })
  .respond(handler)

// register.js
import { Selector } from 'testcafe'
import { REGISTER_FIXTURES } from '../fixtures'
import { testInput, testPhoneInput, testCountryInput, testCountriesInput, testSelect } from '../utils/utils'
import apolloHook from '../utils/apolloHook'
const registerUrl = 'http://front:3000'
//Uncomment for local testing
//const registerUrl = 'http://127.0.0.1:3000'
fixture('Register')
  .page(registerUrl)
  .requestHooks(apolloHook)
test('Fill out sign up', async t => {
  await testInput(t, Selector('[data-testid=\'email\']'), 'john.doe@professional.com')
  await t
    .click(Selector('[data-testid=\'send-me-a-code\']'))
    .expect(Selector('[data-testid=\'one-time-password-button\']').innerText).eql('Submit')
})

Answer 1

我很确定，你现在得到了解决方案，因为 testcafe 在respond钩子内部支持async/await 。

您还可以尝试使用testcafe-graphql-mock库在运行时使用RequestMock和该库提供的一些自定义方法来模拟您的 graphql 查询。

将此库添加为dev-dependency

npm i -D testcafe-graphql-mock

现在，您可以使用自定义命令：

import { mockGraphQL } from 'testcafe-graphql-mock';
 
// define the schema
const schema = `
type Person {
  firstname: String!
  surname: String!
}
 
type Query {
  people: [Person]
}
`;
 
// define the mock
const mock = {
  Query: () => ({
    people: () => [
      {
        firstname: 'Lee',
        surname: 'Byron',
      },
    ],
  }),
};
 
// create traditional testcafe request mock
const requestMock = RequestMock()
  .onRequestTo({ url: 'http://localhost:3000/graphql', method: 'POST' })
  .respond(async (req, res) => {
    await mockGraphQL(
      {
        schema,
        mock,
      },
      req,
      res
    );
  });
 
// now call the testcafe request mock in fixures as request hooks
fixture(`GraphQL Mock test`)
  .page('http://localhost:3000/')
  .requestHooks(requestMock);
 
test('test graphql mock data', async (t) => {
  await t.click(Selector('button'));
  await expect(Selector('div')).contains('Lee Byron');
});

您还可以为响应添加delay ：

await mockGraphQL(
      {
        schema,
        mock,
        delay: 5000,
      },
      req,
      res
    );