我已经在我的应用程序中安装了 Husky v5，我想在提交时运行该lint-staged命令。
我遵循了入门文档，但在我的 git 配置文件中没有创建 .git/hooks/pre-commit 文件。
所以，当我提交时，钩子没有运行，提交直接通过，没有被 lint-staged 检查。
我尝试运行yarn add -D husky@next或npm i -D husky@next. 我还尝试删除 node_modules 和 npm rebuild。
.husky/预提交
#!/bin/sh
[ -z "$CI" ] && exit 0
. "$(dirname $0)/_/husky.sh"
lint-staged
包.json
"scripts": {
"postinstall": "husky install"
},
我的问题相当简单，但我还没有找到任何与之对应的答案，如何断言 Cypress 元素为空？我只是想确保该元素不包含文本。
我最初的尝试是
cy.find('.someElement').should('have.text', '');
但即使我的 div 在 DOM 中为空，我也遇到了这个错误
expected '<div.someElement>' to have text '', but the text was '\n \n \n '
我让它工作使用
cy.find('.someElement')
.should(($el) => {
expect($el.text().trim()).equal('');
});
但我不明白为什么我必须修剪元素的文本。
我有一个React应用程序，我试图在其中包含一些Sass。
我还使用Webpack将所有.scss文件捆绑到一个.css文件中进行生产。
为此，我使用了mini-css-extract-plugin，但是我的所有样式文件都没有捆绑到最终输出文件中，即使它们已导入下面的app.js中也是如此。仅将我app.js中的.scss文件正确地装入了捆绑包，但没有正确地装入了styles.scss。因此，我的样式在开发阶段有效，但在部署生产时却没有。
这是我要构建我的应用程序时运行的命令（在package.json文件中）。
"build": "webpack --mode production --config webpack.prod.js ./src/app.js --output ./dist/bundle.js"
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
}
});
webpack.common.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: …我正在编写我的 React Native 应用程序的测试套件，我想知道如何使用 Jest & Enzyme 测试 React Native 子组件的浅层渲染。
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'
import NextButton from './NextButton'
describe('NextButton component', () => {
describe('Rendering', () => {
let onPress, text, wrapper
beforeEach(() => {
onPress = jest.fn()
text = 'Test button'
wrapper = shallow(<NextButton onPress={onPress}>{text}</NextButton>)
})
test('should render NextButton correctly', () => {
expect(toJson(wrapper)).toMatchSnapshot()
})
test('should have text rendered as a child', () => {
expect(toJson(wrapper.prop('children'))).toEqual(text)
})
})
}) …我想创建一个find像这样的自定义 Cypress 命令来利用data-test属性。
赛普拉斯/支持/index.ts
declare global {
namespace Cypress {
interface Chainable {
/**
* Custom command to get a DOM element by data-test attribute.
* @example cy.getByTestId('element')
*/
getByTestId(selector: string): Chainable<JQuery<HTMLElement>>;
/**
* Custom command to find a DOM element by data-test attribute.
* @example cy.findByTestId('element')
*/
findByTestId(selector: string): Chainable<JQuery<HTMLElement>>;
}
}
}
赛普拉斯/支持/commands.ts
Cypress.Commands.add('getByTestId', (selector, ...args) => {
return cy.get(`[data-test=${selector}]`, ...args);
});
Cypress.Commands.add(
'findByTestId',
{ prevSubject: 'element' },
(subject, selector) => {
return subject.find(`[data-test=${selector}]`); …我正在尝试使用插件react-native-image-zoom-viewer来显示图像预览，并且我想实现当用户单击Android后退按钮时关闭模式的简单目标。closeModal但是，单击时不会触发处理程序函数。
我已经尝试closeModal用非匿名函数替换，但仍然没有结果。我该如何解决这个问题？
感谢帮助！
import ImageViewer from 'react-native-image-zoom-viewer'
import { BackHandler, Modal } from 'react-native'
import React, { useEffect, useState } from 'react'
const [isModalVisible, setModalVisible] = useState(false)
const closeModal = () => {
if (isModalVisible) {
setModalVisible(false)
}
}
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', closeModal)
return () => BackHandler.removeEventListener('hardwareBackPress', closeModal)
}, [])
// Here is how I call the modal in the jsx
<Modal transparent visible={isModalVisible}>
<ImageViewer
enableSwipeDown
imageUrls={[
{
url: picture.url_min,
},
]}
onSwipeDown={closeModal} …我创建了这个 Vue 组件并向其传递了一个图标路径。
<CTA type="primary" icon="~/assets/phone/img/icons/share.svg" icon-alt="share">
Primary CTA
</CTA>
我的设置方法返回以下内容
setup(props) {
return {
ctaIcon: props.icon,
}
},
所以ctaIcon等于~/assets/phone/img/icons/share.svg.
ctaIcon当我尝试在模板中使用时，这有效
<img :src="require('~/assets/phone/img/icons/share.svg')" />
但这不起作用
<img :src="require(ctaIcon)" />
我收到以下错误Cannot find module '~/assets/phone/img/icons/share.svg'
如何让它正常工作？