Тестовая кнопка onClick в функции react-native
Я пытаюсь написать свое первое приложение, используя собственный фреймворк React. У меня проблема с тестом функции onClick для кнопки.
Мой код App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native';
export default class App extends React.Component {
refreshData() {
console.info("download data from server placeholder");
}
render() {
return (
<View style = {styles.container}>
<Text>Shake your phone to open the developer menu.</Text>
<Button
id = "refreshButton"
onPress = {this.refreshData}
title = "Refresh"
color = "#000000"
accesibilityLabel = "Refresh AQI data"
testID = "refreshButton"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Мой код App.test.js:
import React from 'react';
import App from './App';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
import renderer from 'react-test-renderer';
import { shallow, mount, render } from 'enzyme';
it('should render without throwing an error', function() {
const wrapper = shallow(<App />);
const refreshData = jest.fn();
expect(wrapper.find('#refreshButton')).toHaveLength(1); // pass
wrapper.find('#refreshButton').first().simulate('click');
expect(refreshData).toHaveBeenCalledTimes(1); // fail
});
Когда я запускаю npm test, мой тест терпит неудачу, потому что refreshData вызывается ноль раз. Похоже, что функция моделирования не работает, почему? Я пробовал симулировать вызов без функции first (), но это не сработало. Я не знаком с javascript, может я сделал очевидную ошибку? Я нашел этот код в документации и некоторых руководствах, которые я нашел в Интернете. Я пишу простое приложение для iOS только для себя и для тренировок, и я большой поклонник TDD. Это причина того, что модульные тесты важны для меня.
К сожалению нет. У меня нет проблем с методом onPress, потому что он работает в симуляторе. У меня проблема только с тестами.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Измените часть onPress = {this.refreshData} следующим образом:
onClick = {this.refreshData}
Это не работает, потому что для реагирования требуется метод onPress.
Я не уверен, что фермент поддерживает селекторы ID и #. Попробуйте добавить опору testID и назвать ее так:
wrapper.dive().find("[testID='yourTestID']").simulate("press");
или же
wrapper.dive().find("[testID='yourTestID']").onPress();
Я использую оба, и они отлично работают.
Обновлено: теперь ваша проблема в этом
const refreshData = jest.fn ();
Измените на:
const refreshData = jest.spyOn (wrapper.instance (), «refreshData»);
Edit2:
Обновите код кнопки до этого:
<Button
id = "refreshButton"
onPress = {this.refreshData}
title = "Refresh"
color = "#000000"
accesibilityLabel = "Refresh AQI data"
testID = "refreshButton"
/>
и тестовый код для этого:
it('should render without throwing an error', function() {
const wrapper = shallow(<App />);
let refreshData = jest.spyOn(wrapper.instance(), "refreshData");
expect(wrapper.find('#refreshButton')).toHaveLength(1);
wrapper.find("[testID='refreshButton']").onPress();
expect(refreshData).toHaveBeenCalledTimes(1);
});
Если это не сработает, я понятия не имею.
У меня это не работает. Когда я использую simulate ('press'), у меня такой же сбой, onPress () не является функцией. Странный.
Измените refreshData () на refreshData = () =>. Это обязывающая проблема
Не работает. Мой код работает, но тест - нет ... Когда я изменил код на этот, вы предполагаете, что у меня работает console.info. Была вызвана функция вещи, но у меня проблема с утверждением.
См. Мой отредактированный ответ. Вы заявляете, что шпион неправ.
Я изменил свой код, и теперь у меня есть следующее: pastebin.com/TeRXULbR У меня все еще есть проблема с тестом: «Ожидается, что фиктивная функция будет вызываться один раз, но она вызывалась ноль раз». Я вижу в console.info, что моя функция вызывается, но asertion не работает, потому что похоже, что что-то не так с моей фиктивной функцией.
Вместо симуляции используйте второй. Просто выполните onPress (). Также вы правильно добавили опору testID к кнопке?
Да, у меня нет проблем с вызовом функции, потому что я вижу в журнале «загрузить данные с сервера-заполнителя». У меня проблема с утверждением. К сожалению, onPress () не работает, потому что я получил ошибку: onPress не является функцией.
Моделирование не завершится неудачно, если элемент не найден. Сам Enzyme рекомендует использовать onPress. Если вы получили эту ошибку, проблема в селекторе. Он не находит кнопку на снимке или мелком компоненте. Как вы пытаетесь запустить onPress на тесте? И как сейчас твой код? Вы добавили опору testID?
Хм ... У меня есть селектор testID, как в коде в вопросе. Мой тестовый код находится на pastebin. Выполнение теста Durnig Я вижу Console.log с моим tezy, который я определил в функции refreshData. Думаю, это проф, что моя функция выполняется. Я дважды проверю свой код завтра после работы и вставлю все в pastebin.
Это мое приложение и тестовый код: pastebin.com/UK1rctCk В строке 84 я вижу журнал моей консоли из функции.
Позвольте нам продолжить обсуждение в чате.
Да, теперь это будет работать, потому что вы не связали функцию. Попробуйте вместо этого использовать стрелочную функцию, как показано ниже, чтобы вам не хотелось этого делать.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native';
export default class App extends React.Component {
refreshData = () => {
console.info("download data from server placeholder");
}
render() {
return (
<View style = {styles.container}>
<Text>Shake your phone to open the developer menu.</Text>
<Button
id = "refreshButton"`enter code here`
onPress = {this.refreshData}
title = "Refresh"
color = "#000000"
accesibilityLabel = "Refresh AQI data"
testID = "refreshButton"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Имеет ли значение изменение на onPress = {() => this.refreshData ()}?