Как смоделировать местоположение с маршрутизатора при использовании фермента

Question

У меня есть следующий код ...

 <BrowserRouter>
     <Switch>
         <Route path='/' exact component={Main} />
         <Route path='/transcript' component={Transcript} />
     </Switch>
</BrowserRouter>

// Inside Transcript...
constructor(props){
    super(props);
    let params = new URLSearchParams(location.search);
    if(!params.get("id")){
        throw new Error("Transcript must have id");
    }
    ...
}
// Test
describe("<Transcript />", ()=>{
    beforeAll(()=>{
        context.trans = shallow(<Transcript />)
    });
    it("Simple Test", ()=>{
        expect(context.trans.find("audio")).toBeDefined()
    })
});

Когда я пытаюсь запустить, я получаю сообщение о том, что параметр отсутствует. Теперь, поскольку я не использую браузер, я не уверен, как издеваться над этой информацией. В частности, как мне сменить переменную location.search?

Answer 1

Один из вариантов - это внедрение зависимостей: разрешить передачу location (или, возможно, даже search) в качестве опоры для вашего компонента.По умолчанию вы можете задать для пропеллера значение window.location и в тесте пройти определенное значение.Однако тогда вы не проверяете правильность значения по умолчанию:).

Так что если вы хотите проверить, что ваша функция извлекает значение из window.location, это немного сложнее.Более старые версии jsDOM (7 и более ранние) позволяли вам определять свойства местоположения следующим образом:

// somewhere in test setup
 Object.defineProperty(window.location, 'search', {
  writable: true,
  value: 'query=true'
});

Но теперь jsDOM не позволяет вам этого делать (начиная с jest 22+).Однако есть альтернатива.Вы можете использовать свойство конфигурации testURL jest, чтобы задать URL для всех тестов, но это не сработает, если ваши тесты когда-либо будут нуждаться в другой конфигурации.Но если вы используете API pushState, то это может быть использовано для установки URL:

window.history.pushState({}, 'Test Title', '/test.html?query=true')

Это может иметь предостережения, хотя, если другие вещи заботятся о API истории, но, вероятно, работает в вашем случае.

Идеальный способ - использовать jsdom.reconfigure для установки URL-адреса, но экземпляр jsdom, используемый jest, не легко доступен ...

Ссылки:

• https://github.com/facebook/jest/issues/5124
• https://www.ryandoll.com/post/2018/3/29/jest-and-url-mocking

Answer 2

Как вы заявляете, проблема в том, что у вас нет браузера, поэтому у вас нет местоположения.

Существует множество способов решить эту проблему, самый простой - предоставитьфиктивный объект местоположения непосредственно перед вашим тестом:

it("Simple Test", ()=>{
   global.location = new URL('your.mock.com')
   expect(context.trans.find("audio")).toBeDefined()
 })

Однако, если это не имеет отношения к тесту (и вам просто нужно, чтобы ваш компонент не взорвался), то вам, вероятно, следует проверить, что window && window.location доступно перед проверкой params.